JavaScript箭头函数与普通函数

命中。

已于 2022-03-20 17:29:59 修改

阅读量202

点赞数

分类专栏： javascript 文章标签： javascript

于 2022-03-20 17:08:56 首次发布

本文链接：https://blog.csdn.net/YANGMENGZHENG/article/details/123616625

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一、二者写法上的区别

二、this指向问题

三、总结及扩展

一、二者写法上的区别
let chicken = ['we','web','hello']
let chicken_normal = chicken.map(function(item){
return item+='sd';
});
let chicken_arrow = chicken.map((item=>{
return item+='sd'
}));
console.log(chicken_normal);
console.log(chicken_arrow)

这里并不能看箭头函数的好处，实际上只有一个参数的时候可以不给参数添加括号，而且只有一个表达式的时候可以不添加大括号，箭头函数就睡直接返回处理结果。即：

let chicken_arrow = chicken.map(item=> item+='sd');
可以看出函数里面表达式越少，箭头函数的表达就越简单明了，但是不能为箭头函数命名，因为箭头函数是函数表达式而且是匿名的。而普通函数可以是函数表达式也可以是函数声明。

因为箭头函数是匿名函数不是构造函数，所以他不能new一个对象并且没有原型。

二、this指向问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p class="normalp"></p>
<p class="arrowp"></p>
<script>
const normalp = document.querySelector('.normalp')
const arrowp = document.querySelector('.arrowp')

let normal = {
bibi:'哔哔',
biubiu:function(){
setTimeout(function(){
normalp.innerHTML = '普通函数：'+this.bibi;
} ,1000)
}
}
let arrow = {
bibi:'哔哔',
biubiu:function(){
setTimeout(()=>{
arrowp.innerHTML = '箭头函数：'+this.bibi;
} ,1000)
}
}
normal.biubiu();
arrow.biubiu();
</script>
</body>
</html>

命中。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript箭头函数与普通函数

目录一、二者写法上的区别二、this指向问题三、总结及扩展一、二者写法上的区别let chicken = ['we','web','hello']let chicken_normal = chicken.map(function(item){ return item+='sd';});let chicken_arrow = chicken.map((item=>{ return item+='sd'}));console.log(chicken_norm...
复制链接

扫一扫