JavaScript箭头函数与普通函数

最新推荐文章于 2024-01-14 21:43:58 发布

迪卢克的现任

最新推荐文章于 2024-01-14 21:43:58 发布

阅读量262

点赞数 3

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_53644435/article/details/123534974

版权

一、二者写法上的区别

二、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>

结果如下：

当我们执行normal.biubiu();这个函数的时候我们是想获取normal对象里面的bibi属性，但是我们并没有获取到，这是因为this在普通函数里面是动态的，回调函数导致丢失this绑定，当执行栈的任务执行完毕以后才会执行回调函数，这时候执行回调函数就相当于在全局对象里面执行，也就是window，但是window里面并没有定义bibi这个属性。所以会返回undefined

但是箭头函数就可以解决这问题，可以看到箭头函数在普通函数里面，这时候this会绑定到最近一层的普通函数，this会绑定到arrow这个对象，但是如果没有这个普通函数那么this也会指向全局。

三、总结及扩展

	语法格式	new和原型	arguments	this指向	call、apply和bind
普通函数	function(){} 函数声明；函数表达式	有	有	动态	修改this值
箭头函数	()=>{} 函数表达式	没有	没有可调用的外围	一般是全局对象陪同函数包含指向上一层	不可以修改this值

语法格式

new和原型

arguments

this指向

call、apply和bind

普通函数

function(){}

函数声明；函数表达式

有

动态

修改this值

箭头函数

()=>{}

函数表达式

没有

没有可调用的外围

一般是全局对象陪同函数包含指向上一层

不可以修改this值

迪卢克的现任

关注

3
点赞
踩
0

收藏

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

语法格式 new和原型 arguments this指向 call、apply和bind普通函数 function(){}函数声明；函数表达式有有动态修改this值箭头函数 ()=>{}函数表达式没有没有可调用的外围一般是全局对象陪同函数包含指向上一层不可以修改this值
复制链接

扫一扫