第js中什么時(shí)候不能使用箭頭函數(shù)目錄箭頭函數(shù)箭頭函數(shù)有什么缺點(diǎn)？什么時(shí)候不能使用箭頭函數(shù)？1.對(duì)象方法中，不適用箭頭函數(shù)為什么對(duì)象方法中，箭頭函數(shù)的this指向不是這個(gè)對(duì)象？2.原型方法中，不適用箭頭函數(shù)3.構(gòu)造函數(shù)也不行！4.動(dòng)態(tài)上下文中的回調(diào)函數(shù)5.Vue生命周期和method中也不能使用箭頭函數(shù)劃重點(diǎn)

箭頭函數(shù)

箭頭函數(shù)是和我們工作密切相關(guān)的東西；可以說(shuō)箭頭函數(shù)的誕生，給我們的工作帶來(lái)了極大的便利。但是箭頭函數(shù)有什么缺點(diǎn)？什么時(shí)候不能使用箭頭函數(shù)？這你了解嗎

我們覺(jué)得箭頭函數(shù)很高級(jí)，可以規(guī)避this的問(wèn)題，所有的場(chǎng)景下都是用箭頭函數(shù)。在不能使用的場(chǎng)景下使用了，出現(xiàn)了問(wèn)題，你還不知道是什么問(wèn)題，那這不是瞎添亂嗎！是不是！

這里給大家先提出一個(gè)問(wèn)題：

constobj={

name:'張三',

getName(){

return

getName1:()={

return

obj.__proto__.getName2=function(){

return

obj.__proto__.getName3=()={

return

console.log('普通函數(shù)',obj.getName())

console.log('普通函數(shù)',obj.getName2())

console.log('箭頭函數(shù)',obj.getName1())

console.log('箭頭函數(shù)',obj.getName3())

大家覺(jué)得會(huì)輸出什么呢？

先悄悄思考一下！

3,2,1公布答案!

如果答錯(cuò)了，也別灰心，畢竟網(wǎng)絡(luò)有著35的延遲，影響著你的操作和思考，看完這篇文章，保證你就不會(huì)答錯(cuò)了！

箭頭函數(shù)有什么缺點(diǎn)？

沒(méi)有arguments,如果要用，可以用rest參數(shù)代替。這里我們定義一個(gè)箭頭函數(shù)和一個(gè)普通函數(shù)還有一個(gè)使用rest參數(shù)的箭頭函數(shù)：

constfn1=()={

console.log('arguments',arguments)

fn1(100,200)

functionfn2(){

console.log('arguments',arguments)

fn2(100,200)

constfn3=(...values)={

console.log('values',values)

fn3(100,200)

無(wú)法通過(guò)apply、call、bind改變this指向這里我們?cè)诙x一個(gè)箭頭函數(shù)和一個(gè)普通函數(shù)

constfn3=()={

console.log('this',this)

fn3()

functionfn4(){

console.log('this',this)

fn4()

箭頭函數(shù)的this就是他父容器的this，不是在執(zhí)行的時(shí)候確定的，而是在定義的時(shí)候確定的。

如上圖，我們可以發(fā)現(xiàn)，箭頭函數(shù)的兩次執(zhí)行的this都是指向了Windows，使用call并沒(méi)有發(fā)生改變，而普通函數(shù)第一次是指向了Windows，第二次則是變成了我們傳入的

什么時(shí)候不能使用箭頭函數(shù)？

1.對(duì)象方法中，不適用箭頭函數(shù)

constobj={

name:'張三',

getName(){

return

getName1:()={

return

我們?cè)趯?duì)象中定義了普通函數(shù)：getName和箭頭函數(shù)getName1，接下來(lái)我們來(lái)調(diào)用一下：

console.log('普通函數(shù)',obj.getName())

console.log('箭頭函數(shù)',obj.getName1())

這里給大家默想3s輸出什么？

公布答案：

我們發(fā)現(xiàn)箭頭函數(shù)好像并沒(méi)有獲取到值誒！

為什么對(duì)象方法中，箭頭函數(shù)的this指向不是這個(gè)對(duì)象？

this永遠(yuǎn)指向函數(shù)的調(diào)用者在箭頭函數(shù)中，this指向的是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象。換句話說(shuō)，箭頭函數(shù)沒(méi)有自己的this，而是繼承父作用域中的this。

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

getName1()通過(guò)箭頭函數(shù)定義，而箭頭函數(shù)是沒(méi)有自己的this，會(huì)繼承父作用域的this。

因此obj.getName1()執(zhí)行時(shí)，此時(shí)的作用域指向window，而window沒(méi)有定義age屬性，所有報(bào)空。

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

2.原型方法中，不適用箭頭函數(shù)

constobj={

name:'張三',

obj.__proto__.getName=function(){

return

obj.__proto__.getName1=()={

return

我們又又又在對(duì)象中定義了普通函數(shù)：getName和箭頭函數(shù)getName1，接下來(lái)我們來(lái)調(diào)用一下：

console.log(obj.getName())

console.log(obj.getName1())

這里再再再給大家默想3s輸出什么？

bangbangbang公布答案：

為什么？

出現(xiàn)問(wèn)題的原因是this指向window對(duì)象，這和使用箭頭函數(shù)在對(duì)象中定義方法十分類似。

3.構(gòu)造函數(shù)也不行！

我們又又又定義了普通的構(gòu)造函數(shù)：Foo和箭頭函數(shù)Foo1，接下來(lái)我們來(lái)調(diào)用一下：

functionFoo(name,sex){

=name

this.sex=sex

constFoo1=(name,sex)={

=name

this.sex=sex

console.log('普通的構(gòu)造函數(shù)：',newFoo('張三','男'))

console.log('箭頭函數(shù)：',newFoo1('張三','男'))

不僅不行，還報(bào)錯(cuò)了呢！

為什么？

構(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。因此不能使用箭頭作為構(gòu)造函數(shù)，也就不能通過(guò)new操作符來(lái)調(diào)用箭頭函數(shù)。

4.動(dòng)態(tài)上下文中的回調(diào)函數(shù)

比如，我們需要給一個(gè)按鈕添加點(diǎn)擊事件：

constbtn1=document.getElementById('btn1')

btn1.addEventListener('click',()={

this.innerHTML='clicked'

如果我們?cè)诨卣{(diào)中不需要使用到this，那就啥問(wèn)題也沒(méi)有，但是！使用到了this，那么問(wèn)題就大大的了！

為什么呢？

箭頭函數(shù)的this指向的是他的父作用域（這里就指向了window），而不是指向這個(gè)button。這時(shí)候我們需要使用普通函數(shù)才可以。

5.Vue生命周期和method中也不能使用箭頭函數(shù)

為什么不行呢？

Vue本質(zhì)上是一個(gè)對(duì)象，我們說(shuō)過(guò)對(duì)象方法中，不適用箭頭函數(shù)。他的本質(zhì)上的和對(duì)象方法中，不適用箭頭函數(shù)是一樣的。

那么我有一個(gè)問(wèn)題：Vue不行，作為大熱框架之一的react行嗎？

回答是：react行

因?yàn)閂ue組件本質(zhì)上是一個(gè)JS對(duì)象；React組件（非Hooks）他本質(zhì)上是一個(gè)ES6的class

不信的話我們測(cè)試一下就知道了

classMan{

constructor(name,city){

=name

this.city=city

getN