公司新来的女实习生问我什么是闭包？

发表于 3年以前 | 总阅读数：254 次

撩妹守则第一条，女孩子都喜欢童话故事。

那就先来讲一个童话故事~

// 有一个公主
// 她生活在一个充满冒险的奇妙世界里
// 她遇见了她的白马王子，带着她骑着独角兽环游世界
// 与龙搏斗，遇到了会说话的松鼠，以及许多其他幻想的事情。
function princess () {
    var adventrures = [];
    function princeCharming () {};
    var unicorn = {};
    var dragons = [];
    var squirrel = "Hello!";
    // 但她不得不回到她那充满家务和大人们的单调世界。
    return {
    // 她经常给身边的人讲她作为一个公主的奇妙经历。
      story:function () {
          return adventures[adventures.length - 1];
      }
    }
}
// 但他们看到的只是一个小女孩在讲述关于魔法和幻想的故事
var littleGril = princess();
littleGril.story();
// 即使大人们知道她是真正的公主，他们也不会相信所谓的独角兽或龙，因为他们永远看不到它们
// 大人们说它们只存在于小女孩的想象中
// 但我们知道真正的真理
// 里面的小女孩真的是个公主

这个故事来自于stackoverflow的一则回答

stackoverflow的一则回答

https://stackoverflow.com/questions/111102/how-do-javascript-closures-work/111111#111111

看不懂没关系，等阅读完本文后，回头再来看这个故事，你会发现你已经完全了解了我的魅力，咳咳@¥%#…………JavaScript中闭包的魅力。

1 什么是闭包？

当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。 --- 你不知道的JavaScript(上卷)

来个

function demo() {
    var a = 1;
    return function () {
        return a; 
    }
}

var a = demo();
console.log(a());  // 1

2 闭包的构成

闭包由两部分构成：函数，以及创建该函数的环境。

环境由闭包创建时在作用域中的任何局部变量组成。

3 闭包的本质

闭包其实是JavaScript函数作用域的副作用产品。

闭包是一种特殊的对象。

所谓有意栽花花不开,无心插柳柳成荫，不是JavaScript故意要使用闭包，而是由于JavaScript的函数内部可以使用函数外部的变量，这段代码又刚刚好符合闭包的定义。

在JavaScript中，外部函数调用之后其变量对象本应该被销毁，但闭包阻止了它们的销毁，我们仍然可以访问外部函数的变量对象。

进一步的说，通常情况下，函数的作用域及其所有变量都会在函数执行结束后被销毁。但是，如果创建了一个闭包的话，这个函数的作用域就会一直保存到闭包不存在为止。

function addCalculator (x) {
    return function (y) {
        return x + y;
    }
}

var add1 = addCalculator(1);

console.log(add1(1)); //2

// 释放对闭包的引用
add1 = null;

console.log(add1(1)); //Uncaught TypeError: add1 is not a function

4 闭包的应用

我们可以用闭包来做什么呢？

了解Java的同学可能知道，Java是支持私有方法的，私有方法只能被一个类中的其他方法所调用，但是JavaScript没有提供这种原生支持，所以我们可以通过闭包来模拟私有方法。

私有方法自然有私有方法的好处，私有方法有利于限制对代码的访问，而且可以避免非核心的方法干扰代码的公共接口，减少全局污染。

来个

var calculator = (function(){
    var a = 1;
    function addCalculator(val){
        a += val
    }
    return {
        add1:function() {
            addCalculator(1);
        },
        add2:function() {
            addCalculator(2);
        },
        result:function() {
            return a
        }
    }
})();

console.log(calculator.result());  // 1
calculator.add1();
console.log(calculator.result());  // 2
calculator.add2();
console.log(calculator.result());  // 4

上面这种方式也叫做模块模式(module pattern)。