前言

谈到箭头函数，很多同学第一反应就是该函数没有自己的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]