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

时间：2020-12-29 00:41:13

前言

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

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

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

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(); // undefined
new 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)​​

往期回顾：

最后：

  • 欢迎关注 『前端进阶圈』 公众号 ，一起探索学习前端技术......
  • 公众号回复 加群​ 或 扫码, 即可加入前端交流学习群，长期交流学习......


标签：

相关文章