箭頭函數和普通函數的區別

時間 2021-02-24

標籤 git github 面試數組 app 函數 this prototype rest code 欄目 Git 简体版

原文原文鏈接

前天在阿里淘寶的電話面試中被問到箭頭函數和普通函數的區別，沒能回答全面，現進行總結以下：git

ES6標準新增了一種新的函數：Arrow Function（箭頭函數），爲何叫Arrow Function？由於它的定義用的就是一個箭頭，那麼，它和普通函數有哪些不一樣呢？github

箭頭函數的特色

箭頭函數至關於匿名函數，而且簡化了函數定義。箭頭函數有兩種格式，一種只包含一個表達式，連{ ... }和return都省略掉了。還有一種能夠包含多條語句，這時候就不能省略{ ... }和return。面試

相比普通函數，箭頭函數有更簡潔的語法
箭頭函數不綁定this，會捕獲其所在的上下文的this值，做爲本身的this值

函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。

把動態this轉換爲靜態this：長期以來，JavaScript 語言的this對象一直是一個使人頭痛的問題，在對象方法中使用this，必須很是當心。箭頭函數」綁定」this，很大程度上解決了這個困擾。

箭頭函數可讓this指向固定化，這種特性頗有利於封裝回調函數。

原理: this指向的固定化，並非由於箭頭函數內部有綁定this的機制，實際緣由是箭頭函數根本沒有本身的this，致使內部的this就是外層代碼塊的this。正是由於它沒有this，因此也就不能用做構造函數。

箭頭函數是匿名函數，不能做爲構造函數，不可使用new命令，不然會拋出一個錯誤。因此箭頭函數也不具備new.target。

緣由：構造函數的new都作了些什麼？簡單來講，分爲四步

JS內部首先會先生成一個對象；
再把函數中的this指向該對象；
而後執行構造函數中的語句；
最終返回該對象實例。
箭頭函數不綁定arguments，取而代之用rest參數...解決；因此箭頭函數也沒有arguments.callee和arguments.caller

不可使用arguments對象，該對象在函數體內不存在。若是要用，能夠用 rest 參數代替。想要在箭頭函數中以相似數組的形式取得全部參數，能夠利用展開運算符來接收參數，好比：

const testFunc = (...args)=>{

console.log(args) //數組形式輸出參數

}

在 ECMAScript 6 以前的函數聲明中，它們的參數都是「簡單參數類型」的。在 ECMAScript 6 以後，凡是在參數聲明中使用了缺省參數、剩餘參數和模板參數之一的，都再也不是「簡單的」（non-simple parameters）。
在使用傳統的簡單參數時，只須要將調用該參數時傳入的實際參數與參數對象（arguments）綁定就能夠了；而使用「非簡單參數」時，須要經過「初始器賦值」來完成名字與值的綁定。數組

兩種綁定模式的區別在於：一般將實際參數與參數對象綁定時，只須要映射兩個數組的下標便可，而「初始器賦值」須要經過名字來索引值（以實現綁定），所以一旦出現「重名參數」就沒法處理了。app

使用call()、apply()和bind()調用，對 this 沒有什麼影響

因爲 this 已經在詞法層面完成了綁定，經過 call()、 apply()、bind() 方法調用一個函數時，只傳入了一個參數，對 this 並無什麼影響

箭頭函數沒有原型屬性prototype
不能簡單返回對象字面量

若是要直接返回對象時須要用小括號包起來，由於大括號被佔用解釋爲代碼塊了

不能使用yield關鍵字，所以箭頭函數不能用做 Generator 函數。
箭頭函數括號後面不能換行；
箭頭函數不具備super。

箭頭函數的ES5實現（Babel轉換）

轉換前:函數

// ES6

const  obj = {

    getArrow() {

        return () => {

            console.log(this === obj);

        };
    }
}

轉換後:this

// ES5，由 Babel 轉譯

var  obj = {
    getArrow:  function  getArrow() {
        var  _this = this;
        return  function () {
            console.log(_this === obj);
        };
    }
};