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

1、前言

首先看下直觀的區別

// 箭頭函數 
    let fun = () => {
        console.log('lalalala');
    }
    
    // 普通函數 
    function fun() {
        console.log('lalla');
    }

2、定義

首先我認爲箭頭函數是匿名函數，不能做爲構造函數，不能使用new
而後借鑑阮一峯老師的es6教程裏第七章（函數擴展）裏面的第五小節箭頭函數來看看他的定義

箭頭函數有幾個使用注意點。

• 函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。
• 不能夠看成構造函數，也就是說，不可使用new命令，不然會拋出一個錯誤。
• 不可使用arguments對象，該對象在函數體內不存在。若是要用，能夠用 rest 參數代替。
• 不可使用yield命令，所以箭頭函數不能用做 Generator 函數。

上面四點中，第一點尤爲值得注意。this對象的指向是可變的，可是在箭頭函數中，它是固定的。

把動態this轉換爲靜態this

• 長期以來，JavaScript 語言的this對象一直是一個使人頭痛的問題，在對象方法中使用this，必須很是當心。箭頭函數」綁定」this，很大程度上解決了這個困擾。
• 箭頭函數可讓this指向固定化，這種特性頗有利於封裝回調函數。

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

總結

• 箭頭函數的 this 永遠指向其上下文的 this ，任何方法都改變不了其指向，如 call() , bind() , apply()
• 普通函數的this指向調用它的那個對象