《Web 前端面试指南》1、JavaScript 闭包深入浅出

闭包是什么？

闭包是内部函数可以访问外部函数的变量。它可以访问三个作用域：首先可以访问自己的作用域（也就是定义在大括号内的变量），它也能访问外部函数的变量，和它能访问全局变量。

内部函数不仅可以访问外部函数的变量，也能访问外部函数的参数（parameters）。但注意，它只能访问外部函数的 parameters ，而不能访问外部函数的 arguments 对象。

举例说明

JavaScript 闭包

function showName (firstName, lastName) { 

   var nameIntro = "Your name is ";

    // 内部函数可以访问外部函数的变量（nameInfo）、parameter (firstName、lastName)

    function makeFullName () { 

        return nameIntro + firstName + " " + lastName; 

    }



    return makeFullName (); 

} 



showName ("Michael", "Jackson"); // Your name is Michael Jackson

Jquery 闭包

$(function() {

    var selections = [];

    // 能访问 selections 变量

    $(".niners").click(function() {

        // 能更新变量 selections

        selections.push (this.prop("name"));

    });

});

闭包的规则和副作用

即使是被返回的闭包仍然可以访问外部函数的变量

JavaScript 的执行时候的作用域和创建时候的作用域是一样的。这也就是说即使被外部函数返回后，内部函数仍然能访问外部函数的变量。

function celebrityName (firstName) {

    var nameIntro = "This celebrity is ";

   function lastName (theLastName) {

        return nameIntro + firstName + " " + theLastName;

    }

    return lastName;

}



var mjName = celebrityName ("Michael");// 这个时候外部方法 celebrityName 已经被返回了



// 闭包仍然可以访问外部方法的变量和参数

mjName ("Jackson"); // This celebrity is Michael Jackson

闭包存储的是外部函数的变量的引用

存储的不是实际的值，在闭包被调用之前，如果外部函数中变量的值发生改变，会变得更有意思。

function celebrityID () {

    var celebrityID = 999;

    // 返回的包含内部函数的对象

    return {

        getID: function ()  {

            // 内部函数返回的是更新以后的 celebrityID 变量值

            return celebrityID;

        },

        setID: function (theNewID)  {

            // 内部函数随时都能改变外部函数内的变量。

            celebrityID = theNewID;

        }

    }

}



var mjID = celebrityID (); // 此时，外部函数的 celebrityID 变量被改变。

mjID.getID(); // 999

mjID.setID(567); // 改变外部函数的 celebrityID 变量。

mjID.getID(); // 567

闭包的副作用

开发中有如下情况

function celebrityIDCreator (theCelebrities) {

    var i;

    var uniqueID = 100;

    for (i = 0; i < theCelebrities.length; i++) {

      theCelebrities[i]["id"] = function ()  {

        return uniqueID + i;

      }

    }

    return theCelebrities;

}



var actionCelebs = [{name:"Stallone", id:0},

    {name:"Cruise", id:0},

    {name:"Willis", id:0}

];



var createIdForActionCelebs = celebrityIDCreator (actionCelebs);



var stalloneID = createIdForActionCelebs [0];

console.log(stalloneID.id()); // 103

在调用匿名函数的时候，uniqueID 已经加了数字 3 变成 103，生成的 celebritiesID 也是 103，数组的每个元素也就是都是 103，而不是 100、101、102。

这是因为闭包（也即是例子中的内部匿名函数）访问的是外部函数的变量的引用，而不是变量的值。为了解决这个 BUG，我们可以使用一种 ** Immediately Invoked Function Expression ** (IIFE)(立即执行函数语法)，代码如下：

function celebrityIDCreator (theCelebrities) {

    var i;

    var uniqueID = 100;

    for (i = 0; i < theCelebrities.length; i++) {

        theCelebrities[i]["id"] = function (j)  {

            // 这里的 j 参数也就是在 调用（IIFE）时传过来的参数 i。

            return function () {

                return uniqueID + j;

                // 依次接收传递过来 i 值，然后把它保存在数组中。

            } () // 通过在 function 末尾处加 () ,可以立即执行它，然后只返回 uniqueID + j 的值，而不是 一个 function。

        } (i); // 传递过来一个 i 变量作为匿名函数的参数，并立即执行它。

    }



    return theCelebrities;

}



var actionCelebs = [{name:"Stallone", id:0}, {name:"Cruise", id:0}, {name:"Willis", id:0}];



var createIdForActionCelebs = celebrityIDCreator (actionCelebs);



var stalloneID = createIdForActionCelebs [0];

console.log(stalloneID.id); // 100

var cruiseID = createIdForActionCelebs [1]; 

console.log(cruiseID.id); // 101

随机推荐

Java开发的基础条件:
------------Java开发的基础条件:Java相关的基础+对编程的自己的理解+调试代码+自己的坚持一定要谦逊,不人云亦云,不去妄言某一门语言或技术好或坏!不是哪门技术有问题,而是(不会用才 ...
SQL 语言 - 数据库系统原理
SQL 发展历程从 1970 年美国 IBM 研究中心的 E.F.Codd 发表论文到 1974 年 Boyce 和 Chamberlin 把 SQUARE 语言改为 SEQUEL 语言,到现在的 ...
javascript函数的4种调用方式
在javascript中一共有4种函数调用模式,分别是:方法调用模式.函数调用模式.构造函数调用模式和apply(call)调用模式,这4种模式的主要差异在于如何初始化关键参数this. 方法调用模式 ...
Oracle查看被锁的表和解锁[转]
查看被锁的表 select p.spid,a.serial#, c.object_name,b.session_id,b.oracle_username,b.os_user_name from v$p ...
生成1~n的排列，以及生成可重集的排列
#include <iostream> using namespace std; void printPermutation(int n, int* A, int cur) { if (c ...
Hadoop项目实战－用户行为分析之应用概述（一）
1.概述本课程的视频教程地址:<Hadoop 回顾> 好的,下面就开始本篇教程的内容分享,本篇教程我为大家介绍我们要做一个什么样的Hadoop项目,并且对Hadoop项目的基本特点和其中 ...
C#设计模式--迭代器模式（学习Learning hard设计模式笔记）
/// <summary> /// 抽象聚合接口 /// </summary> public interface IListCollection { Iterator GetI ...
js日期
常用函數: 創建一個日期對象 var ss =new Date(): 獲取一周的天數: ss.getDay(); 獲取1970年1月1日到現在的毫秒數: getTime(): 設置具體的日期: set ...
5. 多重背包问题 II 【用二进制优化】
多重背包问题 II 描述有 NN 种物品和一个容量是 VV 的背包. 第 ii 种物品最多有 sisi 件,每件体积是 vivi,价值是 wiwi. 求解将哪些物品装入背包,可使物品体积总和不超过背 ...
how2j网站前端项目——天猫前端（第一次）学习笔记5
收拾好心情,现在开始学习第5个页面——购物车页面! 一.结算按钮这个还是比较简单的,我自己看着站长的样子模仿了一个: 有个地方不会做,就是全选前面的复选框,站长的框里面是白色的,我搞不来. 二.订单 ...