箭頭函數(shù)是ES6中的新增特性，他沒(méi)有自己的this，其this指向從外層代碼庫(kù)繼承。

使用箭頭函數(shù)時(shí)要注意一下幾點(diǎn)：

• 箭頭函數(shù)不能用作構(gòu)造函數(shù)，用的話(huà)會(huì)拋出一個(gè)錯(cuò)誤
• 無(wú)法使用arguments參數(shù)，如果要用的話(huà)就用rest
• 無(wú)法使用yield命令，所以箭頭函數(shù)無(wú)法用作Generator函數(shù)
• 因?yàn)闆](méi)有自己的this，所以沒(méi)法通過(guò)bind、call、apply來(lái)改變this指向
• 但是這不代表箭頭函數(shù)的this指向是靜態(tài)的，我們可以通過(guò)改變它外層代碼庫(kù)的this指向來(lái)控制
• 箭頭函數(shù)的this從外層代碼庫(kù)繼承，所以箭頭函數(shù)的this是在定義的時(shí)候就綁定好了的，而普通函數(shù)是在調(diào)用的時(shí)候確定this指向
• 字面量對(duì)象中直接定義的箭頭函數(shù)的this不綁定該對(duì)象，而是往外找一層，最簡(jiǎn)單的情況是綁定到window

PS: 實(shí)際開(kāi)發(fā)環(huán)境中，React可以使用箭頭函數(shù)解決一個(gè)經(jīng)典問(wèn)題，這里不細(xì)說(shuō)了。

給一個(gè)例子看一下箭頭函數(shù)的實(shí)際情況：

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 = obj.fun1(); // obj
f1() // obj

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

obj.fun3(); // window

針對(duì)每行輸出的分析：

let f1 = obj.fun1() // obj

這里明顯進(jìn)行的是隱式綁定，fun1的this指向obj

f1() // obj

這里執(zhí)行了上一行返回出來(lái)的箭頭函數(shù)，我們分析上一層代碼庫(kù)的this指向obj，所以直接繼承，箭頭函數(shù)this指向

objlet f2 =obj.fun2()

fun2第一層執(zhí)行的時(shí)候沒(méi)有打印代碼，而是返回了一個(gè)函數(shù)出來(lái)，賦值給f2，并且這里發(fā)生了綁定丟失，this指向由原來(lái)的obj指向了window(發(fā)生了賦值)

let f2_2 = f2() // window

f2()執(zhí)行了，打印出了改綁后的this——window，然后將箭頭函數(shù)返回出來(lái)，賦值給f2_2f

2_2() // window

執(zhí)行打印出window，剛才的外層代碼的this不是指向了window嗎，所以這里就繼承了window作為this

obj.fun3() // window

在字面量中直接定義的箭頭函數(shù)無(wú)法繼承該對(duì)象的this，而是往外再找一層，就找到了window，因?yàn)樽置媪繉?duì)象無(wú)法形成自己的一層作用域，但是構(gòu)造函數(shù)可以哦。

那我們?cè)趺床倏v箭頭函數(shù)的this指向呢：

答案是修改外層代碼庫(kù)的this指向，在箭頭函數(shù)定義之前就給this修改方向即可。

在以上代碼的基礎(chǔ)上：

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

我們發(fā)現(xiàn)修改的是第二層方法的this指向，并且箭頭函數(shù)也繼承了下來(lái)。

  fun2: function () {
    return function () { // 我們修改的是這里的this
      console.log(this);
      return () => { // 然后這里定義的時(shí)候就繼承啦
        console.log(this);
      }
    }
  },

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！

最新評(píng)論