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

前言

欢迎关注 『前端进阶圈』 公众号 ，一起探索学习前端技术......

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

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

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)
   

往期回顾：

• 热点面试题：浏览器和Node的宏任务和微任务？
  

• 这是你理解的CSS选择器权重吗？
  

• 热点面试题：JS 中 call, apply, bind 概念、用法、区别及实现？
  

• 热点面试题： 常用位运算方法？
  

• Vue数据监听Object.definedProperty()方法的实现
  

• 热点面试题：Virtual DOM 相关问题？
  

• 热点面试题： Array中有哪些非破坏性方法？
  

• 热点面试题：协商缓存和强缓存的理解及区别？
  

最后：

• 欢迎关注 『前端进阶圈』 公众号 ，一起探索学习前端技术......

• 公众号回复 加群 或 扫码, 即可加入前端交流学习群，长期交流学习......

• 公众号回复 加好友，即可添加为好友

•