JS的閉包與this詳解

工作中會遇到很多

this對象

指向不明的問題，你可能不止一次用過

_self = this

的寫法來傳遞this對象，它每每會讓我們覺得困惑和抓狂，我們很可能會好奇其中到底發生了什麼。

一個問題

現在先來看一個具體的問題：

var name = 'The Window';
var obj = {
    name: 'My obj',
    getName: function() {
        return this.name;
    }
};

// 猜測下面的輸出和背後的邏輯（非嚴格模式下）
object.getName();
(object.getName)();
(object.getName = object.getName)();

如果上面的三個你都能答對并知道都發生了什麼，那麼你對JS的this了解的比我想象的要多，可以跳過這篇文章了，如果沒答對或者不明白，那麼這篇文章會告訴你并幫你梳理下相關的知識。

它們的答案是：

object.getName();    // 'My Obj'
(object.getName)();    // 'My Obj'
(object.getName = object.getName)();    // 'The Window'

函數的作用域

在函數被調用的時候，會建立一個執行環境及相應的作用域鍊，然後，使用arguments以及其他命名參數的值來初始化函數的活動對象（activation object，簡稱AO）。在作用域上，函數會逐層複制自身調用點的函數屬性，完成作用域鍊的建構，直到全局執行環境。

function compare(value1, value2) {
    return value1 - value2;
}

var result = compare(5, 10);

JS的閉包與this詳解

在這段代碼中，result通過

var

進行了變量聲明提升，compare通過function函數聲明提升，在代碼執行之前我們的全局變量對象中就會有這兩個屬性。

每個執行環境都會有一個變量對象，包含存在的所有變量的對象。全局環境的變量對象始終存在，而像compare函數這樣的局部環境的變量對象，則隻在函數執行的過程中存在。當建立compare()函數時，會建立一個預先包含全局變量對象的作用域鍊，這個作用域鍊儲存在内部的

[[Scope]]

屬性中。

在調用compare函數時，會為它建立一個執行環境，然後複制函數的[[scope]]屬性中的對象建構起執行環境的作用域鍊。此後，又有一個活動對象（變量對象）被建立并被推入執行環境作用域鍊的前端。此時作用域鍊包含兩個變量對象：本地活動對象和全局變量對象。顯然，作用域鍊本質上是一個指向變量對象的指針清單，它隻引用但不包含實際的變量對象。

當通路函數的變量時，就會從作用域鍊中搜尋。當函數執行完畢後，局部活動對象就會被銷毀，記憶體中僅儲存全局作用域。

閉包

但是，閉包的情況有所不同，在一個函數内部定義的函數會将外部函數的活動對象添加到它的作用域鍊中去。

function create(property) {
    return function(object1, object2) {
        console.log(object1[property], object2[property]);
    };
}

var compare = create('name');
var result = compare({name: 'Nicholas'}, {name: 'Greg'}); // Nicholas Greg

// 删除對匿名函數的引用，以便釋放記憶體
compare = null;

在匿名函數從create()中被傳回後，它的作用域鍊被初始化為包含create()函數的活動對象和全局變量對象。這樣，該匿名函數就可以通路create中定義的所有周遊，更為重要的是當create()函數執行完畢後，其作用域鍊被銷毀，但是活動對象不會銷毀，因為依然被匿名函數引用。當匿名函數别compare()被銷毀後，create()的活動對象才會被銷毀。

JS的閉包與this詳解

閉包與變量

我們要注意到，閉包隻能取到任意變量的最後值，也就是我們儲存的是活動對象，而不是确定值。

function create() {
    var result = [];
    for (var i = 0; i < 10; i++) {
        result[i] = function() {
            return i;
        };
    }
    return result;
}

create()[3](); // 10

我們通過閉包，讓每一個result的元素都能夠傳回i的值，但是閉包包含的是同一個活動對象i，而不是固定的1-10的值，是以傳回的都是10。但我們可以通過值傳遞的方式建立另外一個匿名函數來滿足我們的需求。

function create() {
    var result = [];
    for (var i = 0; i < 10; i++) {
        // 通過值傳遞的方式固定i值
        result[i] = function(num) {
            // 這裡閉包固定後的i值，即num值，來滿足我們的需求
            return function() {
                return num;
            };
        }(i);
    }
    return result;
}

create()[3](); // 3

閉包與this

我們知道this對象是基于函數的執行環境綁定的，在全局的時候，this等于window，而當函數作為某個對象的方法調用時，this等于那個對象。不過，匿名函數的執行環境具有全局性，是以this常常指向window。

var name = 'The Window';
var obj = {
    name: 'My obj',
    getName: function() {
        return function() {
            return this.name;
        };
    }
};

obj.getName()(); // 'The Window'

前面說過，函數在被調用時會自動取得兩個特殊變量：

this和arguments

，内部函數在搜尋這兩個變量時，隻會搜尋到其活動對象，是以永遠不會通路到外部函數的這兩個變量。如果我們想滿足需求，可以固定this對象并更名即可。

