除了 this 指向，你对箭头函数还了解多少
前言
谈到箭头函数，很多同学第一反应就是该函数没有自己的this，这也是前端面试时一道常见的考题，但是除了与this相关的部分，你对它的其它特征又了解多少呢？今天就和大家一起系统的学习一下箭头函数
箭头函数与普通函数的区别
一些比较直观的不同，这里简单过一下，例如外形不同，都是匿名函数这些大家都比较熟悉，这里就不展开讨论了，个人认为一下三点大家能理解好，对箭头函数的了解应该就算到位了
this 指向问题
第一点应该是大家最熟悉的一个特征了，通常也会和 this 相关的知识点联系起来，在普通函数中，this总是指向调用它的对象，如果用作构造函数，this指向创建的对象实例
而到了箭头函数这里就有些特殊了，箭头函数本身不创建this
那这时有疑问了，它本身不创建this，拿它内部的 this 是指向哪里呢？这里记住两句话
-
箭头函数中的 this 是在箭头函数定义时就决定的，而且不可修改(call, apply, bind) -
箭头函数的 this 指向定义的时候，外层第一个普通函数的 this（或者说，其声明时所在的上下文的 this）
这里要特别关注箭头函数的this是在声明时就决定的，而不是执行时，并且确定了就不会改变，这一特性我们可以用来解决很多问题
关于 call / apply 方法无效，简单举个例子
let obj = {
a: 10,
b: function(n) {
let f = (n) => n + this.a;
return f(n);
},
c: function(n) {
let f = (n) => n + this.a;
let m = {
a: 20
};
return f.call(m,n);
}
};
console.log(obj.b(1)); // 结果：11
console.log(obj.c(1)); // 结果：11
箭头函数不能new (无法作为构造函数)
我们先了解一下构造函数的new都做了些什么？
-
创建了一个空对象（{}） -
为创建的空对象添加属性 ptoto ，并指向于构造函数的原型 -
将创建的对象作为构造函数的上下文 （改变this指向） -
如果该函数没有返回对象，则返回 this
这里就引出另外一个知识点了，箭头函数没有 prototype （也就是没有原型），没法让他的实例的__proto__属性指向构造函数的prototype，所以箭头函数不能作为构造函数，否则用new调用时会报错！
let Person = (name, age) => {
this.name = name;
this.age = age;
};
// 报错
let p = new Person('dingFY', 24);
箭头函数没有没有 arguments
箭头函数没有自己的arguments对象，在箭头函数中访问arguments实际上获得的是外层局部（函数）执行环境中的值
let fn = (arr) => {
console.log(arguments);
}
fn([1,3,9]); //Uncaught ReferenceError: arguments is not defined
箭头函数不绑定arguments，取而代之用 …rest参数代替arguments对象
这里很多资料提到了另一个比较陌生的词——rest参数
Rest 就是为解决传入的参数数量不一定， rest parameter(Rest 参数) 本身就是数组，数组的相关的方法都可以用
这样看可能还有点抽象，其实也不复杂，举个例子就清楚了
// rest参数...
let fn = (...arg) => {
console.log(arg);
}
fn(3,82,32,11323); // [3, 82, 32, 11323]
文章出自：https://juejin.cn/post/7178127369100591141
作者：我的代码果然有问题
原文始发于微信公众号（前端24）：除了 this 指向，你对箭头函数还了解多少
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/234955.html
