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

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

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

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

看個例子:

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()通過箭頭函數(shù)定義，而箭頭函數(shù)是沒有自己的this，會繼承父作用域的this，因此person.getAge()執(zhí)行時，此時的作用域指向window，而window沒有定義age屬性，所有報undefined。

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

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

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

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

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

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

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

call()/apply()函數(shù)的作用是改變被調(diào)用函數(shù)中this的指向。但是箭頭函數(shù)沒有自己的this，而是繼承父作用域中的this，所以這兩函數(shù)沒法改變箭頭函數(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的指向，此時應(yīng)當(dāng)輸出的是：“我是李四”，但實(shí)際上輸出的是：“我是張三”，由此可以call函數(shù)并沒有成功改變箭頭函數(shù)fun內(nèi)部this的指向。

2. 不綁定arguments
   

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

fun(1) // 報錯：ReferenceError: arguments is not defined

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

3. 沒有prototype屬性
   

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

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

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

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

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