箭頭函數中this的指向問題

DDreach 發布于2019-08-22 13:53 / 2832人閱讀

摘要：箭頭函數中指向等箭頭函數箭頭函數的，總是指向定義時所在的對象，而不是運行時所在的對象。關鍵字通常不能在箭頭函數中使用除非是嵌套在允許使用的函數內。參考資料的博客可以說很厲害了圖解指向什么阮一峰關于箭頭函數的討論

箭頭函數中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 關鍵字通常不能在箭頭函數中使用（除非是嵌套在允許使用的函數內）。因此，箭頭函數不能用作生成器。

參考資料

MDN

zhengweikeng的博客

可以說很厲害了,圖解javascript this指向什么？

阮一峰es6關于箭頭函數 this 的討論

GPU云服務器云服務器 this的指向改變this指向指向函數的指針 js中回調函數問題

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

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

關于ES6中箭頭函數的this問題

摘要：對象的指向是可變的，但是在箭頭函數中，它是固定的。同樣的由于箭頭函數沒有自己的所以傳統的顯性綁定無效內部的指向外部在的學習中，的指向問題一直是個難點，特別是在對象方法中使用時，必須更加小心。由此箭頭函數在很大程度上減少了我們的困擾。什么是箭頭函數用法 ES6 允許使用箭頭（=>）定義函數測試 var p1 = document.getElementById(test1)...

LeviDing 2019-08-22 10:53 評論0 收藏0
論普通函數和箭頭函數的區別以及箭頭函數的注意事項、不適用場景

摘要：第二種情況是箭頭函數的如果指向普通函數它的繼承于該普通函數。箭頭函數的指向全局，使用會報未聲明的錯誤。 showImg(https://segmentfault.com/img/remote/1460000018610072?w=600&h=400); 箭頭函數是ES6的API，相信很多人都知道，因為其語法上相對于普通函數更簡潔，深受大家的喜愛。就是這種我們日常開發中一直在使用的API...

paulquei 2019-08-23 16:15 評論0 收藏0
ES6箭頭函數體中this指向哪里？

摘要：注意因為箭頭函數內部的是指向外層代碼塊的最近的，例中的函數的，所以我們可以通過改變外層代碼塊的的指向從而改變箭頭函數中的指向例中使用了函數的方法。一、this關鍵字小測試 ES6箭頭函數體中的this指向哪里？在回答這個問題之前先來揣揣你對this關鍵字的了解程度：（讓我們回到ES6之前）題： var obj = { a: function() { cons...

Half 2019-08-22 15:48 評論0 收藏0
輕松搞定javascript中this的指向

摘要：調用在中，通過的形式調用一個構造函數，會創建這個構造函數實例，而這個實例的指向創建的這個實例。如下例所示，在構造函數內部使用并沒有改變全局變量的值。顯然，箭頭函數是不能用來做構造函數。　　關于javascript中this指向的問題，現總結如下，如有不正確，歡迎指正。　　javascript中，this的指向并不是在函數定義的時候確定的，而是在其被調用的時候確定的。也就是說，函數的...

shinezejian 2019-08-23 12:14 評論0 收藏0
JavaScript 的 this 指向問題深度解析

摘要：而改變了這種狀態，雖然定義的類用運算符得到的仍然是，但它不能像普通函數一樣直接調用同時，中定義的方法函數，也不能當作構造函數用來調用。而在中，用調用一個構造函數，會創建一個新對象，而其中的就指向這個新對象。 JavaScript 中的 this 指向問題有很多博客在解釋，仍然有很多人問。上周我們的開發團隊連續兩個人遇到相關問題，所以我不得不將關于前端構建技術的交流會延長了半個時候討論 ...

liuchengxu 2019-08-20 14:22 評論0 收藏0