学习 JavaScript 闭包

1. 前言

闭包是 JavaScript 中一种非常重要的概念，它允许函数访问其外部作用域中的变量，即使在函数被返回或者在其原始定义的作用域之外执行时仍然可以访问这些变量。

在讲解闭包之前我们得弄清楚下面的概念：

1. 作用域链： JavaScript 中的作用域是通过词法作用域（也称为静态作用域）来确定的，即函数在定义时所处的作用域决定了它能够访问的变量。当一个函数被创建时，也会创建一个作用域链，其中包含了函数自身的作用域以及所有包含（外部）作用域中的变量对象。
2. 内部函数： 在 JavaScript 中，函数可以嵌套定义，即在一个函数内部可以再定义一个函数。当内部函数被返回或者在其定义的作用域之外执行时，它既可以访问外部变量也可以访问内部变量。
3. 引用外部变量： 当内部函数引用外部函数的变量时，JavaScript 引擎会将这些变量保存在闭包中。这意味着即使外部函数执行完毕，其内部函数仍然可以访问和操作外部函数的变量。

2. 闭包

2.1. 变量的作用域

按照常理来说，我们在上一级作用域是无法访问下一级作用域的局部变量的。例如：

function fn(){  
    var n = 1;  
}

fn();
console.log(n); // n not defined！

在这里我们调用了 fn 函数，认为变量 n 定义后就能在外部被访问，但是我们得到了一个错误。所以正常来讲在外部是访问不了内部的局部变量的。但是闭包使得这个问题变为了可能。

2.2. 如何从外部访问局部变量

但是有时候我们确实想获取内部的局部变量该怎么办呢？首先我们在内部定义一个函数，如下：

function outer(){  
    var n = 1;  
    
    function inner() {
        console.log(n);
    }
    
    inner();
}

outer();

运行上面的代码我们可以看到控制台会输出 1，所以内部的函数能访问内部定义的局部变量这是没有问题的！

此时如果我们将这个内部的函数交给外部，让外部来调用这个函数，那么是不是就能访问到内部的局部变量了呢？答案是可行的！

function outer(){  
    var n = 1;  
    
    function inner() {
        console.log(n);
    }
    
    return inner;
}

let inner = outer();
inner();

运行上面的代码我们也能看到控制台输出 1，这验证了我们的猜想。

2.3. 闭包的使用场景

闭包的使用场景有很多，但凡你要传递的参数是一个函数，你就使用到了闭包。比如：

function exec(fn) {
    fn();
}

function outer() {
    let n = 0;
    function inner() {
        console.log(n);
    }
    window.exec(inner);
}

由上面的代码我们可以看到 exec 函数执行了传进来的函数，在 inner 函数中我们输出了局部变量 n，所以在 exec 函数中我们访问到了 outer 函数中的局部变量。

有些时候你可能连你使用到了闭包都不知道，下面是使用闭包的例子：

let n = 0;
window.setTimeout(() => console.log(n), 1000);

window.setInterval(() => console.log(n), 1000);

此外在我们常使用的防抖，节流中也使用到了闭包。

2.4. 注意

1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象使用，把闭包当作它的公用方法，把内部变量当作它的私有属性，这时一定要小心，不要随便改变父函数内部变量的值。

2.5. 思考

var name = "李华";

var object = {  
    name : "小明",

    getName : function(){  
        return function(){  
           return this.name;  
       };
    }
};

console.log(object.getName()()); // 李华

var name = "李华";

var object = {  
    name : "小明",
    getName : function(){  
      var that = this;  // 闭包，保存了 this 的引用，因为 this 会变，而 that 在这不会
      return function(){  
        return that.name;  
      };
    }
};

console.log(object.getName()()); // 小明