var name = 'The Window';
var obj = {
    name: 'My obj',
    getName: function() {
        // 固定this對象，形成閉包，防止跟特殊的this重名
        var that = this;
        return function() {
            return that.name;
        };
    }
};

obj.getName()(); // 'My obj'

this的綁定

上面對this的說明可以說是非常的淺薄了，現在我們詳細的整理下

this

關鍵字，它是函數作用域的特殊關鍵字，進入函數執行環境時會被自動定義，實作原理相當于自動傳遞調用點的對象：

var obj = {
    name: 'Nicholas',
    speak() {
        return this.name;
    },
    anotherSpeak(context) {
        console.log(context.name, context === this);
    }
};

obj.name;    //'Nicholas'
obj.speak();    // 'Nicholas'
obj.anotherSpeak(obj);    // 'Nicholas' true

可以看到，我們在anotherSpeak()中傳遞的context就是obj，也就是函數調用時，執行環境的this值。引擎的這種實作簡化了我們的工作，自動傳遞調用點的環境對象作為this對象。

我們要注意的是this隻跟調用點有關，而跟聲明點無關。這裡你需要知道調用棧，也就是使我們到達目前執行位置而被調用的所有方法的棧，即所有嵌套的函數棧。

function baz() {
    // 調用棧是: `baz`
    // 我們的調用點是global scope（全局作用域）

    console.log( "baz" );
    bar(); // <-- `bar`的調用點
}

function bar() {
    // 調用棧是: `baz` -> `bar`
    // 我們的調用點位于`baz`

    console.log( "bar" );
    foo(); // <-- `foo`的調用點
}

function foo() {
    // 調用棧是: `baz` -> `bar` -> `foo`
    // 我們的調用點位于`bar`

    console.log( "foo" );
}

baz(); // <-- `baz`的調用點

我們整理了四種this對象綁定的規則：

預設綁定

function foo() {
    console.log( this.a, this === window );
}
var a = 2;

window.a;    // 2
foo();    // 2 true

在這種規則下，函數調用為獨立的毫無修飾的函數引用調用的，此時foo的調用環境就是全局環境window，是以this就指向window，而在全局下聲明的所有對象都屬于window，導緻結果為2。

但是在嚴格模式下，this不會被預設綁定到全局對象。MDN文檔上寫到：

第一，在嚴格模式下通過this傳遞給一個函數的值不會被強制轉換為一個對象。對一個普通的函數來說，this總會是一個對象：不管調用時this它本來就是一個對象；還是用布爾值，字元串或者數字調用函數時函數裡面被封裝成對象的this；還是使用undefined或者null調用函數式this代表的全局對象（使用call, apply或者bind方法來指定一個确定的this）。這種自動轉化為對象的過程不僅是一種性能上的損耗，同時在浏覽器中暴露出全局對象也會成為安全隐患，因為全局對象提供了通路那些所謂安全的JavaScript環境必須限制的功能的途徑。是以對于一個開啟嚴格模式的函數，指定的this不再被封裝為對象，而且如果沒有指定this的話它值是undefined。

function foo() {
    "use strict";
    console.log( this );
}

foo();    // undefined

關于嚴格模式還需要注意的是，它的作用範圍隻有目前的函數或者

<script>

标簽内部，而不包括嵌套的函數體：

function foo() {
    console.log( this.a );
}

var a = 2;

(function(){
    "use strict";

    foo(); // 2
})();

隐含綁定

function foo() {
    console.log( this.a );
}
var obj = {
    a: 2,
    foo: foo
};

obj.foo(); // 2

在這個函數調用時，其調用點為環境對象obj，是以函數執行時，this指向obj。

需要注意多重嵌套的函數引用，在調用時隻考慮最後一層：

function foo() {
    console.log( this.a );
}
var obj2 = {
    a: 42,
    foo: foo
};
var obj1 = {
    a: 2,
    obj2: obj2
};

obj1.obj2.foo(); // 42

如果函數并不直接執行，而是先引用後執行，那麼我們應該明白，該變量獲得的是另一個指向該函數對象的指針，而脫離了引用的環境，是以自然失去了this的綁定，這被稱為隐含綁定的丢失：

function foo() {
    console.log( this.a );
}
var obj = {
    a: 2,
    foo: foo
};
// 函數引用！其實得到的是另一個指向該函數的指針，脫離了obj環境
var bar = obj.foo;

var a = "oops, global";

bar(); // "oops, global"

明确綁定

我們除了上面的兩種預設綁定方式，還可以對其進行明确的綁定，主要通過函數内置的

call/apply/bind

方法，通過它們可以指定你想要的this對象是什麼：

function foo() {
    console.log( this.a );
}

var obj = {
    a: 2
};

foo.call( obj ); // 2

我們給foo的調用指定了obj作為它的this對象，是以this.a即obj.a，結果為2。

call/apply方法需要傳遞一個對象，如果你傳遞的為簡單原始類型值null,undefined，則this會指向全局對象。如果傳遞的為基本包裝對象，則this會指向他們的自動包裝對象，即

new String(), new Boolean(), new Number()

，這個過程稱為封箱（boxing）。

這裡我們應該清楚

