由ES規范學JavaScript(三)：深入理解this

wthee 發布于2019-08-19 17:23 / 3359人閱讀

摘要：有三個重要組成部分和。參考小結函數中的是由調用函數的方式決定的。構造函數中的當構造函數通過操作符來調用時，表示正在創建的對象。情況沒有明確作用對象的情況下，通常為全局對象例如函數的回調函數，它的就是全局對象。

一. this的來源

this是JavaScript的關鍵字，它最初應該是從Java、C++等面向對象的語言中借鑒來的。

比如，在Java中沒有函數只有方法，this只能用在類的成員方法或構造方法中，表示當前實例對象。所以在Java中this的含義很明確，在其他語言中也類似。

然而到了JavaScript中，this變得復雜了起來：不僅函數內可以用，在所有函數外(全局上下文中)也可以用；函數中的this的含義在函數聲明時無法確定，要到運行期才能確定，而且與調用函數的方式有關；代碼是否是嚴格模式也會影響this的取值。

二. this到底是什么

在ES5.1中，有一個所謂執行上下文(Execution Context，EC)的概念，簡單的說就是JS引擎的執行進入到某塊代碼區域時，為該代碼區域建立的上下文對象，主要用來記錄該區域中聲明的變量、函數等。

EC有三個重要組成部分：VE、LE和ThisBinding。前兩個是詞法環境，暫且不管。第三個 ThisBinding就是指在該代碼區域的this的值。

可見，this是跟某塊代碼區域關聯的。而在JS中，代碼區域有三種：

global代碼

function代碼

eval代碼。

此文中主要討論前兩種。

三. 全局代碼區域中的this

全局代碼區域是所有函數之外的區域。在此區域中的this就是指全局對象window(在Node.js中是global)。

示例：

var num = 123;
console.log(this.num); // 輸出123

參考：http://es5.github.io/#x10.4.1.1

四. 函數代碼區域中的this

函數代碼區域是指某個函數內的代碼，但是不包括它所嵌套的函數內的代碼。從我們可以看出：

this是與包裹它的且離它最近的函數相關的，this既不能穿透到外部的函數，也不能穿透進內部的函數。

示例：

btn.addListener("click", function() {
    var that = this;
    dosth(function() {
        console.log(that.name);
    });
});

通常每個函數中的this是不同的，內部函數可以引用外部函數的局部變量，但是不能直接引用外部函數的this。通過將外部函數的this賦值給一個局部變量可以解決這個問題。

函數內的this的具體函數比較復雜，主要與調用這個函數的方式有關。主要包括以下情況：

1. 直接調用時

示例：

var num = 123;

function fn() {
    console.log(this.num);
}

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

fn(); // 輸出123
fn2(); // 報錯

直接調用函數時，如果是在嚴格模式下，this會被設為undefined；如果是在非嚴格模式下，this會被設為全局對象window。

2. 作為方法調用時

示例：

var student = {
    name: "Tom",
    sayName: function() {
        console.log(this.name);
    };
};

student.sayName(); // 輸出Tom

作為方法調用時，this指方法所屬的對象。

參考：http://es5.github.io/#x10.4.3和 http://es5.github.io/#x11.2.3

3. call和apply方法：調用時指定this

除了上述兩種固定的情況外，Javascript提供了一種可以隨心所欲地根據需要更改函數中this方法。即使用函數對象的call或apply方法來調用函數，顯然這種方式給編程帶來了極大的靈活性。

示例：

function fn() {
    var args = Array. prototype. slice.call(arguments, 1);
    console.log(args);
}

fn(1, 2, 3); // 輸出[2, 3]

這種方法常用的場景就是：把一個對象的方法"借"給另一個具有類似結構的對象使用。

4. bind方法：重新綁定函數的this

與call和apply不同，bind方法是在調用前就把函數內的this綁定了，而且一旦綁定就不能再改變。實際上bind方法返回了一個原函數的新版本。

示例：

function fn() {
    console.log(this.age);
}

var fn2 = fn.bind({age: 18});
fn2() // 輸出18
fn2.call({age: 25}) // 輸出18

通過bind得到的函數，不論用哪種方式調用，它的this都是相同的。

參考：http://es5.github.io/#x15.3.4.5

小結：函數中的this是由調用函數的方式決定的。同一個函數，調用它的方式不同，那么它內部的this就可能不同。換句話說，this是動態決定的。

5. 構造函數中的this

