深入理解JavaScript 箭頭函數(shù)
JavaScript箭頭函數(shù)是ECMAScript 6中引入的編寫函數(shù)表達式的一種簡便方法。通常,在JavaScript中,可以通過兩種方式創(chuàng)建函數(shù):
- 函數(shù)語句。
- 函數(shù)表達式。
可以如下所示創(chuàng)建函數(shù)語句:
function add(num1, num2) { var res = num1 + num2; return res; } var sum = add(7, 2); console.log(sum);
也可以創(chuàng)建相同功能的函數(shù)表達式,如下所示:
var add = function (num1, num2) { var res = num1 + num2; return res; } var sum = add(7, 2); console.log(sum);
ECMA 2015(或ECMA Script 6)引入了更短的語法來編寫函數(shù)表達式,稱為箭頭函數(shù)。使用箭頭函數(shù),你可以將上面的函數(shù)表達式編寫為:
var add = (num1, num2) => { return num1 + num2; };
正如你所看到的,使用箭頭函數(shù)編寫的函數(shù)表達式更短。
箭頭函數(shù)的基本語法規(guī)則
首先,參數(shù)應該在小括號中傳遞。你可以創(chuàng)建有兩個參數(shù)的箭頭函數(shù),如下所示:
ar add = (num1, num2) => { return num1 + num2; };
如果只要傳遞一個參數(shù),那么括號是可選的,可以選擇忽略。你可以創(chuàng)建一個參數(shù)的箭頭函數(shù),如下所示:
var add = num => { return num * 10; };
如果沒有參數(shù),那么你必須要有一個空括號——不能沒有。所以對于沒有參數(shù)的函數(shù),箭頭函數(shù)是這樣寫的:
var add = () => { console.log("hey foo") };
如果函數(shù)中有單個表達式或語句:
- 在主體中使用括號是可選的。
- 使用return語句是可選的。
你可以重寫add函數(shù),而不使用函數(shù)體中的括號和return語句,如下所示:
var add = (num1, num2) => num1 + num2;
你也可以使用控制臺語句編寫不帶參數(shù)的函數(shù),如下所示:
var add = () => console.log("hey");
返回對象字面量
JavaScript箭頭函數(shù)也可以返回對象字面量。唯一的要求是你需要把返回對象裝入小括號中,如下所示:
var foo = (name, age) => ({ name: name, age: age }) var r = foo("my cat", 22); console.log(r);
正如你所看到的那樣,要返回的對象被放在了小括號內(nèi)。如果你不這樣做,那么JavaScript將無法區(qū)分對象字面量和函數(shù)體。
箭頭函數(shù)支持rest參數(shù)
JavaScript箭頭函數(shù)支持另一個ES6功能:rest參數(shù)。你可以在箭頭函數(shù)中使用rest參數(shù),如下面的代碼所示:
var add = (num1, num2, ...restparam) => { console.log(restparam.length); var result = num1 + num2; return result; } var r = add(67, 8, 90, 23); console.log(r);
在這個例子中,當你使用帶有rest參數(shù)的箭頭函數(shù)時,輸出會是2和75,因為傳遞的額外參數(shù)的數(shù)量是2,num1和num2的總和是75。
箭頭功能支持默認參數(shù)
另外,JavaScript箭頭函數(shù)還支持另一個ES6功能:默認參數(shù)。此處詳細介紹了默認參數(shù)。你可以在箭頭函數(shù)中使用默認參數(shù),如下所示:
var add = (num1 = 9, num2 = 8) => { var result = num1 + num2; return result; } var r = add(); console.log(r);
在上面的代碼中,箭頭函數(shù)中有默認參數(shù)。調(diào)用該函數(shù)時,我們沒有傳遞任何值,并且由于默認參數(shù)的存在,輸出將是17。
“this”在箭頭函數(shù)中如何工作?
箭頭函數(shù)沒有它自己的this值。箭頭函數(shù)中的this值總是從封閉范圍繼承。在JavaScript中,每個函數(shù)都有它自己的this值,這取決于代碼是如何調(diào)用函數(shù)的。請仔細看下面列出的代碼:
var Cat = { name: 'mew', canRun: function () { console.log(this) var foo = () => { console.log(this) } foo(); } };
在這里,cat是一個對象字面量,它包括:
- 屬性名稱。
- 方法canRun。
在canRun方法中,我們創(chuàng)建了一個箭頭函數(shù)foo,給出了this值。由于箭頭函數(shù)沒有它自己的this值,所以它將從周圍的函數(shù)獲取,因此,你將得到:
正如你所看到的,this值在canRun方法和箭頭函數(shù)foo中是相同的。箭頭函數(shù)從繼承范圍得到this值。如果你對此不甚清楚,那么請牢記以下兩條規(guī)則:
- 使用object.method在方法中獲取一個有意義的對象作為this值。
- 對于任何其他要求,使用箭頭函數(shù),由于函數(shù)沒有自己的this值,所以它將繼承封閉范圍的this值。
使用箭頭函數(shù)的限制條件
應用箭頭函數(shù)時要注意的一些限制條件:
- 箭頭函數(shù)沒有參數(shù)對象。
- 箭頭函數(shù)不能與新運算符一起使用,因此它不能用作構(gòu)造函數(shù)。
- 箭頭函數(shù)沒有原型屬性。
如果你嘗試使用箭頭函數(shù)作為構(gòu)造函數(shù),那么你會得到異常。請看下面的代碼:
var foo = (name, age) => { name = name, age = age }; var f1 = new foo("cat", 6);
代碼試圖通過使用箭頭函數(shù)foo作為構(gòu)造函數(shù)來創(chuàng)建對象f1,JavaScript將拋出以下異常:
而且,當你試圖輸出箭頭函數(shù)的原型值時,你會得到undefined的輸出:
var foo = (name, age) => { name = name, age = age }; console.log(foo.prototype);
發(fā)生這種情況的原因是因為箭頭函數(shù)沒有原型屬性。請記住:雖然箭頭函數(shù)為你提供了編寫函數(shù)表達式的簡短方法,但它沒有自己的this值,也不能用作構(gòu)造函數(shù)。
英文原文:Easy JavaScript Part 6 : Arrow functions in JavaScript
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript類型系統(tǒng)——undefined和null全面了解
下面小編就為大家?guī)硪黄猨avascript類型系統(tǒng)——undefined和null全面了解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07