箭頭函式與普通函式的區別？

箭頭函式是前端面試環節的乙個高頻考點，箭頭函式是es6的api，相信很多人都知道，因為它的語法比一般的函式更簡潔，所以深受大家的喜愛。這是我們在日常開發中一直使用的api，但大多數同學對它的理解還不夠，下面我們來詳細了解下箭頭函式的基本語法，以及箭頭函式與普通函式的區別。

【1.1】定義函式

定義箭頭函在數語法上要比普通函式簡潔得多，es6中允許使用箭頭=>來定義箭頭函式，箭頭函式省去了 function 關鍵字，函式的引數放在=>前面的括號中，函式體跟在=>後的花括號中。

// 箭頭函式
let fun = (name) =>  !`;
};// 普通函式
let fun = function (name)  !`;
};

【1.2】箭頭函式的引數

①如果箭頭函式沒有引數，直接寫乙個空括號即可。

②如果箭頭函式的引數只有乙個，也可以省去包裹引數的括號。

③如果箭頭函式有多個引數，將引數依次用逗號(，)分隔，包裹在括號中即可。

// 沒有引數
let fun1 = () => ;
// 只有乙個引數，可以省去引數括號
let fun2 = name =>  !`)
};// 有多個引數，逗號分隔
let fun3 = (val1, val2, val3) => ;

【1.3】箭頭函式的函式體

①如果箭頭函式的函式體只有一句**，就是簡單返回某個變數或者返回乙個簡單的js表示式，可以省去函式體的大括號。

let fun = val => val;
// 等同於
let fun = function (val) ;
let sum = (num1, num2) => num1 + num2;
// 等同於
let sum = function(num1, num2) ;

②如果箭頭函式的函式體只有一句**，就是返回乙個物件，可以像下面這樣寫：

// 用小括號包裹要返回的物件，不報錯
let gettempitem = id => ();
// 但絕不能這樣寫，會報錯，因為物件的大括號會被解釋為函式體的大括號
let gettempitem = id => ;

③如果箭頭函式的函式體只有一條語句並且不需要返回值（最常見是呼叫乙個函式），可以給這條語句前面加乙個void關鍵字

let fun = () => void doesnotreturn();

【2.1】語法更加簡潔、清晰

從上面的箭頭函式基本語法示例中可以看出，箭頭函式的定義要比普通函式定義簡潔、清晰得多，很快捷。

【2.2】箭頭函式沒有 prototype (原型)，所以箭頭函式本身沒有this

// 箭頭函式
let a = () => {};
console.log(a.prototype); // undefined
// 普通函式
function a() {};
console.log(a.prototype); //

【2.3】箭頭函式不會建立自己的this

箭頭函式沒有自己的this，箭頭函式的this指向在定義（注意：是定義時，不是呼叫時）的時候繼承自外層第乙個普通函式的this。所以，箭頭函式中 this 的指向在它被定義的時候就已經確定了，之後永遠不會改變。

let obj = 
},c: function() 
}}obj.b(); 
obj.c();

var id = 10;
let fun = () => ;
fun();     // 10
fun.call();     // 10
fun.bind()();   // 10

【2.5】箭頭函式不能作為建構函式使用

我們先了解一下建構函式的new都做了些什麼？簡單來說，分為四步： ① js內部首先會先生成乙個物件； ② 再把函式中的this指向該物件； ③ 然後執行建構函式中的語句； ④ 最終返回該物件例項。

但是！！因為箭頭函式沒有自己的this，它的this其實是繼承了外層執行環境中的this，且this指向永遠不會隨在**呼叫、被誰呼叫而改變，所以箭頭函式不能作為建構函式使用，或者說建構函式不能定義成箭頭函式，否則用new呼叫時會報錯！

let fun = (name, age) => ;
// 報錯
let p = new fun('dingfy', 24);

【2.6】箭頭函式不繫結arguments，取而代之用rest引數...代替arguments物件，來訪問箭頭函式的引數列表

箭頭函式沒有自己的arguments物件。在箭頭函式中訪問arguments實際上獲得的是外層區域性（函式）執行環境中的值。

// 普通函式
function a(a)
a(1,2,3,4,5,8);  //  [1, 2, 3, 4, 5, 8, callee: ƒ, symbol(symbol.iterator): ƒ]
// 箭頭函式
let b = (b)=>
b(2,92,32,32);   // uncaught referenceerror: arguments is not defined
// rest引數...
let c = (...c) => 
c(3,82,32,11323);  // [3, 82, 32, 11323]

【2.7】箭頭函式不能用作generator函式，不能使用yeild關鍵字

箭頭函式與普通函式的區別？

箭頭函式與普通函式區別

箭頭函式與普通函式的區別

箭頭函式與普通函式的區別

相關推薦