當構造函數通過new操作符來調用時，this表示正在創建的對象。

示例：

function Person(name, age) {
    this.name = name;
    this.age = age;
}

var jerry = new Person("Jerry", 12);

console.log(jerry.age); // 輸出12

正因為這個原因，我們可以在構造函數中通過this給實例添加屬性。

參考：http://es5.github.io/#x11.2.2

6. 回調函數的this

回調函數也只不過是函數的一種，實際上這種情況已經包含在了前面提到的情況中。但是由于回調函數的調用者往往不是我們自己，而是回調函數的接收者，即某個庫或框架、甚至是JS運行時環境。這樣一來，回調函數在中的this是什么就與對方的調用方式有關了，因此變得比較復雜，所以多帶帶拿出來討論一下。

情況1：沒有明確作用對象的情況下，通常this為全局對象

例如setTimeout函數的回調函數，它的this就是全局對象。你如果希望自己指定this，可以通過bind函數等方法。

情況2：某個事件的監聽器回調函數，通常this就是事件源對象

例如：

button.addEventListener("click", fn)

fn的中的this就是事件源button對象。

情況3：某些API會專門提供一個參數，用來指定回調函數中的this

例如，我們可以重新設計一個可以指定this的setTimeout：

function setTimeoutExt(cb, period, thisArg) {
    setTimeout(function() {
        cb.call(thisArg);
    }, period);
}

另外，在ExtJS中也大量使用了可以指定this的接口。

五. eval中的this

(代補充)

六. 重新審視

this，除了面向對象語言中通用的那兩種情況(方法和構造函數)外，在JavaScript 中還提供了更多的使用方式，雖然這讓JS中的this變得相對難以掌握，但是它使得JS更加豐富更加靈活。我們可以把this看成函數的一個特殊的隱含的參數，這個參數代表函數正在操作的主體。

注：時間比較倉促，有些地方沒有太深入，代碼實例也比較簡單。有機會繼續完善。

云服務器 GPU云服務器深入理解javascript 深入理解系列深入理解linux 深入理解webrtc

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

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

由ES規范學JavaScript(二)：深入理解“連等賦值”問題

摘要：有這樣一個熱門問題其實這個問題很好理解，關鍵要弄清下面兩個知識點引擎對賦值表達式的處理過程賦值運算的右結合性一賦值表達式形如的表達式稱為賦值表達式。賦值表達式是右結合的。有這樣一個熱門問題： var a = {n: 1}; var b = a; a.x = a = {n: 2}; alert(a.x); // --> undefined alert(b.x); // --> {n: ...

JasonZhang 2019-08-19 17:18 評論0 收藏0
零基礎的前端開發初學者應如何系統地學習？

摘要：在有了基礎之后，進一步學習內容包括框架。前端學習交流群禁止閑聊，非喜勿進。代碼提交前必須做的三個事情檢查所有變更跑一邊單元測試手動運行一遍所有網站開發開發大致分為前端和后端，前端主要負責實現視覺和交互效果，以及與服務器通信，完成業務邏輯。其核心價值在于對用戶體驗的追求。可以按如下思路學習系統學習：基礎知識： html + css 這部分建議在?w3school 在線教程上學習，邊...

JouyPub 2019-08-01 17:53 評論0 收藏0
零基礎的前端開發初學者應如何系統地學習？

摘要：在有了基礎之后，進一步學習內容包括框架。前端學習交流群禁止閑聊，非喜勿進。代碼提交前必須做的三個事情檢查所有變更跑一邊單元測試手動運行一遍所有網站開發開發大致分為前端和后端，前端主要負責實現視覺和交互效果，以及與服務器通信，完成業務邏輯。其核心價值在于對用戶體驗的追求。可以按如下思路學習系統學習：基礎知識： html + css 這部分建議在?w3school 在線教程上學習，邊...

funnyZhang 2019-08-29 13:42 評論0 收藏0
H5學習

摘要：為此決定自研一個富文本編輯器。本文，主要介紹如何實現富文本編輯器，和解決一些不同瀏覽器和設備之間的。對ES6Generator函數的理解 Generator 函數是 ES6 提供的一種異步編程解決方案，語法行為與傳統函數完全不同。 JavaScript 設計模式 ② 巧用工廠模式和創建者模式我為什么把他們兩個放在一起講？我覺得這兩個設計模式有相似之處，有時候會一個設計模式不能滿...

aristark 2019-08-22 11:21 評論0 收藏0