箭頭函式是ES6中的新增特性，他沒有自己的this，其this指向從外層程式碼庫繼承。

使用箭頭函式時要注意一下幾點：

• 箭頭函式不能用作建構函式，用的話會丟擲一個錯誤
• 無法使用arguments引數，如果要用的話就用rest
• 無法使用yield命令，所以箭頭函式無法用作Generator函式
• 因為沒有自己的this，所以沒法通過bind、call、apply來改變this指向
• 但是這不代表箭頭函式的this指向是靜態的，我們可以通過改變它外層程式碼庫的this指向來控制
• 箭頭函式的this從外層程式碼庫繼承，所以箭頭函式的this是在定義的時候就繫結好了的，而普通函式是在呼叫的時候確定this指向
• 字面量物件中直接定義的箭頭函式的this不繫結該物件，而是往外找一層，最簡單的情況是繫結到window

PS: 實際開發環境中，React可以使用箭頭函式解決一個經典問題，這裡不細說了。

給一個例子看一下箭頭函式的實際情況：

const obj = {
  fun1: function () {
    console.log(this);
    return () => {
      console.log(this);
    }
  },fun2: function () {
    return function () {
      console.log(this);
      return () => {
        console.log(this);
      }
    }
  },fun3: () => {
    console.log(this);
  }
}

let f1 = tiGeapZL
 
obj.fun1(); // obj
f1() // obj

let f2 = obj.fun2();
let f2_2 = f2(); // window
f2_2() // window

obj.fun3(); // window

針對每行輸出的分析：

let f1 = obj.fun1() // obj

這裡明顯進行的是隱式繫結，fun1的this指向obj

f1() // obj

這裡執行了上一行返回出來的箭頭函式，我們分析上一層程式碼庫的this指向obj，所以直接繼承，箭頭函式this指向

objlet f2 =obj.fun2()

fun2第一層執行的時候沒有列印程式碼，而是返回了一個函數出來，賦值給f2，並且這裡發生了繫結丟失，this指向由原來的obj指向了window(發生了賦值)

let f2_2 = f2() // window

f2()執行了，打印出了改綁後的this——window，然後將箭頭函式返回出來，賦值給f2_2f

2_2() // window

執行打印出window，剛才的外層程式碼的this不是指向了window嗎，所以這裡就繼承了window作為this

obj.fun3() // window

在字面量中直接定義的箭頭函式無法繼承該物件的this，而是往外再找一層，就找到了window，因為字面量物件無法形成自己的一層作用域，但是建構函式可以哦。

那我們怎麼操縱箭頭函式的this指向呢：

答案是修改外層程式碼庫的this指向，在箭頭函式定義之前就給this修改方向即可。

在以上程式碼的基礎上：

let fun4 = f2.bind(obj)() // obj
fun4() // obj

我們發現修改的是第二層方法的this指向，並且箭頭函式也繼承了下來。

  fun2: function () {
    return function () { // 我們修改的是這裡的this
      console.log(this);
      rwww.cppcns.cometurn () => { // 然後這裡定義的時候就繼承啦
        console.log(this);
      }
    }
  },

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容！