ES6箭頭函式中的this繫結問題
阿新 • • 發佈:2018-12-09
關於this指向問題的討論一直是學習js不可忽視的重要部分,那些一個又一個圍繞this挖的筆試坑,彷彿永遠也填不完
var obj={ fn:function(){ console.log(this); } } obj.fn();//object
以上這段程式碼是再淺顯不過的this指向問題,也就是誰呼叫的函式,函式體中的this就指向誰
再看下面這段
var obj={ fn:function(){ setTimeout(function(){ console.log(this); }); } } obj.fn();//window
這次this指向了最外層的window物件,為什麼呢,還是那個道理,這次this出現在全域性函式setTImeout()中的匿名函式裡,並沒有某個物件進行顯示呼叫,所以this指向window物件
假如我們在這裡使用箭頭函式呢
var obj={ fn:function(){ setTimeout(() => { console.log(this); }); } } obj.fn();//object
this又指向函式的宿主物件了
為了更加清楚的對比一般函式和箭頭函式this指向的區別,我們給物件新增變數
var obj={ num:3, fn:function(){ setTimeout(function(){ console.log(this.num); }); } } obj.fn();//undefined //............................................................ var obj1={ num:4, fn:function(){ setTimeout(() => { console.log(this.num); }); } } obj1.fn();//4
如上程式碼,在沒有使用箭頭函式的情況下,this指向了window(匿名函式,沒有呼叫的宿主物件),而window物件並沒有num屬性(num屬性在obj中定義),而在使用箭頭函式的情況下,this的指向卻物件obj1,自然可以輸出obj1中定義的屬性num。
接下來看更復雜的情況
多層巢狀的箭頭函式
var obj1={ num:4, fn:function(){ var f=() => { //object,也就是指obj1 console.log(this); setTimeout(() => { console.log(this);// //object,也就是指obj1 }); } f(); } } obj1.fn();
假如我們改動兩層箭頭函式的其中一處,看會出現什麼結果
var obj1={ num:4, fn:function(){ var f=function(){ console.log(this); //window,因為函式f定義後並沒有物件呼叫,this直接繫結到最外層的window物件 setTimeout(() => { console.log(this);//window,外層this繫結到了window,內層也相當於定義在window層(全域性環境) }); } f(); } } obj1.fn();
好,接下來改變另一處
var obj1={ num:4, fn:function(){ var f=() => { console.log(this); //object,f()定義在obj1物件中,this就指向obj1,這就是箭頭函式this指向的關鍵 setTimeout(function() { console.log(this);//window,非箭頭函式的情況下還是要看宿主物件是誰,如果沒有被物件呼叫,函式體中的this就繫結的window上 }); } f(); } } obj1.fn();
總結:
1.箭頭函式的this繫結看的是this所在的函式定義在哪個物件下,繫結到哪個物件則this就指向哪個物件
2.如果有物件巢狀的情況,則this繫結到最近的一層物件上
---------------------
作者:磷火
來源:CSDN
原文:https://blog.csdn.net/u013344815/article/details/73184928
版權宣告:本文為博主原創文章,轉載請附上博文連結!