姚利锋 | 博客

前言

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

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

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

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

没有参数时，写一个空括号即可
只有一个参数时，可省去参数的括号
有多个参数时，用逗号分割
函数体只有一句时，可省去大括号
如果函数体不需要返回值，且只有一句话，在这个语句前加一个 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 关键字

文章特殊字符描述：

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

往期回顾：

最后：

欢迎关注『非同质前端札记』https://mp.weixin.qq.com/s?__biz=MzkyOTI2MzE0MQ==&mid=2247485576&idx=1&sn=5ddfe93f427f05f5d126dead859d0dc8&chksm=c20d73c2f57afad4bbea380dfa1bcc15367a4cc06bf5dd0603100e8bd7bb317009fa65442cdb&token=1071012447&lang=zh_CN#rd 公众号，一起探索学习前端技术......
公众号回复加群https://mp.weixin.qq.com/s?__biz=MzkyOTI2MzE0MQ==&mid=2247485576&idx=1&sn=5ddfe93f427f05f5d126dead859d0dc8&chksm=c20d73c2f57afad4bbea380dfa1bcc15367a4cc06bf5dd0603100e8bd7bb317009fa65442cdb&token=1071012447&lang=zh_CN#rd 或扫码https://mp.weixin.qq.com/s?__biz=MzkyOTI2MzE0MQ==&mid=2247485576&idx=1&sn=5ddfe93f427f05f5d126dead859d0dc8&chksm=c20d73c2f57afad4bbea380dfa1bcc15367a4cc06bf5dd0603100e8bd7bb317009fa65442cdb&token=1071012447&lang=zh_CN#rd, 即可加入前端交流学习群，长期交流学习......
公众号回复加好友https://mp.weixin.qq.com/s?__biz=MzkyOTI2MzE0MQ==&mid=2247485576&idx=1&sn=5ddfe93f427f05f5d126dead859d0dc8&chksm=c20d73c2f57afad4bbea380dfa1bcc15367a4cc06bf5dd0603100e8bd7bb317009fa65442cdb&token=1071012447&lang=zh_CN#rd，即可添加为好友

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

前言

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

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

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

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

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

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

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

7. 箭头函数没有原型 prototype

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

文章特殊字符描述：

往期回顾：

最后：