姚利锋
姚利锋
☕
返回博客

发布于  2024 年 2 月 26 日，星期一

热点面试题：箭头函数与普通函数的区别？

箭头函数与普通函数的主要区别在于this的指向和语法简洁性。箭头函数没有自己的this，它会捕获其所在上下文的this值，适合用于回调函数和需要保持上下文一致性的场景。普通函数有独立的this，其值取决于调用方式，适合需要动态上下文的场景。此外，箭头函数不能作为构造函数使用，没有arguments对象，语法更简洁，适合编写简短的函数表达式。

前言

欢迎关注 『沉浸式趣谈』https://mp.weixin.qq.com/s?__biz=MzkyOTI2MzE0MQ==&mid=2247485576&idx=1&sn=5ddfe93f427f05f5d126dead859d0dc8&chksm=c20d73c2f57afad4bbea380dfa1bcc15367a4cc06bf5dd0603100e8bd7bb317009fa65442cdb&token=1071012447&lang=zh_CN#rd 公众号 ，一起探索学习前端技术......

前端小菜鸡一枚，分享的文章纯属个人见解，若有不正确或可待讨论点可随意评论，与各位同学一起学习~

箭头函数和普通函数的区别？

1. 箭头函数比普通函数语法更加简洁：

  1. 没有参数时，写一个空括号即可
  2. 只有一个参数时，可省去参数的括号
  3. 有多个参数时，用逗号分割
  4. 函数体只有一句时，可省去大括号
  5. 如果函数体不需要返回值，且只有一句话，在这个语句前加一个 void 关键字即可，最常见的就是调用一个函数。let fn = () => void doesNotRetruen();

2. 箭头函数没有自己的 this

3. 箭头函数继承来的 this 指向永远不会改变

var id = "GLOBAL";var obj = {    id: "OBJ",    a: function () {        console.log(this.id);    },    b: () => {        console.log(this.id);    },};obj.a(); // 'OBJ'obj.b(); // 'GLOBAL'new obj.a(); // undefinednew obj.b(); // Uncaught TypeError: obj.b is not a constructor

  
复制代码

4. call, apply, bind 等方法不能改变箭头函数中 this 指向

var id = "Global";let fun1 = () => {    console.log(this.id);};fun1(); // 'Global'fun1.call({ id: "Obj" }); // 'Global'fun1.apply({ id: "Obj" }); // 'Global'fun1.bind({ id: "Obj" })(); // 'Global'

  
复制代码

5. 箭头函数不能作为构造函数使用：在构造函数 new 的步骤中，有一步是将函数中的 this 指向新的对象，在箭头函数中，因为没有自己的 this，且 this 指向外层的执行环境，且不能改变指向，所以不能当成构造函数使用

6. 箭头函数没有自己的 arguments

7. 箭头函数没有原型 prototype

8. 箭头函数不能用于语法糖 Generator，不能使用 yeild 关键字

文章特殊字符描述：

  1. 问题标注 Q:(question)
  2. 答案标注 R:(result)
  3. 注意事项标准：A:(attention matters)
  4. 详情描述标注：D:(detail info)
  5. 总结标注：S:(summary)
  6. 分析标注：Ana:(analysis)
  7. 提示标注：T:(tips)

往期回顾：

最后：

# JavaScript# 算法# 设计模式
返回博客