es6箭頭法中this的指向是什麼

在es6中，箭頭函數體內的this對象，就是定義該函數時所在的作用域指向的對象。箭頭函數中this的指向就是上下文裡對象this指向，偶爾沒有上下文對象，this就指向window；即使是call、apply、bind等方法也不能改變箭頭函數this的指向。

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

箭頭函數相信大家在日常開發中用到的地方非常之多，因為它很簡潔，可讀性強，但是它最大的好處，其實是解決了匿名函數的this指向問題，有利於封裝回呼函數。

先來個總結：

箭頭函數體內的this對象，就是定義該函數時所在的作用域指向的對象，而不是使用時所在的作用域指向的對象。

ES6箭頭函數中this

• （1）預設指向定義它時，所處上下文的物件的this指向。也就是ES6箭頭函數裡this的指向就是上下文裡對象this指向，偶爾沒有上下文對象，this就指向window

• #（2）即使是call，apply，bind等方法也不能改變箭頭函數this的指向

下面是普通函數的列子：

var name = 'window'; // 其实是window.name = 'window'

var A = {
   name: 'A',
   sayHello: function(){
      console.log(this.name)
   }
}

A.sayHello();// 输出A

var B = {
  name: 'B'
}

A.sayHello.call(B);//输出B

A.sayHello.call();//不传参数指向全局window对象，输出window.name也就是window

從上面可以看到，sayHello這個方法是定義在A物件中的，當我們使用call方法，把其指向B對象，最後輸出了B；可以得出，sayHello的this只跟使用時的對像有關。

改造一下：

var name = 'window'; 
var A = {
   name: 'A',
   sayHello: () => {
      console.log(this.name)
   }
}
A.sayHello();// 还是以为输出A ? 错啦，其实输出的是window

我相信在這裡，大部分同學都會出錯，以為sayHello是綁定在A上的，但其實它綁定在window上的，那到底是為什麼呢？

一開始，我重點標註了“該函數所在的作用域指向的對象”，作用域是指函數內部，這裡的箭頭函數，也就是sayHello，所在的作用域其實是最外層的js環境，因為沒有其他函數包裹；然後最外層的js環境指向的對像是winodw對象，所以這裡的this指向的是window對象。

那如何改造成永遠綁定A呢：

var name = 'window'; 

var A = {
   name: 'A',
   sayHello: function(){
      var s = () => console.log(this.name)
      return s//返回箭头函数s
   }
}

var sayHello = A.sayHello();
sayHello();// 输出A 

var B = {
   name: 'B';
}

sayHello.call(B); //还是A
sayHello.call(); //还是A

OK，這樣就做到了永遠指向A物件了，我們再根據「該函數所在的作用域指向的物件」來分析一下：

• 函數所在的作用域：箭頭函式s 所在的作用域是sayHello,因為sayHello是一個函式。

• 作用域指向的物件：A.sayHello指向的物件是A。

所以箭頭函數s 中this就是指向A啦～～

----------------finish--- ----------

最後是使用箭頭函數其他幾點需要注意的地方

• #不可以當作建構函數，也就是說，不可以使用new指令，否則會拋出一個錯誤。

• 不可以使用arguments對象，該對像在函數體內不存在。如果要用，可以用 rest 參數代替。

• 不可以使用yield指令，因此箭頭函數不能用作 Generator 函數。

【推薦學習：javascript影片教學】

以上是es6箭頭法中this的指向是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！