摘要：閉包閉包的概念與詞法域關(guān)系緊密。閉包甚至在函數(shù)已經(jīng)返回后也可以獲取其外部函數(shù)的變量。一種常見的閉包導(dǎo)致的由立即調(diào)用函數(shù)表達(dá)式解決的例子事實(shí)上結(jié)果的所有都是，而不是按順序得出的，。

JavaScript 有一個(gè)特征————作用域。理解作用域scope可以使你的代碼脫穎而出，減少錯(cuò)誤，幫助你用它構(gòu)造強(qiáng)大的設(shè)計(jì)模式。

作用域就是在代碼執(zhí)行期間變量，函數(shù)和對象能被獲取到的特定的代碼范圍。換句話說，作用域決定了變量和其他資源在你的代碼區(qū)域中的可見性。

那么，限制變量的可見性不讓其在代碼中處處可見的意義是什么？優(yōu)勢之一 是作用域使你的代碼具備一定的安全性。一個(gè)通用的計(jì)算機(jī)安全性原則就是讓用戶每次只訪問他們需要的東西。

想想計(jì)算機(jī)管理員：他們需要控制很多公司系統(tǒng)的東西，給他們完全的用戶權(quán)限似乎是可以理解的。假設(shè)一個(gè)公司有三個(gè)系統(tǒng)管理員，他們都有系統(tǒng)的所有權(quán)限，一切進(jìn)展順利。但是突然厄運(yùn)降臨，其中一人的系統(tǒng)被可惡的病毒感染了，而現(xiàn)在不知道是誰哪里出錯(cuò)了。現(xiàn)在意識(shí)到應(yīng)該給他們基本權(quán)限的用戶賬戶只在他們需要的時(shí)候授予他們完全的權(quán)限。這會(huì)幫助你追蹤變動(dòng)并一直知曉哪個(gè)賬戶做了什么。這就叫做最小存取原則。好像很直觀吧，這個(gè)原則也用于程序語言設(shè)計(jì)，在包括JS在內(nèi)的編程語言中它叫做作用域。

當(dāng)你享受編程之旅時(shí)，你會(huì)意識(shí)到你的代碼的作用域部分幫助你提升效率，追蹤bug并減少bug。作用域同時(shí)解決了你在編程時(shí)不同作用域內(nèi)的同名變量的問題。不要把環(huán)境/上下文與作用域搞混,他們是不同的。

JavaScript有兩種類型的作用域:

全局作用域

局部作用域

定義在函數(shù)內(nèi)部的變量在本地范圍內(nèi)，而定義在函數(shù)外部的變量的作用域是全局。每個(gè)函數(shù)的觸發(fā)調(diào)用都會(huì)創(chuàng)建一個(gè)新的作用域。

當(dāng)你開始寫JS的時(shí)候，你就已經(jīng)處在全局范圍內(nèi)了，一個(gè)變量若不在函數(shù)內(nèi)，便是全局變量。

// the scope is by default global
var name = "Hammad";

全局范圍內(nèi)的變量可以在其他范圍內(nèi)獲取或修改。

var name = "Hammad";

console.log(name); // logs "Hammad"

function logName() {
    console.log(name); // "name" is accessible here and everywhere else
}

logName(); // logs "Hammad"

定義在函數(shù)內(nèi)的變量就在局部作用域。
每次調(diào)用那個(gè)函數(shù)他們都有不同的作用域，也就是說同名變量可以在不同的函數(shù)內(nèi)使用。因?yàn)檫@些變量與他們各自的函數(shù)綁定，各自有不同的作用域，無法在其他函數(shù)內(nèi)獲取。

// Global Scope
function someFunction() {
    // Local Scope #1
    function someOtherFunction() {
        // Local Scope #2
    }
}

// Global Scope
function anotherFunction() {
    // Local Scope #3
}
// Global Scope

像if和switch這種條件語句或for和while這種循環(huán)語句————非函數(shù)的塊語句，不會(huì)創(chuàng)造新的作用域。定義在塊語句內(nèi)的變量將保持他們當(dāng)前的作用域。

if (true) {
    // this "if" conditional block doesn"t create a new scope
    var name = "Hammad"; // name is still in the global scope
}

