箭頭函數(shù)與普通函數(shù)的區(qū)別

要討論箭頭函數(shù)和普通函數(shù)的區(qū)別，首先來(lái)看看兩者的基本格式

普通函數(shù)和箭頭共同點(diǎn)就是圓括號(hào)和大括號(hào)，圓括號(hào)里面一般放置參數(shù)，大括號(hào)一般放置函數(shù)主體，很明顯箭頭函數(shù)不需要寫那么長(zhǎng)，舉個(gè)例子，有一個(gè)數(shù)組，使用map方法為數(shù)組的每個(gè)元素增加字符

let arr=['昨天','今天','明天']
let newarr=arr.map(function(item){
  return item+='放假'
})
console.log(newarr);

用普通函數(shù)閱讀起來(lái)的話不太友好，使用箭頭函數(shù)看起來(lái)并沒有感覺閱讀起來(lái)很流暢，實(shí)際上只有一個(gè)參數(shù)的時(shí)候我們不需要為參數(shù)添加上括號(hào)，而且只有一個(gè)表達(dá)式的時(shí)候可以步添加大括號(hào)，他們的結(jié)果是一樣的

let newarr1=arr.map((item)=>{return item += '放假'})
let newarr2=arr.map(item =>  item += '放假')

箭頭函數(shù)的理解

我們并不能為箭頭函數(shù)命名，箭頭函數(shù)是函數(shù)表達(dá)式，而且是匿名的。既然是匿名的我們經(jīng)常用new來(lái)構(gòu)造函數(shù)的實(shí)例在箭頭函數(shù)上是不行的，箭頭函數(shù)不是構(gòu)造函數(shù)，創(chuàng)建的時(shí)候并不會(huì)為箭頭函數(shù)創(chuàng)建Construct方法

在函數(shù)的內(nèi)部有個(gè)特殊對(duì)象arguments，一個(gè)類似數(shù)組的對(duì)象，但是箭頭函數(shù)沒有自己的arguments對(duì)象，匿名函數(shù)一般不用參數(shù)或者限定參數(shù)

箭頭函數(shù)里的this指向

this的指向一直讓很多人頭疼，箭頭函數(shù)被設(shè)計(jì)出來(lái)主要的原因是解決this的問題

為了查看this的指向，分別創(chuàng)建普通函數(shù)和箭頭函數(shù)的表達(dá)式，并且為兩個(gè)按鈕注冊(cè)點(diǎn)擊事件，鼠標(biāo)點(diǎn)擊按鈕就會(huì)執(zhí)行函數(shù)表達(dá)式

<button class="pt">普通函數(shù)</button>
<p class="ptP"></p>
<button class="jt">箭頭函數(shù)</button>
<p class="jtP"></p>
<script>
const pt=document.querySelector('.pt')
const ptP=document.querySelector('.ptP')
const jt=document.querySelector('.jt')
const jtP=document.querySelector('.jtP')
let ptFunction=function(){
  ptP.innerHTML='普通函數(shù)：'+this
}
let jtFunction=()=>{
  jtP.innerHTML='箭頭函數(shù)：'+this
}
pt.addEventListener('click',ptFunction,false)
jt.addEventListener('click',jtFunction,false)
</script>

點(diǎn)擊第一個(gè)按鈕的時(shí)候，這個(gè)this是綁定按鈕的，在普通函數(shù)里this的值是動(dòng)態(tài)的，定義this的時(shí)候這個(gè)值不會(huì)被馬上確認(rèn)，而是會(huì)在執(zhí)行的時(shí)候才確認(rèn)，所以this值指向按鈕對(duì)象

點(diǎn)擊第二個(gè)按鈕的時(shí)候顯示window，也就是說this的值沒有動(dòng)態(tài)生成，而是在定義的時(shí)候就確認(rèn)了，第二個(gè)按鈕綁定的函數(shù)是屬于window的，this自然指向window，在箭頭函數(shù)可以避免查找代碼時(shí)因找this指向的煩惱

為了this的硬綁定我們經(jīng)常會(huì)用到call，apply，bind三種方法，下面例子一個(gè)對(duì)象里面有兩個(gè)屬性，一個(gè)字符串，一個(gè)數(shù)組和一個(gè)方法，方法主要對(duì)數(shù)組進(jìn)行map方法的遍歷，為每一個(gè)元素添加對(duì)象的字符串

const arr=document.querySelector('.arr')//p標(biāo)簽
let calendar={
  name:'2022-10-',
  lately:['10-25','10-26','10-27'],
  add:function(){
    this.lately.map(function(item){
      arr.innerHTML+=this.name+item+'<br>'
    })
  }
} 
calendar.add()

第一個(gè)指向是正確的，因?yàn)檫@個(gè)this是直接在add函數(shù)里執(zhí)行的，但是第二個(gè)this指向不是我們想要的，于是使用call，apply或者bind方法就可以解決了

add:function(){
    this.lately.map(function(item){
        arr.innerHTML+=this.name+item+'<br>'
    }.bind(this))
}
calendar.add()

但是用箭頭函數(shù)就不用那么麻煩，僅僅把map方法里的function改為箭頭函數(shù)就簡(jiǎn)單解決了問題，還有箭頭函數(shù)不能通過call，apply，bind來(lái)改變this的值

add:function(){
    this.lately.map(item => arr.innerHTML+=this.name+item+'<br>')
}

總結(jié)

以上就是JavaScript箭頭函數(shù)與普通函數(shù)的區(qū)別示例詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript箭頭函數(shù)普通函數(shù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論