箭头函数与普通函数区别

最新推荐文章于 2023-09-22 18:44:27 发布

原创最新推荐文章于 2023-09-22 18:44:27 发布 · 163 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文详细介绍了箭头函数的匿名特性、this的固定行为、无arguments和不可修改this指向，以及它在实际代码中的应用场景。通过实例演示了箭头函数与普通函数的区别，适合前端开发者理解其在JavaScript中的角色。

箭头函数与普通函数区别

一、箭头函数是匿名函数，不能作为构造函数，不能使用new

在这里插入图片描述

箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式：一种只包含一个表达式，连{ … }和return都省略掉。还有一种可以包含多条语句，这时候就不能省略{ … }和return。

在这里插入图片描述

二、箭头函数内没有arguments，可以用展开运算符…解决

在这里插入图片描述

三、箭头函数的this，始终指向父级上下文（箭头函数的this取决于定义位置父级的上下文，跟使用位置没关系，普通函数this指向调用的那个对象）


var a=200;

let obj={
    a:100,
    fn:function(){   //es5 谁调用，this指向谁
        console.log(this.a);
    },
    foo:()=>{   //  es6箭头函数的this指向父级(obj)上下文。
        console.log(this.a)
    }
}

obj.fn();// 100;  
obj.foo();//200