JavaScript 中this在不同調用模式中的差異

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

摘要：的值為以此模式調用函數(shù)時，被綁定到全局對象。在傳統(tǒng)的面向類的語言中，構造函數(shù)是類中的一些特殊方法，使用初始化類時會調用類中的構造函數(shù)。包括內置對象函數(shù)在內的所有函數(shù)都可以用來調用，這種函數(shù)調用被稱為構造函數(shù)調用。

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

方法調用模式(隱式綁定)

當一個函數(shù)被保存為對象的一個屬性時，我們稱它為一個方法。當一個方法被調用時，this 被綁定到該對象。如果調用表達式包含一個提取屬性的動作（即包含一個 .點表達式或[subscript]下標表達式），那么它就是被當做一個方法來調用。

// 創(chuàng)建 myObject 對象，有一個 value 屬性和一個 increment 方法
// increment 方法接受一個可選的參數(shù)。如果參數(shù)不是數(shù)字，那么默認使用數(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 訪問自己所屬的對象，所以它能從對象中取值貨對對象進行修改。 this 到對象的綁定發(fā)生在調用的時候。

函數(shù)調用模式（默認綁定）

當一個函數(shù)并非一個對象的屬性時，它就是被當做一個函數(shù)來調用的。

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

以此模式調用函數(shù)時，this 被綁定到全局對象。這是語言設計上的一個錯誤。若正確，那么當內部函數(shù)被調用時，this 應該仍然綁定到外部函數(shù)的 this 變量。這樣設計的后果就是方法不能利用內部函數(shù)來幫助它工作，因為內部函數(shù)的 this 被綁定了錯誤的值，不能共享該方法對對象的訪問權。

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

// 給 myObject 增加一個 double 方法

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

// 以方法的形式調用 double

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

如果使用嚴格模式（strict mode），那么全局對象無法使用默認綁定，this 會綁定到undefined

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

var a = 2;

foo();   // TypeError: this is undefined

這里有一個微妙但是非常中亞偶的細節(jié)，雖然 this 的綁定規(guī)則完全取決于調用位置，但是只有 foo() 運行在非 strict mode 下時，默認綁定才能綁定到全局對象；嚴格模式下與 foo() 的調用位置無關：

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

var a = 2;

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

構造器調用模式

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

首先，我們來了解一下構造函數(shù)。在傳統(tǒng)的面向類的語言中，“構造函數(shù)”是類中的一些特殊方法，使用 new 初始化類時會調用類中的構造函數(shù)。通常的形式為：

something = new MyClass(..);

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

創(chuàng)建（或者說構造）一個全新的對象。

這個新對象會被執(zhí)行[[原型]]連接

這個新對象會綁定到函數(shù)調用的 this

如果函數(shù)沒有返回其他對象，那么 new 表達式中的函數(shù)會自動返回這個新對象

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

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

// 給 Quo 的所有實例提供一個名為 get_status 的公共方法

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

// 構造一個 Quo 實例

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

Apply 調用模式

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

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

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

// 構造一個包含 status 成員的對象

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

// statusObject 并沒有繼承自 Quo.prototype，但我們可以在 statusObject 上調用 get_statuse 方法，盡管statusObject 并沒有一個名為 get_status 的方法

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

云服務器 GPU云服務器 javaScript中的this javascript中this詳解調用網(wǎng)頁中的函數(shù) 數(shù)據(jù)在內存中的存儲

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80289.html

JavaScript this 講解

摘要：作為方法進行調用，該上下文是方法的擁有者作為全局函數(shù)調用，其上下文永遠是也就是說，該函數(shù)是的一個方法作為構造器進行調用時，其上下文對象則是新創(chuàng)建的對象實例。精確把握 JavaScript 中的 this this 是 JavaScript 中的一個關鍵字，當一個函數(shù)被調用時，除了傳入函數(shù)的顯式參數(shù)以外，名為 this 的隱式參數(shù)也被傳入了函數(shù)。this 參數(shù)指向了一個自動生成的內部對...

zhangwang 2019-08-19 17:45 評論0 收藏0
功能性組件和Classes有什么不同？

摘要：函數(shù)組件與類有何不同有一段時間，規(guī)范的答案是類可以訪問更多功能如狀態(tài)。那么功能性函數(shù)和類是否又根本的區(qū)別函數(shù)組件捕獲的值。假設功能組件不存在。在我到目前為止看到的所有情況中，由于錯誤地假設功能不會改變或總是相同，所以會出現(xiàn)陳舊的封閉問題。 React函數(shù)組件與React類有何不同？有一段時間，規(guī)范的答案是類可以訪問更多功能（如狀態(tài)）。但是自從有了Hook后，這個答案變得不唯一了。也...

lmxdawn 2019-08-23 15:39 評論0 收藏0
功能性組件和Classes有什么不同？

摘要：函數(shù)組件與類有何不同有一段時間，規(guī)范的答案是類可以訪問更多功能如狀態(tài)。那么功能性函數(shù)和類是否又根本的區(qū)別函數(shù)組件捕獲的值。假設功能組件不存在。在我到目前為止看到的所有情況中，由于錯誤地假設功能不會改變或總是相同，所以會出現(xiàn)陳舊的封閉問題。 React函數(shù)組件與React類有何不同？有一段時間，規(guī)范的答案是類可以訪問更多功能（如狀態(tài)）。但是自從有了Hook后，這個答案變得不唯一了。也...

GitCafe 2019-08-30 15:56 評論0 收藏0
功能性組件和Classes有什么不同？

摘要：函數(shù)組件與類有何不同有一段時間，規(guī)范的答案是類可以訪問更多功能如狀態(tài)。那么功能性函數(shù)和類是否又根本的區(qū)別函數(shù)組件捕獲的值。假設功能組件不存在。在我到目前為止看到的所有情況中，由于錯誤地假設功能不會改變或總是相同，所以會出現(xiàn)陳舊的封閉問題。 React函數(shù)組件與React類有何不同？有一段時間，規(guī)范的答案是類可以訪問更多功能（如狀態(tài)）。但是自從有了Hook后，這個答案變得不唯一了。也...

peixn 2019-08-02 14:25 評論0 收藏0
設計模式——工廠模式

摘要：簡單工廠模式創(chuàng)建單一的對象示例描述工廠模式主要是為了創(chuàng)建對象實例或者類簇抽象工廠關心的是最終產(chǎn)出創(chuàng)建的對象而不關心創(chuàng)建的過程在出現(xiàn)多個類的時候每次創(chuàng)建需要找到對應的類往往比較麻煩這時候通常使用一個函數(shù)進行封裝來創(chuàng)建所需要的對象這樣就無需關注簡單工廠模式(創(chuàng)建單一的對象) 示例1 描述工廠模式主要是為了創(chuàng)建對象實例或者類簇(抽象工廠), 關心的是最終產(chǎn)出(創(chuàng)建)的對象, 而不關心創(chuàng)建...

Moxmi 2019-08-20 10:24 評論0 收藏0