前端面试ES6系列：箭头函数和普通函数的区别

基本用法

箭头函数

let sum = (a, b) => {
    return a + b;
}
复制代码

普通函数

var sum = function (a, b){
    return a + b;
}
复制代码

区别

以前看阮一峰前辈 es6 文章里提过这个知识点，可是昨天面试被问到了，只回答出了this，因此赶忙抽空整理下知识点，查缺补漏，下面开始正文。

一、 this指向问题

这一点要特别注意，也是面试的时候面试官最关注的。 箭头函数的this指向的是父级做用域的this，是经过查找做用域链来肯定 this 的值也就是说，看的是上下文的this，指向的是定义它的对象，而不是使用时所在的对象；普通函数指向的是它的直接调用者。

（1）普通函数的 this 指向能够参考阮一峰的js的this用法 当听到你说 this 的问题，面试官可能会接下去问你 this 的一些拓展问题了，如何改变 this 指向，好比bind方法什么的，而后还可能让你实现 bind，总之真的不少能够问的。
（2）箭头函数的this

let obj = {
        a: 1,
        b: () => {
            console.log(this.a); // undefined
        },
        c: function() {
            console.log(this.a); // 1 
        },
    };
obj.b();
obj.c();
复制代码

箭头函数没有this，它的this是继承来的，默认指向定义它的时候的对象，就是咱们说的宿主对象，而不是执行它的对象。这里经过obj.b()，此时this指向的window对象，上面没有a，因此返回undefined。经过obj.c(),this指向的是它的直接调用者，就是obj，因此返回1。

var obj = {
        a:1, 
        print(){
            setTimeout(
               function(){console.log(this.a);},
               1000
           );
        }
    };
obj.print();//undefined
复制代码

定时器中的函数因为没有默认宿主对象，setTimeout中的function未被任何对象调用，它的this指向默认是window对象，天然输出undefined。

var obj = {
        a:1,
        print(){
            setTimeout(
               () => { console.log(this.a); },
               1000
            );
        }
    };
    obj.print();// 1
复制代码

箭头函数的this指的是定义它的对象，因此this指向的是obj对象，因此obj.a确实应该输出1。 ⚠️最后注意，咱们前文一直都强调箭头函数没有 this，因此呢，咱们不能够用 call()、apply()、bind() 这些方法去改变this的指向。

二、不能够被看成构造函数

不能被看成构造函数来使用，经过new命令来做为构造函数会报错，这里没有构建原型的说法，不存在prototype这个属性，也不能经过super访问原型的属性，并且new target也是不能用的。

三、不可使用arguments对象，该对象在函数体内不存在，若是要用就用rest参数替代。

function f1(arr) {
        console.log(arguments);
    }
f1([1,2,3]); // [1,2,3]
    
let f2 = (arr) => {
    console.log(arguments);
}
f2([1,3,9]); //Uncaught ReferenceError: arguments is not defined

let f3 = (...arr) => {
  console.log(arr);
}
f3([1,4,5]); // [1,4,5]
复制代码

四、不可使用yield命令，所以箭头函数不能用做 Generator 函数。

后记

最近由于准备面试，因此打算整理下知识点，方便进行知识整理巩固，文中若有不正确的地方，烦请温柔的批评指正～