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

2021-10-08 04:09:07 字數 3187 閱讀 5466

箭頭函式是前端面試環節的乙個高頻考點,箭頭函式是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關鍵字

箭頭函式與普通函式區別

1 箭頭函式是匿名函式,不能作為建構函式,不能使用new 2 箭頭函式不繫結arguments,取而代之用rest引數 解決 3 this的作用域不同,箭頭函式不繫結this,會捕獲函式定義的上下文中的this值,作為自己的this值,且一直不變 4 箭頭函式沒有原型物件 5 箭頭函式不能當作gen...

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

箭頭函式和普通函式的區別 首先就是 箭頭函式作為匿名函式,是不能作為建構函式的 再者就是更重要的一點 箭頭函式的特點就是不繫結this和arguments 舉個例子 settimeout function 3000 以上是乙個延時定時器中的普通function 我們都知道定時器中會改變this的指向...

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

箭頭函式 let fun 普通函式 function fun 箭頭函式相當於匿名函式,並且簡化了函式定義。箭頭函式有兩種格式,一種只包含乙個表示式,連和return都省略掉了。還有一種可以包含多條語句,這時候就不能省略和return。箭頭函式是匿名函式,不能作為建構函式,不能使用newlet fun...