換個思路理解Javascript中的this

ninefive 發布于2019-08-20 18:17 / 2056人閱讀

摘要：事件處理函數中的把函數綁定到事件時，可以當作在上增加一個函數方法，當觸發這個事件時調用上對應的事件方法。總結在需要判斷的指向時，我們可以安裝這種思路來理解判斷在全局中函數中，若在全局中則指向全局，若在函數中則只關注這個函數并繼續判斷。

在網上很多文章都對 Javascript 中的 this 做了詳細的介紹，但大多是介紹各個綁定方式或調用方式下 this 的指向，于是我想有一個統一的思路來更好理解 this 指向，使大家更好判斷，以下有部分內容不是原理，而是一種解題思路。

從call方法開始

call 方法允許切換函數執行的上下文環境（context），即 this 綁定的對象。

大多數介紹 this 的文章中都會把 call 方法放到最后介紹，但此文我們要把 call 方法放在第一位介紹，并從 call 方法切入來研究 this ，因為 call 函數是顯式綁定 this 的指向，我們來看看它如何模擬實現（不考慮傳入 null 、 undefined 和原始值）：

Function.prototype.call = function(thisArg) {
    var context = thisArg;
    var arr = [];
    var result;

    context.fn = this;

    for (let i = 1, len = arguments.length; i < len; i++) {
        arr.push("arguments[" + i + "]");
    }

    result = eval("context.fn(" + arr + ")");

    delete context.fn;

    return result;
}

從以上代碼我們可以看到，把調用 call 方法的函數作為第一個參數對象的方法，此時相當于把第一個參數對象作為函數執行的上下文環境，而 this 是指向函數執行的上下文環境的，因此 this 就指向了第一個參數對象，實現了 call 方法切換函數執行上下文環境的功能。

對象方法中的this

在模擬 call 方法的時候，我們使用了對象方法來改變 this 的指向。調用對象中的方法時，會把對象作為方法的上下文環境來調用。

既然 this 是指向執行函數的上下文環境的，那我們先來研究一下調用函數時的執行上下文情況。

下面我門來看看調用對象方法時執行上下文是如何的：

var foo = {
    x : 1,
    getX: function(){
        console.log(this.x);
    }
}
foo.getX();

從上圖中，我們可以看出getX方法的調用者的上下文是foo，因此getX方法中的 this 指向調用者上下文foo，轉換成 call 方法為foo.getX.call(foo)。

下面我們把其他函數的調用方式都按調用對象方法的思路來轉換。

構造函數中的this

function Foo(){
    this.x = 1;
    this.getX = function(){
        console.log(this.x);
    }
}
var foo = new Foo();
foo.getX();

執行 new 如果不考慮原型鏈，只考慮上下文的切換，就相當于先創建一個空的對象，然后把這個空的對象作為構造函數的上下文，再去執行構造函數，最后返回這個對象。

var newMethod = function(func){
    var context = {};
    func.call(context);
    return context;
}
function Foo(){
    this.x = 1;
    this.getX = function(){
        console.log(this.x);
    }
}
var foo = newMethod(Foo);
foo.getX();

DOM事件處理函數中的this

DOMElement.addEventListener("click", function(){
    console.log(this);
});

把函數綁定到DOM事件時，可以當作在DOM上增加一個函數方法，當觸發這個事件時調用DOM上對應的事件方法。

DOMElement.clickHandle = function(){
    console.log(this);
}
DOMElement.clickHandle();

普通函數中的this

var x = 1;
function getX(){
    console.log(this.x);
}
getX();

這種情況下，我們創建一個虛擬上下文對象，然后普通函數作為這個虛擬上下文對象的方法調用，此時普通函數中的this就指向了這個虛擬上下文。

那這個虛擬上下文是什么呢？在非嚴格模式下是全局上下文，瀏覽器里是 window ，NodeJs里是 Global ；在嚴格模式下是 undefined 。

var x = 1;
function getX(){
    console.log(this.x);
}

[viturl context].getX = getX;
[viturl context].getX();

閉包中的this

var x = 1;
var foo = {
    x: 2,
    y: 3,
    getXY: function(){
        (function(){
            console.log("x：" + this.x);
            console.log("y：" + this.y); 
        })();
    }
}
foo.getXY();

這段代碼的上下文如下圖：

這里需要注意的是，我們再研究函數中的 this 指向時，只需要關注 this 所在的函數是如何調用的， this 所在函數外的函數調用都是浮云，是不需要關注的。因此在所有的圖示中，我們只需要關注紅色框中的內容。

因此這段代碼我們關注的部分只有:

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

與普通函數調用一樣，創建一個虛擬上下文對象，然后普通函數作為這個虛擬上下文對象的方法立即調用，匿名函數中的 this 也就指向了這個虛擬上下文。

參數中的this

var x = 1;
var foo = {
    x: 2,
    getX: function(){
        console.log(this.x);
    }
}
setTimeout(foo.getX, 1000);

