JS中不應(yīng)該使用箭頭函數(shù)的四種情況詳解
箭頭函數(shù)給我們的工作帶來(lái)了極大的方便,但是它們有什么缺點(diǎn)呢?我們應(yīng)該一直使用箭頭函數(shù)嗎?我們應(yīng)該在哪些場(chǎng)景中停止使用箭頭函數(shù)?
現(xiàn)在,我們開始吧。
箭頭函數(shù)的一些缺點(diǎn)
1、不支持參數(shù)對(duì)象
在箭頭函數(shù)中,我們不能像在普通函數(shù)中那樣使用 arguments 對(duì)象。
const fn1 = () => { console.log('arguments', arguments) } fn1('fatfish', 'medium') function fn2(){ console.log('arguments', arguments) } fn2('fatfish', 'medium')
可以看到,fn1箭頭函數(shù)報(bào)錯(cuò),但是fn2可以正常讀取arguments對(duì)象。
我們?nèi)绾尾拍茉诩^函數(shù)中獲取所有傳遞給函數(shù)的參數(shù)?
是的,沒錯(cuò),你可以使用Spread Operator來(lái)解決它。
const fn3 = (...values) => { console.log('values', values) } fn3('fatfish', 'medium')
2、無(wú)法通過(guò)apply、call、bind來(lái)改變this指針
我相信你可以很容易地知道下面的代碼會(huì)輸出什么。
const fn1 = () => { console.log('this-fn1', this) } fn1() function fn2(){ console.log('this-fn2', this) } fn2()
{ name: 'fatfish' }
我們希望 fn1 和 fn2 都打印對(duì)象,我們應(yīng)該怎么做?
代碼:
const thisObj = { name: 'fatfish' } const fn1 = () => { console.log('this-fn1', this) } fn1.call(thisObj) function fn2(){ console.log('this-fn2', this) } fn2.call(thisObj)
因?yàn)榧^函數(shù)在定義的時(shí)候就決定了它的this指向誰(shuí),所以沒有辦法用fn1.call(thisObj)再次改變它。
什么時(shí)候不能使用箭頭功能
箭頭函數(shù)不是萬(wàn)能的,至少有 4 種情況我們不應(yīng)該使用它們。
1、請(qǐng)不要在構(gòu)造函數(shù)中使用箭頭函數(shù)
function Person (name, age) { this.name = name this.age = age } const Person2 = (name, sex) => { this.name = name this.sex = sex } console.log('Person', new Person('fatfish', 100)) console.log('Person2', new Person2('fatfish', 100))
為什么 new Person2 會(huì)拋出錯(cuò)誤
因?yàn)闃?gòu)造函數(shù)通過(guò) new 關(guān)鍵字生成一個(gè)對(duì)象實(shí)例。生成對(duì)象實(shí)例的過(guò)程也是通過(guò)構(gòu)造函數(shù)將this綁定到實(shí)例的過(guò)程。
但是箭頭函數(shù)沒有自己的this,所以不能作為構(gòu)造函數(shù)使用,也不能通過(guò)new操作符調(diào)用。
2、請(qǐng)不要在點(diǎn)擊事件中操作this
我們經(jīng)常在 click 事件中通過(guò) this 讀取元素本身。
const $body = document.body $body.addEventListener('click', function () { // this and $body elements are equivalent this.innerHTML = 'fatfish' })
但是如果你使用箭頭函數(shù)給 DOM 元素添加回調(diào),這將等同于全局對(duì)象窗口。
const $body = document.body $body.addEventListener('click', () => { this.innerHTML = 'fatfish' })
3、請(qǐng)不要在對(duì)象的方法中使用箭頭函數(shù)。
const obj = { name: 'fatfish', getName () { return this.name }, getName2: () => { return this.name } } console.log('getName', obj.getName()) console.log('getName2', obj.getName2())
你知道這段代碼會(huì)輸出什么嗎?
是的,getName2方法不會(huì)打印“fatfish”,因?yàn)榇藭r(shí)this和window是等價(jià)的,不等于obj。
4、請(qǐng)不要在原型鏈中使用箭頭函數(shù)
const Person = function (name) { this.name = name } Person.prototype.showName = function () { console.log('showName', this, this.name) } Person.prototype.showName2 = () => { console.log('showName2', this, this.name) } const p1 = new Person('fatfish', 100) p1.showName() p1.showName2()
到此這篇關(guān)于JS中不應(yīng)該使用箭頭函數(shù)的四種情況詳解的文章就介紹到這了,更多相關(guān)JS箭頭函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解template標(biāo)簽用法(含vue中的用法總結(jié))
這篇文章主要介紹了template標(biāo)簽用法(含vue中的用法總結(jié)),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2021-01-01JavaScript實(shí)現(xiàn)聯(lián)動(dòng)菜單特效
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)聯(lián)動(dòng)菜單特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01JavaScript實(shí)現(xiàn)簡(jiǎn)單進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單進(jìn)度條效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03Ajax實(shí)現(xiàn)郵箱驗(yàn)證實(shí)例代碼
這篇文章介紹了Ajax實(shí)現(xiàn)郵箱驗(yàn)證的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-04-04JS實(shí)現(xiàn)同一DOM元素上onClick事件與onDblClick事件并存的解決方法
這篇文章主要介紹了JS實(shí)現(xiàn)同一DOM元素上onClick事件與onDblClick事件并存的解決方法,結(jié)合實(shí)例形式分析了javascript通過(guò)針對(duì)單擊onclick事件增加定時(shí)器進(jìn)行onClick事件與onDblClick事件的區(qū)別判定操作,需要的朋友可以參考下2018-06-06ESC之ESC.wsf可以實(shí)現(xiàn)javascript的代碼壓縮附使用方法
可以對(duì)javascript的大小進(jìn)行壓縮。使javascript的加載速度變快。2007-05-05QRCode.js二維碼生成并能長(zhǎng)按識(shí)別
這篇文章主要為大家詳細(xì)介紹了QRCode.js二維碼生成并能長(zhǎng)按識(shí)別,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-10-10