面試題-淺談JavaScript中的This指向

摘要： 各位小夥伴在面試中被面試官問道this指向問題一定不少吧，同時還被問道apply,call和bind的用法區別，現在，就來簡單的聊一聊this到底指向何方。 1.基本概念 MDN的官方解釋：與其他語言相比，函式的  this 關鍵字在 JavaScript 中的表現略有不同，此外，...

各位小夥伴在面試中被面試官問道this指向問題一定不少吧，同時還被問道apply,call和bind的用法區別，現在，就來簡單的聊一聊this到底指向何方。

1.基本概念

MDN的官方解釋：與其他語言相比，函式的  this 關鍵字在 JavaScript 中的表現略有不同，此外，在嚴格模式和非嚴格模式之間也會有一些差別。 在絕大多數情況下，函式的呼叫方式決定了 this 的值。 this 不能在執行期間被賦值，並且在每次函式被呼叫時 this 的值也可能會不同。

簡而言之：

1.this指向的物件稱為函式的上下文物件context；

2.this的指向取決於函式被呼叫方式 

不管函式怎麼呼叫的天花亂墜，我們只要記住這幾點即可清晰的找出this的指向。

2.小試牛刀

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

面試官問你this指向哪裡，當然大聲回答不知道，原因：誰呼叫指向誰，函式都沒被呼叫，確實不知道指向。

小結：直接通過函式名來呼叫函式，this指向全域性變數window;通過物件.函式名呼叫函式，this指向該物件。

3.DOM物件呼叫函式時this的指向問題

1.通過選擇器選擇元素加事件屬性來繫結事件，this指向該DOM物件，例子如下：

document.getElementById('btn').onclick=function(){
console.log('click'); //click
console.log(this); //<button id="btn">button</button>
}

2.直接在DOM標籤中寫事件，this指向window,我們可以通過吧this作為引數傳入方法中再使用，例子如下

html:
<button onclick="modify()">add</button>
<span id="count">0</span>
<button onclick="modify()">reduce</button>

script：
// 操作方法
function modify(){
console.log(this); //window
}

因為這個時候是直接呼叫方法的，所以this指向全域性window物件，那麼問題來了，我們想判斷我們點選的是哪一個按鈕，應該怎麼做呢，我們可以把this的值作為引數傳入方法中再使用，例子如下。

html:
<button onclick="modify(this)">add</button>
<span id="count">0</span>
<button onclick="modify(this)">reduce</button>

script：
// 操作方法
function modify(_this){
console.log(_this); 
// <button onclick="modify(this)">add</button>
// <button onclick="modify(this)">reduce</button>
}

4.物件中this的指向問題

先看一個簡單的例子：

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

obj.foo(); //2
obj.bar(); //1
var foo=obj.foo;
foo(); //1

我們定義了一個全域性變數a和一個列印a的全域性變數方法，之後又定義了一個obj物件，其中包含a屬性和foo,bar兩個方法。當我們呼叫obj.foo()列印了2，呼叫obj.bar()列印了1.

分析：

不管printA在哪裡定義的，我們this的指向只取決於被誰呼叫的。在obj.foo()，foo的屬性值為printA，被obj直接呼叫，所以this指向obj，this.a就是obj.a=2了；

當我們呼叫obj.bar()時，bar的屬性值為function(){printA()}，沒有明確哪個物件來呼叫printA方法，this預設指向全域性物件window，所以this.a=window.a=1；

第三種情況我們把obj.foo值賦予了foo變數，在呼叫的時候就相當於是window.foo()了，列印1。

小結： this的指向不是函式宣告是繫結的，而是在函式執行過程中動態繫結的。

5.改變this的指向方法：applay call bind

話不多話：寫了一個例子，大家先看，萬一比喻不恰當，大家能理解其中意思即可

var liLei={
name:'liLei',
money:10,
buyPen:function(){
this.money=this.money-1;
console.log(this.name+" have money:"+this.money)
}
}

var hanMeiMei={
name:'hanMeiMei',
money:20,
buyPan:function(){
this.money=this.money-2;
console.log(this.name+" have money:"+this.money)
}
}

liLei.buyPen(); // liLei have money:9
hanMeiMei.buyPan(); //hanMeiMei have money:18 

例子很好理解，輸出的結果相信大家也能看得明白，哪天，韓梅梅想買一個盆，她買不了，因為她還沒有這個方法，她一想：我沒有這個方法，但是李雷有啊，我打電話給李雷把錢他讓他幫我買啊；後來李雷想買一個盤，實現方法也是如此。那麼，在程式碼中如何實現呢？

JavaScript有好幾個方法可以實現：call,apply,bind。

call方法:

liLei.buyPen.call(hanMeiMei); //hanMeiMei have money:19
hanMeiMei.buyPan.call(liLei); //liLei have money:8

apply方法：
語法：apply(thisObj，[argArray])
定義：應用某一物件的一個方法，用另一個物件替換當前物件。
說明：
如果 argArray 不是一個有效的陣列或者不是 arguments 物件，那麼將導致一個 TypeError。如果沒有提供 argArray 和 thisObj 任何一個引數，那麼 Global 物件將被用作 thisObj， 並且無法被傳遞任何引數。

liLei.buyPen.apply(hanMeiMei); //hanMeiMei have money:19
hanMeiMei.buyPan.apply(liLei); //liLei have money:8

bind方法：

liLei.buyPen.bind(hanMeiMei)(); //hanMeiMei have money:19
hanMeiMei.buyPan.apply(liLei)(); //liLei have money:8

小結： 三種方法的相同指出是：可以改變this的指向， 不同之處是：apply接受的引數為一個數組，call接收的引數為一個個獨立的值；apply，call會直接呼叫方法，bind改變this的指向返回一個方法不呼叫。

注：有些低版本的瀏覽器不支援函式使用bind方法，我們在做瀏覽器相容時可以加以判斷，具體實現方法暫不贅述。

以上就是個人對於this的指向問題的理解，我們只需記住一點： this指向-誰呼叫，指向誰 。不得不說JavaScript真是個奇妙的世界，文中有紕漏不足的地方，歡迎指正。

參考資料：

Operators/this" target="_blank" rel="nofollow,noindex">MDN-this

傑瑞教育