點(diǎn)擊上方 前端瓶子君，關(guān)注公眾號(hào)

回復(fù)算法，加入前端編程面試算法每日一題群

標(biāo)題是某大佬入職鵝廠的面試題，這里借題聊聊箭頭函數(shù)。

前幾天學(xué)習(xí)的時(shí)候，我寫(xiě)過(guò)關(guān)于this指向的問(wèn)題，得出的結(jié)論是：this永遠(yuǎn)指向函數(shù)的調(diào)用者。但是在箭頭函數(shù)中，this指向的是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象。換句話(huà)說(shuō)，箭頭函數(shù)沒(méi)有自己的this，而是繼承父作用域中的this。

看個(gè)例子:

var person = {
  name:'張三',
  age:18,
  getName:function(){
     console.log('我的名字是：'+this.name)
  },
  getAge:()=>{
     console.log('我的年齡是：'+this.age)
  }
}

person.getName() // 我的名字是張三
person.getAge()  // 我的年齡是undefined
復(fù)制代碼

person.getName()中this指向函數(shù)的調(diào)用者，也就是person實(shí)例，因此this.name = "張三"。

getAge()通過(guò)箭頭函數(shù)定義，而箭頭函數(shù)是沒(méi)有自己的this，會(huì)繼承父作用域的this，因此person.getAge()執(zhí)行時(shí)，此時(shí)的作用域指向window，而window沒(méi)有定義age屬性，所有報(bào)undefined。

從例子可以得出：對(duì)象中定義的函數(shù)使用箭頭函數(shù)是不合適的。

先解答下標(biāo)題問(wèn)題，為啥箭頭函數(shù)不能作為構(gòu)造函數(shù)？

// 構(gòu)造函數(shù)生成實(shí)例的過(guò)程
function Person(name,age){
  this.name = name
  this.age = age
}
var p = new Person('張三',18)

//new關(guān)鍵字生成實(shí)例過(guò)程如下
// 1. 創(chuàng)建空對(duì)象p
var p = {} 
// 2. 將空對(duì)象p的原型鏈指向構(gòu)造器Person的原型
p.__proto__ = Person.prototype
// 3. 將Person()函數(shù)中的this指向p
// 若此處Person為箭頭函數(shù)，而沒(méi)有自己的this，call()函數(shù)無(wú)法改變箭頭函數(shù)的指向，也就無(wú)法指向p。
Person.call(p) 
復(fù)制代碼

構(gòu)造函數(shù)是通過(guò)new關(guān)鍵字來(lái)生成對(duì)象實(shí)例，生成對(duì)象實(shí)例的過(guò)程也是通過(guò)構(gòu)造函數(shù)給實(shí)例綁定this的過(guò)程，而箭頭函數(shù)沒(méi)有自己的this。創(chuàng)建對(duì)象過(guò)程，new 首先會(huì)創(chuàng)建一個(gè)空對(duì)象，并將這個(gè)空對(duì)象的__proto__指向構(gòu)造函數(shù)的prototype，從而繼承原型上的方法，但是箭頭函數(shù)沒(méi)有prototype。因此不能使用箭頭作為構(gòu)造函數(shù)，也就不能通過(guò)new操作符來(lái)調(diào)用箭頭函數(shù)。

下面看看箭頭函數(shù)其他需要注意的點(diǎn)：

1. 不支持call()/apply()函數(shù)特性

call()/apply()函數(shù)的作用是改變被調(diào)用函數(shù)中this的指向。但是箭頭函數(shù)沒(méi)有自己的this，而是繼承父作用域中的this，所以這兩函數(shù)沒(méi)法改變箭頭函數(shù)的指向。

var Person = {
  name:'張三',
  getName:function(arg){
    let fun = v=>v+this.name
    let boy  = {
      name:'李四'
    }
    // call函數(shù)綁定boy實(shí)例
    return fun.call(boy,arg)
  }
}

Person.getName('我是') // 我是張三
復(fù)制代碼

例子中，倘若箭頭函數(shù)執(zhí)行fun.call(b,arg)成功改變this的指向，此時(shí)應(yīng)當(dāng)輸出的是：“我是李四”，但實(shí)際上輸出的是：“我是張三”，由此可以call函數(shù)并沒(méi)有成功改變箭頭函數(shù)fun內(nèi)部this的指向。

2. 不綁定arguments
   

var fun = ()=>{
   console.log(arguments)
}

fun(1) // 報(bào)錯(cuò)：ReferenceError: arguments is not defined

// 解決辦法
var fun = (...args)=>{
  console.log(args)
}
fun(1)  // 輸出：[1]
復(fù)制代碼

3. 沒(méi)有prototype屬性
   

var fun = ()=>{}
fun.prototype // undefined
復(fù)制代碼

4. 原型函數(shù)不能定義成箭頭函數(shù)
   

function Person(name){
  this.name = name
}

// 原型函數(shù)使用箭頭函數(shù)，其中的this指向全局對(duì)象，而不會(huì)指向構(gòu)造函數(shù)
// 因此訪問(wèn)不到構(gòu)造函數(shù)本身，也就訪問(wèn)不到實(shí)例屬性
Person.prototype.say = ()=>{console.log(this.name)}
復(fù)制代碼

自此我們學(xué)習(xí)了箭頭函數(shù)的一些疑難點(diǎn)。