function 箭头函数 this（JavaScript箭头函数与普通函数的区别示例详解）

时间2025-04-29 10:10:12分类IT科技浏览7074

导读：箭头函数与普通函数的区别要讨论箭头函数和普通函数的区别，首先来看看两者的基本格式...

箭头函数与普通函数的区别

要讨论箭头函数和普通函数的区别，首先来看看两者的基本格式

普通函数和箭头共同点就是圆括号和大括号，圆括号里面一般放置参数，大括号一般放置函数主体，很明显箭头函数不需要写那么长，举个例子，有一个数组，使用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箭头函数普通函数的资料请关注本站其它相关文章！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。