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

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

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

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

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

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

箭頭函數(shù)的理解

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

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

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

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

為了查看this的指向，分別創(chuàng)建普通函數(shù)和箭頭函數(shù)的表達(dá)式，并且為兩個按鈕注冊點擊事件，鼠標(biāo)點擊按鈕就會執(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>

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

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

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

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()

第一個指向是正確的，因為這個this是直接在add函數(shù)里執(zhí)行的，但是第二個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ù)就簡單解決了問題，還有箭頭函數(shù)不能通過call，apply，bind來改變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ù)的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論