公司新來的女實習生問我什麼是閉包？

時間 2019-11-10

原文原文鏈接

觀感度：🌟🌟🌟🌟🌟javascript

口味：冰鎮西瓜html

烹飪時間：20min前端

撩妹守則第一條，女孩子都喜歡童話故事。java

那就先來說一個童話故事~程序員

// 有一個公主
// 她生活在一個充滿冒險的奇妙世界裏
// 她碰見了她的白馬王子，帶着她騎着獨角獸環遊世界
// 與龍搏鬥，遇到了會說話的松鼠，以及許多其餘幻想的事情。
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的一則回答，看不懂不要緊，等閱讀完本文後，回頭再來看這個故事，你會發現你已經徹底瞭解了個人魅力，咳咳@¥%#…………JavaScript中閉包的魅力。算法

什麼是閉包？

當函數能夠記住並訪問所在的詞法做用域時，就產生了閉包，即便函數是在當前詞法做用域以外執行。 --- 你不知道的JavaScript(上卷)瀏覽器

來個🌰ruby

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

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

閉包的構成

閉包由兩部分構成：函數，以及建立該函數的環境。閉包

環境由閉包建立時在做用域中的任何局部變量組成。函數

閉包的本質

閉包實際上是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

閉包的應用

咱們能夠用閉包來作什麼呢？

瞭解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)。