本文详细解析JavaScript中箭头函数与普通函数的核心区别。重点阐述箭头函数在语法简洁性、this静态绑定机制、构造函数限制以及arguments对象缺失等方面的特性，并通过代码示例说明其在解决this指向问题及简化回调函数时的优势。
箭头函数与普通函数的区别
探讨箭头函数与普通函数的差异，首先需明确两者的基本语法格式
普通函数与箭头函数的共同点在于圆括号和大括号，圆括号内通常放置参数，大括号内放置函数主体。显然，箭头函数更为简洁。例如，有一个数组，使用map方法为数组的每个元素增加字符
let arr=['昨天','今天','明天']
let newarr=arr.map(function(item){
return item+='放假'
})
console.log(newarr);
使用普通函数阅读起来不太友好，而箭头函数看起来更为流畅。实际上，当只有一个参数时，无需为参数添加括号；当只有一个表达式时，也可省略大括号，两者的结果是一致的
let newarr1=arr.map((item)=>{return item += '放假'})
let newarr2=arr.map(item => item += '放假')
箭头函数的理解
我们不能为箭头函数命名，因为它是函数表达式且是匿名的。由于是匿名的，我们通常不能使用new来构造箭头函数的实例，因为箭头函数不是构造函数，创建时不会为其创建Construct方法
在普通函数内部存在一个特殊对象arguments，它是一个类似数组的对象，但箭头函数没有自己的arguments对象，匿名函数通常不使用参数或限定参数
箭头函数里的this指向
this的指向一直让很多人头疼，箭头函数被设计出来的主要原因就是为了解决this的问题
为了查看this的指向，分别创建普通函数和箭头函数的表达式，并为两个按钮注册点击事件，鼠标点击按钮就会执行函数表达式
<button class="pt">普通函数</button>
<p class="ptP"></p>
<button class="jt">箭头函数</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='普通函数：'+this
}
let jtFunction=()=>{
jtP.innerHTML='箭头函数：'+this
}
pt.addEventListener('click',ptFunction,false)
jt.addEventListener('click',jtFunction,false)
</script>
点击第一个按钮时，这个this是绑定按钮的，在普通函数里this的值是动态的，定义this的时候这个值不会被马上确认，而是在执行的时候才确认，所以this值指向按钮对象
点击第二个按钮时显示window，也就是说this的值没有动态生成，而是在定义的时候就确认了，第二个按钮绑定的函数是属于window的，this自然指向window，在箭头函数可以避免查找代码时因找this指向的烦恼
为了实现this的硬绑定，我们经常会用到call，apply，bind三种方法。下面例子一个对象里面有两个属性，一个字符串，一个数组和一个方法，方法主要对数组进行map方法的遍历，为每一个元素添加对象的字符串
const arr=document.querySelector('.arr')//p标签
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函数里执行的，但是第二个this指向不是我们想要的，于是使用call，apply或者bind方法就可以解决了
add:function(){
this.lately.map(function(item){
arr.innerHTML+=this.name+item+'<br>'
}.bind(this))
}
calendar.add()
但是用箭头函数就不用那么麻烦，仅仅把map方法里的function改为箭头函数就简单解决了问题，还有箭头函数不能通过call，apply，bind来改变this的值
add:function(){
this.lately.map(item => arr.innerHTML+=this.name+item+'<br>')
}
总结
以上就是JavaScript箭头函数与普通函数的区别示例详解的详细内容，更多关于JavaScript箭头函数普通函数的资料请关注本站其它相关文章！