前端面試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 函數。

後記

最近由於準備面試，因此打算整理下知識點，方便進行知識整理鞏固，文中若有不正確的地方，煩請溫柔的批評指正～