web前端JavaScript闭包

Posted 2020-10-12

example:

var generateClosure = function(){

　　var count = 0;

　　var get = function(){

　　　　count++;

　　　　return count;

　　};

　　return get;

};

var counter = generateClosure();

console.log(counter()); //输出1

console.log(counter()); //输出2

console.log(counter()); //输出3

这段代码中，generateClosure()函数中有一个局部变量count,初值为0。还有一个叫做get的函数，get将其父作用域，也就是generateClosure()函数中的count变量增加1，并返回count的值。generateClosure()的返回值是get函数。在外部我们通过counter变量调用了generateClosure()函数并获取了它的返回值，也就是get函数，接下来反复调用几次counter(),我们发现每次的值都递增了1。

让我们看看上面的例子有什么特点，按照通常命令式编程思维的理解，count是generateClosure()函数内部的变量，它的生命周期就是generateClosure()被调用的时期，当generateClosure()从调用栈中返回时，count变量申请的空间也就被释放。问题是，在generateClosure()调用结束后，counter()却引用了“已经释放了的”count变量，而且非但没有出错，反而每次调用counter()时还修改并返回了count。这是怎么回事呢？

这正是所谓闭包的特性。当一个函数返回它内部定义的一个函数时，就产生了一个闭包，闭包不但包括被返回的函数，还包括这个函数的定义环境。上面例子中，当函数generateClosure()的内部函数get被一个外部变量counter引用时，counter和generateClosure()的局部变量就是一个闭包。

example:

var generateClosure = function{

　　var count = 0;

　　var get = function(){

　　　　count++;

　　　　return count;

　　};

　　return get;

};

var counter1 = generateClosure();

var counter2 = generateClosure();

console.log(counter1()); //输出1

console.log(counter2()); //输出1

console.log(counter1()); //输出2

console.log(counter1()); //输出3

console.log(counter2()); //输出2