# 普通函式和箭頭函式的區別

liwb發表於2018-07-04
函式

普通函式和箭頭函式

寫在前面

函式（Function）是 JavaScript 裡的‘一等公民’。是由稱為函式體的一系列語句組成。可以當做入參，出參（返回值）使用。和物件一樣，有自己的屬性和方法。區別之處在於可以被呼叫。資料型別是 function（用 typeof 判斷），用 Object.prototype.toString.call() 判斷是 [object Function]。如果沒有使用 retrun 語句，則預設返回 undefined。反之則函式必須使用 return 語句來指定一個要返回的值。(使用 new 關鍵字呼叫一個建構函式除外，不再是例項化一個物件)。函式執行時，this 關鍵字並不會指向正在執行的函式本身，而是指向呼叫該函式的物件。 函式表示式不會提升，因此在使用之前必須先宣告。和用 var 宣告變數不一樣。

產生原因

箭頭函式的產生原因就是在於 this 關鍵字指向問題。它很容易讓人產生疑惑，尤其是當函式呼叫層級比較多的時候。和傳統函式定義相比，語法也相對簡潔。並且沒有自己的this，arguments，super或 new.target。這些函式表示式更適用於那些本來需要匿名函式的地方，並且它們不能用作建構函式。箭頭函式 this 指向的固定化，並不是因為函式內部做了處理，而是因為箭頭函式在建立的時候根本就沒有自己的 this。

使用箭頭函式需要注意的點

1，函式體內的 this 物件，是定義時所在物件，而不是呼叫該函式的物件。 2，正因為自己本身沒有 this 物件，因此不可以用作建構函式，不能用 call()，apply()，bind()這些方法去改變 this 的指向。 3，不繫結 arguments 物件，可以使用 rest 引數來解決。 4，嚴格模式（use strict）中，指定的與 this 相關的規則都將被忽略。

var aaa = () => {
    'use strict';
    console.log(this);
    // window
}

var bbb = function() {
    'use strict';
    console.log(this);
    // undefined
}
複製程式碼

5，不能使用 new 操作符，否則會報錯

var Func = () => {};
var func = new Func();
// TypeError: Func is not a constructor
複製程式碼

6，沒有 prototype 屬性

var Func = () => {};
console.log(Func.prototype);
// undefined
複製程式碼

7，不能用作生成器。 yield 關鍵字通常不能在箭頭函式中使用（除非是巢狀在允許使用的函式內）。 8，箭頭函式的簡寫，可以直接省略 return，在塊體中，必須使用明確的 return 語句。如果需要返回物件字面量的話，記得用圓括號包起來。

var func = () => ({num: 1});
複製程式碼

寫在後面

拋一個大佬留下的問題，有箭頭函式的 IIEF:

(() => {
console.log('執行看看');
// 執行看看
})(); 
複製程式碼

這個是可以的，但是下面的寫法就會報錯

(() => {
console.log('執行看看');
// Uncaught SyntaxError: Unexpected token (
}());

複製程式碼

有知道原因的小夥伴嗎？

相關文章