JavaScript闭包

啥是闭包?

一个闭包就是一个可以访问外部函数作用域链的一个内部函数。闭包有三个作用域链：它可以访问自己的作用域（即当前的大括号内），它也可以访问外部函数的变量，它还可以访问全局变量。

闭包不仅可以访问外部函数的变量，还可以访问外部函数的参数。注意：尽管内部函数可以直接访问外部函数的参数，但并不能调用外部函数的arguments 对象。

我们可以通过在一个function里增加一个function来创建一个闭包。

一个简单的闭包示例 in JavaScript:

function showName (firstName, lastName) {

​var nameIntro = "Your name is ";
    // this inner function has access to the outer function's variables, including the parameter​
    ​function makeFullName () {

​       return nameIntro + firstName + " " + lastName;

    }
​
​return makeFullName ();

}

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


当function里嵌套function时，内部的function可以访问外部function里的变量。

function foo(x) {
    var tmp = 3;
    function bar(y) {
        alert(x + y + (++tmp));
    }
    bar(10);
}
foo(2)

   不管执行多少次，都会alert 16，因为bar能访问foo的参数x，也能访问foo的变量tmp。

但，这还不是闭包。当你return的是内部function时，就是一个闭包。内部function会close-over外部function的变量直到内部function结束。

function foo(x) {
    var tmp = 3;
    return function (y) {
        alert(x + y + (++tmp));
    }
}
var bar = foo(2); // bar 现在是一个闭包
bar(10);

      上面的脚本最终也会alert 16，因为虽然bar不直接处于foo的内部作用域，但bar还是能访问x和tmp。

　　但是，由于tmp仍存在于bar闭包的内部，所以它还是会自加1，而且你每次调用bar时它都会自加1.

　　（我们其实可以建立不止一个闭包方法，比如return它们的数组，也可以把它们设置为全局变量。它们全都指向相同的x和相同的tmp，而不是各自有一份副本。）

　　上面的x是一个字面值（值传递），和JS里其他的字面值一样，当调用foo时，实参x的值被复制了一份，复制的那一份作为了foo的参数x。

　　那么问题来了，JS里处理object时是用到引用传递的，那么，你调用foo时传递一个object，foo函数return的闭包也会引用最初那个object！

function foo(x) {
var tmp = 3;
return function (y) {
    alert(x + y + tmp);
    x.memb = x.memb ? x.memb + 1 : 1;
    alert(x.memb);
    }
}
var age = new Number(2);
var bar = foo(age); // bar 现在是一个引用了age的闭包
bar(10);

 

jQuery中一段经典的闭包代码：

$(function() {
    ​
    ​var selections = []; 
    $(".niners").click(function() { // this closure has access to the selections variable​
        selections.push (this.prop("name")); // update the selections variable in the outer function's scope​
    });
​
});

 

闭包的特性及副作用

1. 外部函数返回后，闭包依然可以访问外部函数中的变量

这是闭包中重要的特性之一。是的，你没看错。在js函数执行过程中，内部函数与外部函数使用相同的作用域链。这意味着即使外部函数返回之后，内部函数依然可以访问其中的变量。所以我们可以稍后在程序中调用内部函数。

function celebrityName (firstName) {
    var nameIntro = "This celebrity is ";
    // this inner function has access to the outer function's variables, including the parameter​
   function lastName (theLastName) {
        return nameIntro + firstName + " " + theLastName;
    }
    return lastName;
}
​
​var mjName = celebrityName ("Michael"); // At this juncture, the celebrityName outer function has returned.​
​
​// The closure (lastName) is called here after the outer function has returned above​
​// Yet, the closure still has access to the outer function's variables and parameter​
mjName ("Jackson"); // This celebrity is Michael Jackson


2. 闭包保存了对外部函数中的变量的引用

并不是保存实际的变量值。 当闭包被调用之前，如果外部函数的变量发生变化时，闭包会很有意思。闭包的这种特性有很多用途。例如下面这个私有变量的例子（first demonstrated by Douglas Crockford）:


function celebrityID () {
    var celebrityID = 999;
    // We are returning an object with some inner functions​
    // All the inner functions have access to the outer function's variables​
    return {
        getID: function ()  {
            // This inner function will return the UPDATED celebrityID variable​
            // It will return the current value of celebrityID, even after the changeTheID function changes it​
          return celebrityID;
        },
        setID: function (theNewID)  {
            // This inner function will change the outer function's variable anytime​
            celebrityID = theNewID;
        }
    }
​
}
​
​var mjID = celebrityID (); // At this juncture, the celebrityID outer function has returned.​
mjID.getID(); // 999​
mjID.setID(567); // Changes the outer function's variable​
mjID.getID(); // 567: It returns the updated celebrityId variable


3. 闭包很乱

因为闭包可以访问外部函数的变量，所以在for循环中当外部函数的变量发生变化时容易出bug。

// This example is explained in detail below (just after this code box).​
​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

 

转载于:https://www.cnblogs.com/ckwblogs/p/6051088.html