JavaScript 中this在不同調(diào)用模式中的差異

wuyangnju 發(fā)布于2019-08-20 10:43 / 1105人閱讀

摘要：的值為以此模式調(diào)用函數(shù)時(shí)，被綁定到全局對(duì)象。在傳統(tǒng)的面向類(lèi)的語(yǔ)言中，構(gòu)造函數(shù)是類(lèi)中的一些特殊方法，使用初始化類(lèi)時(shí)會(huì)調(diào)用類(lèi)中的構(gòu)造函數(shù)。包括內(nèi)置對(duì)象函數(shù)在內(nèi)的所有函數(shù)都可以用來(lái)調(diào)用，這種函數(shù)調(diào)用被稱(chēng)為構(gòu)造函數(shù)調(diào)用。

調(diào)用一個(gè)函數(shù)會(huì)暫停當(dāng)前函數(shù)的執(zhí)行，傳遞控制權(quán)和參數(shù)給新函數(shù)。除了聲明時(shí)定義的形式參數(shù)，每個(gè)函數(shù)還接受兩個(gè)附加參數(shù)： this 和 arguments。參數(shù) this 的值取決于調(diào)用的模式。在JavaScript中一共有4中調(diào)用模式：方法調(diào)用模式、函數(shù)調(diào)用模式、構(gòu)造器調(diào)用模式和 apply 調(diào)用模式。

方法調(diào)用模式(隱式綁定)

當(dāng)一個(gè)函數(shù)被保存為對(duì)象的一個(gè)屬性時(shí)，我們稱(chēng)它為一個(gè)方法。當(dāng)一個(gè)方法被調(diào)用時(shí)，this 被綁定到該對(duì)象。如果調(diào)用表達(dá)式包含一個(gè)提取屬性的動(dòng)作（即包含一個(gè) .點(diǎn)表達(dá)式或[subscript]下標(biāo)表達(dá)式），那么它就是被當(dāng)做一個(gè)方法來(lái)調(diào)用。

// 創(chuàng)建 myObject 對(duì)象，有一個(gè) value 屬性和一個(gè) increment 方法
// increment 方法接受一個(gè)可選的參數(shù)。如果參數(shù)不是數(shù)字，那么默認(rèn)使用數(shù)字1

var myObject = {
    value: 0,
    increment: function (inc){
        this.value += typeof inc === "number" ? inc : 1;
    }
};

myObject.increment();
document.writeln(myObject.value);   // 1

myObject.increment(2);
document.writeln(myObject.value);   // 3

方法可以使用 this 訪問(wèn)自己所屬的對(duì)象，所以它能從對(duì)象中取值貨對(duì)對(duì)象進(jìn)行修改。 this 到對(duì)象的綁定發(fā)生在調(diào)用的時(shí)候。

函數(shù)調(diào)用模式（默認(rèn)綁定）

當(dāng)一個(gè)函數(shù)并非一個(gè)對(duì)象的屬性時(shí)，它就是被當(dāng)做一個(gè)函數(shù)來(lái)調(diào)用的。

var sum = add(3,4);   // sum 的值為7

以此模式調(diào)用函數(shù)時(shí)，this 被綁定到全局對(duì)象。這是語(yǔ)言設(shè)計(jì)上的一個(gè)錯(cuò)誤。若正確，那么當(dāng)內(nèi)部函數(shù)被調(diào)用時(shí)，this 應(yīng)該仍然綁定到外部函數(shù)的 this 變量。這樣設(shè)計(jì)的后果就是方法不能利用內(nèi)部函數(shù)來(lái)幫助它工作，因?yàn)閮?nèi)部函數(shù)的 this 被綁定了錯(cuò)誤的值，不能共享該方法對(duì)對(duì)象的訪問(wèn)權(quán)。

解決方案：如果該方法定義一個(gè)便令并給它賦值為 this，那么內(nèi)部函數(shù)就可以通過(guò)那個(gè)變量訪問(wèn)到 this。按照約定，把那個(gè)變量命名為 that：

// 給 myObject 增加一個(gè) double 方法

myObject.double = function () {
    var that = this;   // 解決方法
    
    var helper = function () {
        that.value = add(that.value, that.value);
    };
    
    helper();   // 以函數(shù)的形式調(diào)用helper
};

// 以方法的形式調(diào)用 double

myObject.double();
document.writeln(myObject.value);   // 6

如果使用嚴(yán)格模式（strict mode），那么全局對(duì)象無(wú)法使用默認(rèn)綁定，this 會(huì)綁定到undefined

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

