开启生长之旅！这是我参与「日新方案 12 月更文应战」的第27天，点击查看活动详情

前语

谈到箭头函数，许多同学榜首反应便是该函数没有自己的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]