箭頭函數中this的指向問題

箭頭函數中this指向等

箭頭函數 javascript this

「箭頭函數」的this，老是指向定義時所在的對象，而不是運行時所在的對象。

• 箭頭函數位於foo函數內部。只有foo函數運行後(被調用後，內部this肯定)，它纔會按照定義生成，因此foo運行時所在的對象，剛好是箭頭函數定義時所在的對象

  function foo() {
    setTimeout( () => {
      console.log("id:", this.id);
    },100);
  }
  
  var id = 21; // 箭頭函數運行時所在的環境
  
  foo.call( { id: 42 } ); // 箭頭函數定義時所在的環境
  
  // 結果是 id: 42

  function foo() {
    return () => {
      return () => {
        return () => {
          console.log("id:", this.id);
        };
      };
    };
  }
  
  var f = foo.call({id: 1});
  
  var t1 = f.call({id: 2})()();
  var t2 = f().call({id: 3})();
  var t3 = f()().call({id: 4});
  
  // 結果是： 1，1，1

  var obj = {
    field: 'hello',
    getField: () => { 
        // 此時箭頭函數被定義，this指向obj的this，而obj的this是window，則此箭頭函數的this指向window
      console.log(this)
    },
  }
  obj.getField();
  
  //window

• 箭頭函數裏不但沒有 this，也沒有 arguments, super ……

  var arguments = 42;
  var arr = () => arguments;
  
  arr(); // 42
  
  function foo() {
    var f = (i) => arguments[0]+i; 
    // foo函數的間接參數綁定
    return f(2);
  }
  
  foo(1); // 3

  var f = (i) => arguments; 
   f(1); // arguments is not defined

• 經過 call 或 apply 調用: 因爲 this 已經在詞法層面完成了綁定，經過 call() 或 apply() 方法調用一個函數時，只是傳入了參數而已，對 this 並無什麼影響

  var adder = {
    base : 1,
      
    add : function(a) {
      var f = v => v + this.base;
      return f(a);
    },
  
    addThruCall: function(a) {
      var f = v => v + this.base;
      var b = {
        base : 2
      };
              
      return f.call(b, a);
    }
  };
  
  console.log(adder.add(1));         // 輸出 2
  console.log(adder.addThruCall(1)); // 仍然輸出 2

• 箭頭函數不能用做構造器，和 new一塊兒用會拋出錯誤。

  var Foo = () => {};
  var foo = new Foo(); // TypeError: Foo is not a constructor

• 箭頭函數沒有prototype屬性。

  var Foo = () => {};
  console.log(Foo.prototype); // undefined

• yield 關鍵字一般不能在箭頭函數中使用（除非是嵌套在容許使用的函數內）。所以，箭頭函數不能用做生成器。

參考資料

1. MDN
2. zhengweikeng的博客
3. 能夠說很厲害了,圖解javascript this指向什麼？
4. 阮一峯es6關於箭頭函數 this 的討論