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

2022-11-07
广东
本文字数：1481 字
阅读完需：约 5 分钟

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

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

普通函数和箭头共同点就是圆括号和大括号，圆括号里面一般放置参数，大括号一般放置函数主体，很明显箭头函数不需要写那么长，举个例子，有一个数组，使用 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>')}

复制代码

总结

发布于: 刚刚阅读数: 5

原文链接:【http://xie.infoq.cn/article/14b8c4033fabf17b588500a3c】。文章转载请联系作者。

格斗家不爱在外太空沉思

关注

还未添加个人签名 2022-11-01 加入

还未添加个人简介

发布

暂无评论

创作场景

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

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

箭头函数的理解

箭头函数里的 this 指向

总结

格斗家不爱在外太空沉思

评论