JS的闭合（Closure）

实例
复制代码
function foo() {
let test1 = ‘变量1’
const test2 = ‘变量2’
let test3 = ‘变量3’
var innerBar = {
getName: function () {
console.log(test1)
return test2
},
}
return innerBar
}
var bar = foo()
bar.getName()
复制代码

我们可以通过控制台的Source中的scope看到闭包

image.png

右边 Scope 项就体现出了作用域链的情况：Local 就是当前的 getName 函数的作用域，Closure(foo) 是指 foo 函数的闭包，最下面的 Global 就是指全局作用域，从“Local–>Closure(foo)–>Global”就是一个完整的作用域链。

注意⚠️：只有我们在内部函数中使用的变量才会被加入闭包（Closure）中。

我们来看下范例中产生闭包时执行栈的情况：

当执行到 foo 函数内部的return innerBar这行代码时调用栈的情况
image.png

当 foo 函数执行完成之后，其整个调用栈的状态(注意⚠️：此时foo执行上下文已出栈)
image.png

当执行到bar.getName()时的栈状态
image.png

通过上面三个图我们可以清晰的看到当前作用域链 是Local–>Closure(foo)–>Global。

用途
实现私有变量
复制代码
function Animal( ){

//私有变量
var series = "哺乳动物"；
function run( ）{
    console.log("Run!!!");
}   

//特权方法
this.getSeries = function(){
    return series;
};

}
复制代码
实现模块模式
复制代码
var Counter = (function() {
var privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
increment: function() {
changeBy(1);
},
decrement: function() {
changeBy(-1);
},
value: function() {
return privateCounter;
}
}
})();

console.log(Counter.value()); /* logs 0 /
Counter.increment();
Counter.increment();
console.log(Counter.value()); / logs 2 /
Counter.decrement();
console.log(Counter.value()); / logs 1 */
深圳网站建设www.sz886.com