call/apply

方法都隻在最後一層嵌套生效，是以我們稱呼它為明确綁定：

function foo() {
    console.log( this.a );
}

var obj = {
    a: 2
};

var bar = function() {
    foo.call( obj );
};

// `bar`将`foo`的`this`硬綁定到`obj`, 是以它不可以被覆寫
bar.call( window ); // 2

但如果我們想複用并傳回一個新函數，并固定this值時，可以這樣做：

function foo(something) {
    console.log( this.a, something );
    return this.a + something;
}

// 簡單的`bind`幫助函數
function bind(fn, obj) {
    return function() {
        return fn.apply( obj, arguments );
    };
}

var obj = {
    a: 2
};

var bar = bind( foo, obj );

var b = bar( 3 ); // 2 3
console.log( b ); // 5

這種方式被稱為硬綁定，也是明确綁定的一種，這個函數在被建立時就已經明确的聲明了作用域，也就是該對象被放置在了

[[Scope]]

屬性裡。這種方式有時很常用，是以被内置在ES5後的版本裡，其内部實作（Polyfill低版本更新檔）為：

if (!Function.prototype.bind) {
    Function.prototype.bind = function(oThis) {
        if (typeof this !== "function") {
            // 可能的與 ECMAScript 5 内部的 IsCallable 函數最接近的東西
            throw new TypeError( "Function.prototype.bind - what " +
                "is trying to be bound is not callable"
            );
        }

        var aArgs = Array.prototype.slice.call( arguments, 1 ),
            fToBind = this,
            fNOP = function(){},
            fBound = function(){
                return fToBind.apply(
                    (
                        this instanceof fNOP &&
                        oThis ? this : oThis
                    ),
                    aArgs.concat( Array.prototype.slice.call( arguments ) )
                );
            }
        ;

        fNOP.prototype = this.prototype;
        fBound.prototype = new fNOP();

        return fBound;
    };
}

在ES6裡，bind（）生成的硬綁定函數擁有一個name屬性，源自于目标函數，此時顯示為

bound foo

。

在一些語言内置的函數裡，提供了可選參數作為函數執行時的this對象，這些函數的内部實作方式和bind()類似，也是通過apply/call來明确綁定了你傳遞的參數作為this對象，如：

var obj = {
    name: 'Nicholas'
};
[1,2,3].forEach(function(item) {
    console.log(item, this.name);
}, obj);
// 1 "Nicholas"
// 2 "Nicholas"
// 3 "Nicholas"

new綁定

new

操作符會調用對象的構造器函數來初始化類成為一個執行個體。它的執行過程為：

一個全新的對象被憑空建立
這個新構造的對象被接入原型鍊（__proto__指向該構造函數的prototype）
這個新構造的對象被綁定為函數調用的this對象
除非函數傳回一個其它對象，這個被new調用的函數将傳回這個新建構的對象。

實質上加new關鍵字和()隻不過是該函數的不同調用方式而已，前者為構造器調用，後者為執行調用，在調用過程中，this指向不同，傳回值不同。

在new綁定的規則中，this指向新建立的對象。

箭頭函數綁定

現在我們看一個十分特别的this綁定，ES6中加入的箭頭函數，前面的四種都是函數執行時通過調用點确認this對象，而箭頭函數是在詞法作用域确定this對象，即在詞法解析到該箭頭時為該函數綁定this對象為目前對象：

function foo() {
    setTimeout(() => {
        // 這裡的`this`是詞法上從`foo()`采用
        console.log( this.a );
    },100);
}

var obj = {
    a: 2
};

foo.call( obj ); // 2

綁定的優先級

通過一些具體的執行個體對比，我們可以得出不同綁定方式的優先級：

new綁定 > 明确綁定 > 隐含綁定 > 預設綁定

。

箭頭函數屬于詞法作用域綁定，是以其優先級更高，但是跟上面的不沖突。

最初的問題

現在我們再來看下最初的問題：

var name = 'The Window';
var obj = {
    name: 'My obj',
    getName: function() {
        return this.name;
    }
};

// 猜測下面的輸出和背後的邏輯（非嚴格模式下）
obj.getName();    // 'My obj'
(obj.getName)();    // 'My obj'
(obj.getName = obj.getName)();    // 'The Window'

我們可以看出第一個直接綁定this對象為obj，第二個加上括号好像是引用了一個函數，但

object.getName

與

(object.getName)

定義一緻，是以this依然指向obj；第三個指派語句會傳回函數本身，是以作為匿名函數來執行，就會傳回'The Window'。

參考資料

簡書 - this與對象原型： http://www.jianshu.com/p/11d8...
MDN - bind: https://developer.mozilla.org...
Github - 深入變量對象：https://github.com/mqyqingfen...
JS進階程式設計：第五章（引用類型），第七章（函數表達式）

JS的閉包與this詳解

一個問題

函數的作用域

閉包

閉包與變量

閉包與this

this的綁定

預設綁定

隐含綁定

明确綁定

new綁定

箭頭函數綁定

綁定的優先級

最初的問題

參考資料

繼續閱讀

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條