函數參數是值傳遞的，因此上面代碼等同于以下代碼：

var getX = function(){
    console.log(this.x);
};
setTimeout(getX, 1000);

然后我們又回到了普通函數調用的問題。

全局中的this

全局中的 this 指向全局的上下文

var x = 1;
console.log(this.x);

復雜情況下的this

var x = 1;
var a = {
    x: 2,
    b: function(){
        return function(){
            return function foo(){
                console.log(this.x);
            }        
        }
    }
};

(function(){
    var x = 3;
    a.b()()();
})();

看到上面的情況是有很多個函數，但我們只需要關注 this 所在函數的調用方式，首先我們來簡化一下如下：

var x = 1;
(function(){
    var x = 3;
    var foo = function(){
        console.log(this.x);
    }
    foo();
});

this 所在的函數 foo 是個普通函數，我們創建一個虛擬上下文對象，然后普通函數作為這個虛擬上下文對象的方法立即調用。因此這個 this指向了這個虛擬上下文。在非嚴格模式下是全局上下文，瀏覽器里是 window ，NodeJs里是 Global ；在嚴格模式下是 undefined 。

總結

在需要判斷 this 的指向時，我們可以安裝這種思路來理解：

判斷 this 在全局中OR函數中，若在全局中則 this 指向全局，若在函數中則只關注這個函數并繼續判斷。

判斷 this 所在函數是否作為對象方法調用，若是則 this 指向這個對象，否則繼續操作。

創建一個虛擬上下文，并把this所在函數作為這個虛擬上下文的方法，此時 this 指向這個虛擬上下文。

在非嚴格模式下虛擬上下文是全局上下文，瀏覽器里是 window ，Node.js里是 Global ；在嚴格模式下是 undefined 。

圖示如下：

歡迎關注：Leechikit
原文鏈接：segmentfault.com

到此本文結束，歡迎提問和指正。
寫原創文章不易，若本文對你有幫助，請點贊、推薦和關注作者支持。

GPU云服務器云服務器 javaScript中的this js中的this js中的this機制 js中的this與html

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

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

「前端面試題系列4」this的原理以及用法

摘要：但是有一個總的原則那就是總會指向，調用函數的那個對象。作為對象方法的調用函數作為某個對象的方法調用，這時就指這個上級對象。 showImg(https://segmentfault.com/img/bVbnvF7?w=750&h=422); 這是前端面試題系列的第 4 篇，你可能錯過了前面的篇章，可以在這里找到：偽類與偽元素的區別及實戰如何實現一個圣杯布局？今日頭條面試題和思...

fnngj 2019-08-23 14:51 評論0 收藏0
2017-07-25 前端日報

摘要：前端日報精選三思而后行想提高團隊技術，來試試這個套路如何開發一個插件學習筆記塊級作用域綁定譯文詳解帶來的個重大變化中文周二放送畫圖知乎專欄第期新特性譯配置譯高性能視差滾動行代碼構建區塊鏈知乎專欄渲染器修仙之路之拷貝對象已 2017-07-25 前端日報精選 SSR 三思而后行想提高團隊技術，來試試這個套路！如何開發一個 Atom 插件ES6學習筆記：塊級作用域綁定【譯文】詳解VUE2...

bluesky 2019-08-20 18:17 評論0 收藏0
和少婦白潔一起學JavaScript

摘要：我們已經回答了的構造函數和原型都是誰的問題，現在牽扯出來一個，我們繼續檢查的構造函數是全局對象上屬性叫的對象的原型是個匿名函數，按照關于構造函數的約定，它應該是構造函數的屬性我們給這個對象起個名字，叫。我不確定JavaScript語言是否應該被稱為Object-Oriented，因為Object Oriented是一組語言特性、編程模式、和設計與工程方法的籠統稱謂，沒有一個詳盡和大家...

DevTTL 2019-08-20 14:29 評論0 收藏0
javascript自定義事件原理

摘要：我們就需要我們自己去定義事件其實就是我們寫的函數，尤其是組件開發過程中，用的尤為多。可能有確定按鈕取消按鈕等操作。但是自定義事件的基本原理就是如上描繪的那樣我們都知道，鼠標點擊click，觸屏的touch等事件，可以觸發相應的事件處理程序，也可以為這些事件添加事件處理程序，實際開發過程中可供我們使用的事件很少，click、doubleclick，mouseover、mousemove...

JowayYoung 2019-08-20 15:17 評論0 收藏0
vue你不知道的奇淫絕技

摘要：之前做過的組件配置系統核心就是它。但是如果你想改動到這個元素的樣式，但是又不想改動公用模板。 1.placeholder與computed巧用表單開發肯定是日常開發中必不可少的環節，可是設計圖經常會有表單默認值的設計，比如:showImg(https://segmentfault.com/img/remote/1460000012955169?w=559&h=392); 需求方的需求...

ixlei 2019-08-22 13:58 評論0 收藏0