跟大家講解下有關js箭頭函數和普通函數的區別，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說js箭頭函數和普通函數的區別，小編也收集到了有關js箭頭函數和普通函數的區別的相關資料，希望大家看到了會喜歡。

本篇文章主要給大家介紹javascript箭頭函數和普通函數的區別，希望對需要的朋友有所幫助！

箭頭函數——ES6中引入的一個新特性——支持用JavaScript編寫簡潔的函數。雖然普通函數和箭頭函數的工作方式相似，但是它們之間有一些有趣的區別，如下所述。

語法

普通函數的語法:

let x = function function_name(parameters){ // 函數體};

普通函數的例子:

let square = function(x){ return (x*x); }; console.log(sqaure(9));

輸出：

箭頭函數的語法:

let x = (parameters) => { // 函數體};

箭頭函數的例子:

var square = (x) => { return (x*x); }; console.log(square(9));

輸出：

使用this關鍵字

與普通函數不同，箭頭函數沒有自己的this。

例如:

let user = { name: "GFG", gfg1:() => { console.log("hello " + this.name); }, gfg2(){ console.log("Welcome to " + this.name); } }; user.gfg1(); user.gfg2();

輸出：

arguments對象的可用性

arguments對象在箭頭函數中不可用，但在普通函數中可用。

普通函數的例子：

let user = { show(){ console.log(arguments); } }; user.show(1, 2, 3);

輸出：

箭頭函數的例子：

let user = { show_ar : () => { console.log(...arguments); } }; user.show_ar(1, 2, 3);

輸出：

使用new關鍵字

使用函數聲明或表達式創建的普通函數是“可構造的”和“可調用的”。由于普通函數是可構造的，因此可以使用'new'關鍵字調用它們。但是，箭頭函數只是“可調用”而不是可構造的。因此，在嘗試使用new關鍵字構造不可構造的箭頭函數時，我們將得到一個運行時錯誤。

普通函數的例子:

let x = function(){ console.log(arguments); }; new x =(1,2,3);

輸出：

箭頭函數的例子:

let x = ()=> { console.log(arguments); }; new x(1,2,3);

輸出：

相關推薦：《javascript教程》

以上就是js箭頭函數和普通函數的區別的詳細內容，更多請關注php中文網其它相關文章！

來源：php中文網