欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS中不應(yīng)該使用箭頭函數(shù)的四種情況詳解

 更新時(shí)間:2022年07月28日 14:13:21   作者:web前端開發(fā)  
箭頭函數(shù)給我們的工作帶來了極大的方便,但是它們有什么缺點(diǎn)呢?我們應(yīng)該一直使用箭頭函數(shù)嗎?我們應(yīng)該在哪些場景中停止使用箭頭函數(shù)?本文就來為大家詳細(xì)講講

箭頭函數(shù)給我們的工作帶來了極大的方便,但是它們有什么缺點(diǎn)呢?我們應(yīng)該一直使用箭頭函數(shù)嗎?我們應(yīng)該在哪些場景中停止使用箭頭函數(shù)?

現(xiàn)在,我們開始吧。

箭頭函數(shù)的一些缺點(diǎn)

1、不支持參數(shù)對象

在箭頭函數(shù)中,我們不能像在普通函數(shù)中那樣使用 arguments 對象。

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對象。

我們?nèi)绾尾拍茉诩^函數(shù)中獲取所有傳遞給函數(shù)的參數(shù)?

是的,沒錯(cuò),你可以使用Spread Operator來解決它。

const fn3 = (...values) => {
 console.log('values', values)
}
fn3('fatfish', 'medium')

2、無法通過apply、call、bind來改變this指針

我相信你可以很容易地知道下面的代碼會(huì)輸出什么。

const fn1 = () => {
 console.log('this-fn1', this)
}
fn1()
function fn2(){
 console.log('this-fn2', this)
}
fn2()

{
 name: 'fatfish'
}

我們希望 fn1 和 fn2 都打印對象,我們應(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指向誰,所以沒有辦法用fn1.call(thisObj)再次改變它。

什么時(shí)候不能使用箭頭功能

箭頭函數(shù)不是萬能的,至少有 4 種情況我們不應(yīng)該使用它們。

1、請不要在構(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ù)通過 new 關(guān)鍵字生成一個(gè)對象實(shí)例。生成對象實(shí)例的過程也是通過構(gòu)造函數(shù)將this綁定到實(shí)例的過程。

但是箭頭函數(shù)沒有自己的this,所以不能作為構(gòu)造函數(shù)使用,也不能通過new操作符調(diào)用。

2、請不要在點(diǎn)擊事件中操作this

我們經(jīng)常在 click 事件中通過 this 讀取元素本身。

const $body = document.body
$body.addEventListener('click', function () {
 // this and $body elements are equivalent
 this.innerHTML = 'fatfish'
})

但是如果你使用箭頭函數(shù)給 DOM 元素添加回調(diào),這將等同于全局對象窗口。

const $body = document.body
$body.addEventListener('click', () => {
 this.innerHTML = 'fatfish'
})

3、請不要在對象的方法中使用箭頭函數(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、請不要在原型鏈中使用箭頭函數(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 詳解template標(biāo)簽用法(含vue中的用法總結(jié))

    詳解template標(biāo)簽用法(含vue中的用法總結(jié))

    這篇文章主要介紹了template標(biāo)簽用法(含vue中的用法總結(jié)),本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2021-01-01
  • JavaScript實(shí)現(xiàn)聯(lián)動(dòng)菜單特效

    JavaScript實(shí)現(xiàn)聯(lián)動(dòng)菜單特效

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)聯(lián)動(dòng)菜單特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-01-01
  • JavaScript實(shí)現(xiàn)簡單進(jìn)度條效果

    JavaScript實(shí)現(xiàn)簡單進(jìn)度條效果

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單進(jìn)度條效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-03-03
  • 重新理解JavaScript的六種繼承方式

    重新理解JavaScript的六種繼承方式

    通過本文帶領(lǐng)大家一起重新理解JavaScript的六種繼承方式,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2017-03-03
  • Ajax實(shí)現(xiàn)郵箱驗(yàn)證實(shí)例代碼

    Ajax實(shí)現(xiàn)郵箱驗(yàn)證實(shí)例代碼

    這篇文章介紹了Ajax實(shí)現(xiàn)郵箱驗(yàn)證的方法,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-04-04
  • JS實(shí)現(xiàn)同一DOM元素上onClick事件與onDblClick事件并存的解決方法

    JS實(shí)現(xiàn)同一DOM元素上onClick事件與onDblClick事件并存的解決方法

    這篇文章主要介紹了JS實(shí)現(xiàn)同一DOM元素上onClick事件與onDblClick事件并存的解決方法,結(jié)合實(shí)例形式分析了javascript通過針對單擊onclick事件增加定時(shí)器進(jìn)行onClick事件與onDblClick事件的區(qū)別判定操作,需要的朋友可以參考下
    2018-06-06
  • ESC之ESC.wsf可以實(shí)現(xiàn)javascript的代碼壓縮附使用方法

    ESC之ESC.wsf可以實(shí)現(xiàn)javascript的代碼壓縮附使用方法

    可以對javascript的大小進(jìn)行壓縮。使javascript的加載速度變快。
    2007-05-05
  • JS+CSS繪制棋盤格的示例代碼

    JS+CSS繪制棋盤格的示例代碼

    在這篇文章中,將為大家展示如何使用css Flex-box和一些JavaScript來設(shè)計(jì)棋盤。文中的示例代碼講解詳細(xì),感興趣的可以了解一下
    2022-05-05
  • iframe的基本介紹與使用

    iframe的基本介紹與使用

    本文將給大家詳細(xì)介紹一下iframe的基本介紹與使用,iframe(內(nèi)嵌框架)是 HTML 中一種用于將一個(gè)網(wǎng)頁嵌入到另一個(gè)網(wǎng)頁中的標(biāo)簽,它可以在一個(gè)頁面中顯示來自其他頁面的內(nèi)容,需要的朋友可以參考下
    2024-02-02
  • QRCode.js二維碼生成并能長按識(shí)別

    QRCode.js二維碼生成并能長按識(shí)別

    這篇文章主要為大家詳細(xì)介紹了QRCode.js二維碼生成并能長按識(shí)別,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-10-10

最新評論