console.log(name); // logs "Hammad"

ECMAScript 6引入了let和const關(guān)鍵字，可以用于替換var。相比var，后者支持塊作用域的聲明。

if (true) {
    // this "if" conditional block doesn"t create a scope

    // name is in the global scope because of the "var" keyword
    var name = "Hammad";
    // likes is in the local scope because of the "let" keyword
    let likes = "Coding";
    // skills is in the local scope because of the "const" keyword
    const skills = "JavaScript and PHP";
}

console.log(name); // logs "Hammad"
console.log(likes); // Uncaught ReferenceError: likes is not defined
console.log(skills); // Uncaught ReferenceError: skills is not defined

只要你的應(yīng)用激活了，全局作用域也就激活了。局部作用域則隨著你的函數(shù)的調(diào)用和執(zhí)行而激活。

許多開發(fā)者經(jīng)常把作用域和上下文弄混淆，好像它們是相同的概念。非也。作用域就是我們以上討論的，而上下文是指你得代碼特定區(qū)域內(nèi)this的值。作用域指變量的可見性，上下文指同一范圍下this的值。我們可以用函數(shù)方法改變上下文，這個(gè)稍后討論。在全局范圍內(nèi)，上下文總是window對象。

// logs: Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage…}
console.log(this);

function logFunction() {
    console.log(this);
}
// logs: Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage…}
// because logFunction() is not a property of an object
logFunction(); 

如果作用域是一個(gè)對象的方法，上下文就是方法所屬的對象。

class User {
    logName() {
        console.log(this);
    }
}

(new User).logName(); // logs User {}

(new User).logName() 是一個(gè)在變量中存儲(chǔ)對象并調(diào)用logName的快捷的方法。這里你不需要?jiǎng)?chuàng)建一個(gè)新變量。
你可能會(huì)注意到一件事情：如果你用new關(guān)鍵字調(diào)用函數(shù)，上下文的值會(huì)改變?yōu)樗{(diào)用的函數(shù)的實(shí)例。例如：

function logFunction() {
    console.log(this);
}

new logFunction(); // logs logFunction {}

嚴(yán)格模式下上下文默認(rèn)為undefined。

將"use strict"放在腳本文件的第一行，則整個(gè)腳本都將以"嚴(yán)格模式"運(yùn)行。如果這行語句不在第一行，則無效，整個(gè)腳本以"正常模式"運(yùn)行。
如果不同模式的代碼文件合并成一個(gè)文件，這一點(diǎn)需要特別注意。(嚴(yán)格地說，只要前面不是產(chǎn)生實(shí)際運(yùn)行結(jié)果的語句，"use strict"可以不在第一行，比如直接跟在一個(gè)空的分號(hào)后面。)將"use strict"放在函數(shù)體的第一行，則整個(gè)函數(shù)以"嚴(yán)格模式"運(yùn)行。
對于腳本，最好將整個(gè)腳本文件放在一個(gè)立即執(zhí)行的匿名函數(shù)之中。

為了徹底弄清楚以上困惑，在執(zhí)行上下文中的上下文指的是作用域而不是上下文。這是個(gè)奇怪的命名慣例但是因?yàn)镴avaScript已經(jīng)明確了它，我們只需記住即可。
JavaScript是一個(gè)單線程語言所以他一次只能執(zhí)行一個(gè)任務(wù)。剩下的任務(wù)在執(zhí)行上下文中以隊(duì)列形式存在。正如我之前所說，當(dāng)JavaScript編譯器開始執(zhí)行代碼時(shí)，上下文（作用域）就被默認(rèn)設(shè)置為全局的了。這個(gè)全局的上下文會(huì)添加在執(zhí)行上下文中，它實(shí)際上是啟動(dòng)執(zhí)行上下文的第一個(gè)上下文。
隨后，
每個(gè)函數(shù)請求會(huì)添加它的上下文到執(zhí)行上下文。當(dāng)函數(shù)內(nèi)的另一個(gè)函數(shù)或其他地方的函數(shù)調(diào)用時(shí)也一樣。

