箭頭函數(shù)中this的指向問題

DDreach 發(fā)布于2019-08-22 13:53 / 2871人閱讀

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

箭頭函數(shù)中this指向等

箭頭函數(shù) javascript this

“箭頭函數(shù)”的this，總是指向定義時所在的對象，而不是運行時所在的對象。

箭頭函數(shù)位于foo函數(shù)內部。只有foo函數(shù)運行后(被調用后，內部this確定)，它才會按照定義生成，所以foo運行時所在的對象，恰好是箭頭函數(shù)定義時所在的對象

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

var id = 21; // 箭頭函數(shù)運行時所在的環(huán)境

foo.call( { id: 42 } ); // 箭頭函數(shù)定義時所在的環(huán)境

// 結果是 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: () => { 
      // 此時箭頭函數(shù)被定義，this指向obj的this，而obj的this是window，則此箭頭函數(shù)的this指向window
    console.log(this)
  },
}
obj.getField();

//window

箭頭函數(shù)里不但沒有 this，也沒有 arguments, super ……

var arguments = 42;
var arr = () => arguments;

arr(); // 42

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

foo(1); // 3

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

通過 call 或 apply 調用: 由于 this 已經在詞法層面完成了綁定，通過 call() 或 apply() 方法調用一個函數(shù)時，只是傳入了參數(shù)而已，對 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

箭頭函數(shù)不能用作構造器，和 new一起用會拋出錯誤。

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

箭頭函數(shù)沒有prototype屬性。

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

yield 關鍵字通常不能在箭頭函數(shù)中使用（除非是嵌套在允許使用的函數(shù)內）。因此，箭頭函數(shù)不能用作生成器。

參考資料

MDN

zhengweikeng的博客

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

阮一峰es6關于箭頭函數(shù) this 的討論

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

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

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

關于ES6中箭頭函數(shù)的this問題

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

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

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

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

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

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

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

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

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

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