首页 > 代码库 > Javascript 闭包的理解

Javascript 闭包的理解

 示例1:

function makeCounter() {    var i = 0;    console.log( ++i );}var counter = makeCounter(); // 输出: 1counter();  //TypeError: undefined is not a functioncounter();  //TypeError: undefined is not a function

这个例子中,声明了一个makeCounter函数,发现 var counter = makeCounter(); 输出了一个结果: 1   这是因为实际上  赋值号的右边 makeCounter() 就把函数执行了一遍,但没有返回值,所以 counter 被赋予了 undefined ,接下来的两次调用返回错误 TypeError: undefined is not a function

 

再来看修改后的代码:

示例2:

function makeCounter() {    var i = 0;    return function() {        console.log( ++i );    };}var counter = makeCounter;  //无输出counter(); // 无输出counter(); // 无输出var counter2 = counter();  //无输出counter2(); // 输出: 1counter2(); // 输出: 2var counter3 = makeCounter();  //无输出counter3(); // 输出: 1counter3(); // 输出: 2console.log(i);// ReferenceError: i is not defined

这次 makeCounter函数返回值是一个函数,这里其实是一个闭包,根据javascript高级程序设计,闭包是指有权访问另一个函数作用域中的变量的函数。 根据 MDN:

Closures are functions that refer to independent (free) variables.

In other words, the function defined in the closure ‘remembers‘ the environment in which it was created.

指通常我们把像这样在一个函数内部再创建一个函数就是创建闭包的最常见方式。

闭包中的函数能够“记住”创建它的外层环境的活动对象,makeCount函数执行之后,其活动对象并不会被销毁,因为闭包内的函数的作用域链仍然在引用这个活动对象,因此仍然保留在内存中。

如上面代码所示,值得注意的是每次调用makeCount函数,即每次返回闭包内函数时候,活动对象都是不同的实例,互相并不关联,请见 count2() 和count3() 的输出。

 

Javascript 闭包的理解