每個(gè)函數(shù)都會(huì)創(chuàng)建自己的執(zhí)行上下文。
一旦瀏覽器執(zhí)行完上下文的代碼，上下文會(huì)從執(zhí)行上下文中彈出， 在執(zhí)行上下文中的當(dāng)前上下文的狀態(tài)會(huì)被傳遞給父級(jí)上下文。瀏覽器總會(huì)執(zhí)行在任務(wù)棧最頂端的執(zhí)行上下文（也就是你代碼中最內(nèi)部的作用域）。
只能有一個(gè)全局上下文但函數(shù)上下文可以有多個(gè)。

執(zhí)行上下文有兩個(gè)階段：創(chuàng)建 和 執(zhí)行。

第一個(gè)階段是創(chuàng)建階段，是指函數(shù)被調(diào)用還沒有被執(zhí)行的時(shí)期，在創(chuàng)建階段會(huì)做三件事情：

創(chuàng)建變量對象

創(chuàng)建作用域鏈

設(shè)置上下文的值（this）

第二個(gè)階段是代碼執(zhí)行階段，這個(gè)階段將為變量賦值，最終執(zhí)行代碼。

詞法域是指在一組函數(shù)中，內(nèi)部函數(shù)可以獲取到他的父級(jí)作用域內(nèi)的變量和其他資源。這意味這子函數(shù)在詞法上綁定了父級(jí)的執(zhí)行上下文。詞法域有時(shí)也指靜態(tài)域。

function grandfather() {
    var name = "Hammad";
    // likes is not accessible here
    function parent() {
        // name is accessible here
        // likes is not accessible here
        function child() {
            // Innermost level of the scope chain
            // name is also accessible here
            var likes = "Coding";
        }
    }
}

您將注意到詞法域提前工作，意思是可以通過它的孩子的執(zhí)行上下文訪問name。但它在其父級(jí)無效，意味著likes不能被父級(jí)訪問獲取。也就是說，同名變量內(nèi)部函數(shù)的優(yōu)先權(quán)高于外層函數(shù)。

閉包的概念與詞法域關(guān)系緊密。當(dāng)一個(gè)內(nèi)部函數(shù)試圖訪問外部函數(shù)的作用域鏈即其詞法域外的變量值時(shí)，閉包就會(huì)被創(chuàng)建了。閉包包含他們自己的的作用域鏈，他們父級(jí)作用域鏈以及全局的作用域。閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)，由于在Javascript語言中，只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量，因此可以把閉包簡單理解成"定義在一個(gè)函數(shù)內(nèi)部的函數(shù)"。

閉包不僅可以獲取函數(shù)內(nèi)部的變量，也可以獲取其外部函數(shù)的參數(shù)資源。

　var name = "The Window";

　　var object = {
　　　　name : "My Object",

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

　　　　}

　　};

　　alert(object.getNameFunc()());   // =>The Window
　var name = "The Window";

　　var object = {
　　　　name : "My Object",

　　　　getNameFunc : function(){
　　　　　　var that = this;
　　　　　　return function(){
　　　　　　　　return that.name;
　　　　　　};

　　　　}

　　};

　　alert(object.getNameFunc()());  // My Object

閉包甚至在函數(shù)已經(jīng)返回后也可以獲取其外部函數(shù)的變量。這允許返回函數(shù)一直可以獲取其外部函數(shù)的所有資源。

當(dāng)一個(gè)函數(shù)返回一個(gè)內(nèi)部函數(shù)時(shí)，即使你調(diào)用外部函數(shù)時(shí)返回函數(shù)并不會(huì)被請求執(zhí)行。你必須用一個(gè)獨(dú)立的變量保存外部函數(shù)的調(diào)用請求，然后以函數(shù)形式調(diào)用該變量：

function greet() {
    name = "Hammad";
    return function () {    //這個(gè)函數(shù)就是閉包
        console.log("Hi " + name);
    }
}

greet(); // nothing happens, no errors

// the returned function from greet() gets saved in greetLetter
greetLetter = greet();

 // calling greetLetter calls the returned function from the greet() function
greetLetter(); // logs "Hi Hammad"

同樣可以用()()替換變量分配執(zhí)行的過程。

