1. 程式人生 > >深入理解ES6箭頭函數中的this

深入理解ES6箭頭函數中的this

執行上下文 很多 pre 深入 上下 ber out pri 而不是

簡要介紹:箭頭函數中的this,指向與一般function定義的函數不同,箭頭函數this的定義:箭頭函數中的this是在定義函數的時候綁定,而不是在執行函數的時候綁定。

(1)一般函數this指向在執行是綁定 當運行obj.say()時候,this指向的是obj這個對象。

var x=11;
var obj={
  x:22,
  say:function(){
    console.log(this.x)
  }
}
obj.say();
//console.log輸出的是22

(2)所謂的定義時候綁定,就是this是繼承自父執行上下文!!中的this,比如這裏的箭頭函數中的this.x,箭頭函數本身與say平級以key:value的形式,也就是箭頭函數本身所在的對象為obj,而obj的父執行上下文就是window,因此這裏的this.x實際上表示的是window.x,因此輸出的是11。

var x=11;
var obj={
 x:22,
 say:()=>{
   console.log(this.x);
 }
}
obj.say();
//輸出的值為11

類似的還有:

(3)

var a=11
function test1(){
  this.a=22;
  let b=function(){
    console.log(this.a);
  };
  b();
}
var x=new test1();
輸出11

箭頭函數情況:

var a=11;
function test2(){
  this.a=22;
  let b=()=>{console.log(this.a)}
  b();
}
var x=new test2();
//輸出22

很奇怪對不對,我是這樣理解的,ES6中定義的時候綁定this的具體含義,應該繼承的是父執行上下文裏面的this,切忌是父執行上下文!!!這樣就很多箭頭函數中的指向不明確就迎刃而解了。

註意:簡單對象(非函數)是沒有執行上下文的!

深入理解箭頭函數中的this

箭頭函數中,this指向的固定化,並不是因為箭頭函數內部有綁定this的機制,實際原因是箭頭函數根本沒有自己的this,導致內部的this就是外層代碼塊的this。正是因為它沒有this,所以也就不能用作構造函數。

我們可以來模擬ES5中的箭頭函數轉化:

// ES6
function foo() {
  setTimeout(() => {
    console.log(‘id:‘, this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log(‘id:‘, _this.id);
  }, 100);
}

所以在定義對象的時候,定義對象屬性,裏面的this指向的一般是全局,或者這個對象所在的那個環境中的this。

深入理解ES6箭頭函數中的this