var a = 2;

foo();   // TypeError: this is undefined

這里有一個(gè)微妙但是非常中亞偶的細(xì)節(jié)，雖然 this 的綁定規(guī)則完全取決于調(diào)用位置，但是只有 foo() 運(yùn)行在非 strict mode 下時(shí)，默認(rèn)綁定才能綁定到全局對(duì)象；嚴(yán)格模式下與 foo() 的調(diào)用位置無(wú)關(guān)：

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

var a = 2;

(function(){
    "use strict";
    
    foo();   // 2
})();

構(gòu)造器調(diào)用模式

如果在一個(gè)函數(shù)前面帶上 new 來(lái)調(diào)用，那么背地里將會(huì)創(chuàng)建一個(gè)連接到該函數(shù)的 prototype 成員的新對(duì)象，同時(shí) this 會(huì)被綁定到那個(gè)新對(duì)象上。

首先，我們來(lái)了解一下構(gòu)造函數(shù)。在傳統(tǒng)的面向類(lèi)的語(yǔ)言中，“構(gòu)造函數(shù)”是類(lèi)中的一些特殊方法，使用 new 初始化類(lèi)時(shí)會(huì)調(diào)用類(lèi)中的構(gòu)造函數(shù)。通常的形式為：

something = new MyClass(..);

JavaScript也有一個(gè) new 操作符，使用方法看起來(lái)和那些面向類(lèi)的語(yǔ)言一樣，但 JavaScript 中的 new 機(jī)制實(shí)際上和面向類(lèi)語(yǔ)言完全不同。
在 JavaScript 中，構(gòu)造函數(shù)只是一些使用 new 操作符時(shí)被調(diào)用的函數(shù)。它們不屬于某個(gè)類(lèi)，也不會(huì)實(shí)例化一個(gè)類(lèi)。實(shí)際上，它們甚至都不能說(shuō)是一種特殊的函數(shù)類(lèi)型，它們只是被 new 操作符調(diào)用的普通函數(shù)而已。包括內(nèi)置對(duì)象函數(shù)在內(nèi)的所有函數(shù)都可以用 new 來(lái)調(diào)用，這種函數(shù)調(diào)用被稱(chēng)為構(gòu)造函數(shù)調(diào)用。實(shí)際上并不存在所謂的構(gòu)造函數(shù)，只有對(duì)于函數(shù)的構(gòu)造調(diào)用。
使用 new 來(lái)調(diào)用函數(shù)，會(huì)自動(dòng)執(zhí)行以下操作：

創(chuàng)建（或者說(shuō)構(gòu)造）一個(gè)全新的對(duì)象。

這個(gè)新對(duì)象會(huì)被執(zhí)行[[原型]]連接

這個(gè)新對(duì)象會(huì)綁定到函數(shù)調(diào)用的 this

如果函數(shù)沒(méi)有返回其他對(duì)象，那么 new 表達(dá)式中的函數(shù)會(huì)自動(dòng)返回這個(gè)新對(duì)象

// 創(chuàng)建一個(gè)名為 Quo 構(gòu)造器函數(shù)。它構(gòu)造一個(gè)帶有 status 屬性的對(duì)象

var Quo = function (string) {
    this.status = string;
};

// 給 Quo 的所有實(shí)例提供一個(gè)名為 get_status 的公共方法

Quo.prototype.get_status = function () {
    return this.status;
};

// 構(gòu)造一個(gè) Quo 實(shí)例

var myQuo = new Quo("confused");
document.writeln(myQuo.get_status());   // confused

Apply 調(diào)用模式

apply 方法讓我們構(gòu)建一個(gè)參數(shù)數(shù)組傳遞給調(diào)用函數(shù)，也允許我們選擇 this 的值。apply 方法接收兩個(gè)參數(shù)，第一個(gè)是要綁定給 this 的值，第二個(gè)就是一個(gè)參數(shù)數(shù)組。

// 構(gòu)造一個(gè)包含兩個(gè)數(shù)字的數(shù)組，并將它們相加

var array = [3,4];
var sum = add.apply(null,array);   // 7

// 構(gòu)造一個(gè)包含 status 成員的對(duì)象

var statusObject = {
    status: "A-OK";
};

// statusObject 并沒(méi)有繼承自 Quo.prototype，但我們可以在 statusObject 上調(diào)用 get_statuse 方法，盡管statusObject 并沒(méi)有一個(gè)名為 get_status 的方法

var status = Quo.prototype.get_status.apply(statusObject);   // A-OK