javascript 闭包解析

Posted 2021-03-15 全栈开发的快乐

ES6之前，js支持全局变量和局部变量，私有变量可以用到闭包。

 

闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。

直观的说就是形成一个不销毁的栈环境。

 

以计数器为例子讲解闭包的作用。

全局变量实现：

var counter = 0;
 
function add() {
   return counter += 1;
}
 
add();
add();
add();
// 最终输出3

该方案中的counter为全局变量，整个项目的任何位置都可以修改。

 

局部变量：

function add() {
    var counter = 0;
    return counter += 1;
}
 
add();
add();
add();
 
// 本意是想输出 3, 但事与愿违，输出的都是 1 !

每一次调用，都会counter重置为0。

 

 

所有函数都能访问全局变量。也都能访问它们上一层的作用域。比如内嵌函数如下：

function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();    
    return counter; 
}

如果我们能在外部访问 plus() 函数，这样就能解决计数器的困境。

 

js闭包

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
 
add();
add();
add();
 
// 计数器为 3

变量 add 指定了函数自我调用的返回字值

自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。

add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器变量counter。

这个叫作 javascript 闭包。它使得函数拥有私有变量变成可能。

计数器受匿名函数的作用域保护，只能通过 add 方法修改。