function greet() {
    name = "Hammad";
    return function () {
        console.log("Hi " + name);
    }
}

greet()(); // logs "Hi Hammad"

閉包最大用處有兩個(gè)，一個(gè)是前面提到的可以讀取函數(shù)內(nèi)部的變量，另一個(gè)就是讓這些變量的值始終保持在內(nèi)存中

在許多其他編程語言中，你可以用 public, private and protected設(shè)置屬性和類的方法的可見性。JavaScript中沒有類似的公共域和私有域的機(jī)制。但是我們可以用閉包模擬這種機(jī)制，為了將所有資源與全局域獨(dú)立開來，應(yīng)該這樣封裝函數(shù)：

(function () {
  // private scope
})();

()在函數(shù)最后是告訴編譯器直接在讀到該函數(shù)時(shí)不用等到函數(shù)調(diào)用就執(zhí)行它，我們可以在里面添加函數(shù)和變量而不用擔(dān)心他們被外部獲取到。但是如果我們想讓外部獲取它們即想暴露部分變量或函數(shù)供外部修改獲取怎么辦？模塊模式————閉包的一種，支持我們在一個(gè)對象內(nèi)利用公共域和私有域訪問審視我們的函數(shù)。

模塊模式：

var Module = (function() {
    function privateMethod() {
        // do something
    }

    return {
        publicMethod: function() {
            // can call privateMethod();
        }
    };
})();

模塊的返回語句包含了我們的公共函數(shù)。那些沒有返回的便是私有函數(shù)。沒有返回函數(shù)使得它們在模塊命名空間外無法被存取。但是公共函數(shù)可以存取方便我們的輔助函數(shù)，ajax請求以及其他需要的函數(shù)。

Module.publicMethod(); // works
Module.privateMethod(); // Uncaught ReferenceError: privateMethod is not defined

一個(gè)慣例是私有函數(shù)的命名一般以__開頭并返回一個(gè)包含公共函數(shù)的匿名對象。

var Module = (function () {
    function _privateMethod() {
        // do something
    }
    function publicMethod() {
        // do something
    }
    return {
        publicMethod: publicMethod,
    }
})();

另一種形式的閉包叫立即調(diào)用的函數(shù)表達(dá)式，這是一個(gè)在window上下文中自我觸發(fā)的匿名函數(shù)，意思就是this的值是window。它可以暴露一個(gè)可交互的全局接口。

    (function(window) {
        // do anything
    })(this);

一種常見的閉包導(dǎo)致的bug由立即調(diào)用函數(shù)表達(dá)式解決的例子：

// This example is explained in detail below (just after this code box).?
?function celebrityIDCreator (theCelebrities) {
    var i;
    var uniqueID = 100;
    for (i = 0; i < theCelebrities.length; i++) {
      theCelebrities[i]["id"] = function ()  {
        return uniqueID + i;
      }
    }
    
    return theCelebrities;
}
?
?var actionCelebs = [{name:"Stallone", id:0}, {name:"Cruise", id:0}, {name:"Willis", id:0}];
?
?var createIdForActionCelebs = celebrityIDCreator (actionCelebs);
?
?var stalloneID = createIdForActionCelebs [0];??console.log(stalloneID.id()); // 103

事實(shí)上結(jié)果的所有id都是103，而不是按順序得出的101，102,103...。
因?yàn)閒or循環(huán)中的匿名函數(shù)得到是外部函數(shù)變量的引用而非變量實(shí)際值，而i的值最終結(jié)果為3，故所有id103，這樣修改可以得到預(yù)想效果：

function celebrityIDCreator (theCelebrities) {
    var i;
    var uniqueID = 100;
    for (i = 0; i < theCelebrities.length; i++) {
        theCelebrities[i]["id"] = function (j)  { // the j parametric variable is the i passed in on invocation of this IIFE?
            return function () {
                return uniqueID + j; // each iteration of the for loop passes the current value of i into this IIFE and it saves the correct value to the array?
            } () // BY adding () at the end of this function, we are executing it immediately and returning just the value of uniqueID + j, instead of returning a function.?
        } (i); // immediately invoke the function passing the i variable as a parameter?
    }
?
    return theCelebrities;
}
?
?var actionCelebs = [{name:"Stallone", id:0}, {name:"Cruise", id:0}, {name:"Willis", id:0}];
?
?var createIdForActionCelebs = celebrityIDCreator (actionCelebs);
?
?var stalloneID = createIdForActionCelebs [0];
?console.log(stalloneID.id); // 100?
?
?var cruiseID = createIdForActionCelebs [1];?console.log(cruiseID.id); // 101

Call 和 Apply 函數(shù) 在調(diào)用函數(shù)時(shí)可以用來改變上下文。這賦予了你難以置信的編程能力。為了使用兩個(gè)函數(shù)，你需要在函數(shù)上調(diào)用它而非用()觸發(fā)，并將上下文作為第一個(gè)參數(shù)傳遞。函數(shù)本身的參數(shù)可在上下文后傳遞。

function hello() {
    // do something...
}

hello(); // the way you usually call it
hello.call(context); // here you can pass the context(value of this) as the first argument
hello.apply(context); // here you can pass the context(value of this) as the first argument

.call() 和 .apply()的不同之處在于，在傳遞剩余參數(shù)時(shí)，.call()將剩余參數(shù)以,隔開，而.appley()會(huì)將這些參數(shù)包含在一個(gè)數(shù)組里傳遞。

function introduce(name, interest) {
    console.log("Hi! I"m "+ name +" and I like "+ interest +".");
    console.log("The value of this is "+ this +".")
}

introduce("Hammad", "Coding"); // the way you usually call it
introduce.call(window, "Batman", "to save Gotham"); // pass the arguments one by one after the contextt
introduce.apply("Hi", ["Bruce Wayne", "businesses"]); // pass the arguments in an array after the context

// Output:
// Hi! I"m Hammad and I like Coding.
// The value of this is [object Window].
// Hi! I"m Batman and I like to save Gotham.
// The value of this is [object Window].
// Hi! I"m Bruce Wayne and I like businesses.
// The value of this is Hi.

在效果上，call的速度要略快于apply

下面展示了文檔內(nèi)的一組列表并在命令行打印它們：

    
    


    
Things to Learn to Rule the World
    

        
Learn PHP
        
Learn Laravel
        
Learn JavaScript
        
Learn VueJS
        
Learn CLI
        
Learn Git
        
Learn Astral Projection
    
    

這里我想起來以前看到過的.caller()和.callee():


.caller()是指調(diào)用函數(shù)的函數(shù)體，返回函數(shù)體，類似于toString()

.callee()是Arguments的一個(gè)成員，表示對函數(shù)對象本身的引用，常用屬性是length，arguments.length是指實(shí)參長度，callee.length形參長度。

具體可參考這里

對象可以有方法，同樣函數(shù)對象也可以有方法。事實(shí)上，一個(gè)JavaScript函數(shù)生來就有四種內(nèi)置函數(shù)：

Function.prototype.apply()

Function.prototype.bind() (Introduced in ECMAScript 5 (ES5))

Function.prototype.call()

Function.prototype.toString() 將函數(shù)字符串化

.prototype => .__proto__

不同于Call和Apply，Bind本身不調(diào)用函數(shù)，只用來在調(diào)用函數(shù)前綁定上下文的值和其他參數(shù)，例如：

(function introduce(name, interest) {
    console.log("Hi! I"m "+ name +" and I like "+ interest +".");
    console.log("The value of this is "+ this +".")
}).bind(window, "Hammad", "Cosmology")();

// logs:
// Hi! I"m Hammad and I like Cosmology.
// The value of this is [object Window].

Bind就像Call函數(shù)，在傳遞剩余的參數(shù)時(shí)以,隔開而不像Apply傳遞一個(gè)數(shù)組，它返回的是一個(gè)新函數(shù)。

var person1 = {firstName: "Jon", lastName: "Kuperman"};
var person2 = {firstName: "Kelly", lastName: "King"};

function say() {
    console.log("Hello " + this.firstName + " " + this.lastName);
}

var sayHelloJon = say.bind(person1);
var sayHelloKelly = say.bind(person2);

sayHelloJon(); // Hello Jon Kuperman
sayHelloKelly(); // Hello Kelly King