本文實例講述了es6函數(shù)之箭頭函數(shù)用法。分享給大家供大家參考，具體如下：

es6允許使用“箭頭”(=>)定義函數(shù)。

var f = v => v
// 等同于
var f = function(v) {
 return v
}

如果箭頭函數(shù)不需要參數(shù)或需要多個參數(shù)，就使用一個圓括號代表參數(shù)部分。

var f = () => 5
// 等同于
var f = function() {
 return 5
}

var sum = (num1, num2) => num1 + num2
// 等同于
var sum = function(num1, num2) {
 return num1 + num2
}

如果箭頭函數(shù)的代碼塊部分多于一條語句，就要使用大括號將它們括起來，并且使用return語句返回。

var sum = (num1, num2) => {return num1 + num2}

由于大括號被解釋為代碼塊，所以如果箭頭函數(shù)直接返回一個對象，必須在對象外面加上括號，否則會報錯。

// 報錯
let getTempItem = id => {id: id, name: "Temp"}
// 不報錯
let getTempItem = id => ({id: id, name: "Temp"})

下面是一種特殊情況，雖然可以運行，但會得到錯誤的結(jié)果。

let foo = () => {a: 1}

上面代碼中，原始意圖是返回一個對象{a: 1}，但是由于引擎認為大括號是代碼塊，所以執(zhí)行了一行語句a: 1，這時，a可以理解為語句的標(biāo)簽，因此實際執(zhí)行了語句是1,然后函數(shù)就結(jié)束了，沒有返回值。

如果箭頭函數(shù)只有一行語句，且不需要返回值，可以采用下面的寫法，就不用寫大括號了。

let fn = () => void doesNotReturn()

箭頭函數(shù)可以與變量解構(gòu)結(jié)合使用。

const full = ({first, last}) => first + ' ' + last
// 等同于
function full(person) {
 return person.first + ' ' + person.last
}

箭頭函數(shù)使用表達更簡潔。

const isEven = n => n % 2 === 0
const square = n => n * n

箭頭函數(shù)的一個用處是簡化回調(diào)函數(shù)。

// 正常函數(shù)寫法
[1, 2, 3].map(function(x) {
 return x * x
})
// 箭頭函數(shù)寫法
[1, 2, 3].map(x => x * x)

下面是rest參數(shù)與箭頭函數(shù)結(jié)合的例子。

const numbers = (...nums) => nums

numbers(1, 2, 3, 4, 5)

const headAndTail = (head, ...tail) => [head, tail]

headAndTail(1, 2, 3, 4, 5)

使用注意點

1）函數(shù)體內(nèi)的this對象，就是定義所在的對象，而不是使用時所在的對象。
2)不可以當(dāng)作構(gòu)造函數(shù)，也就是說，不可以使用new命令，否則會拋出一個錯誤。
3）不可以使用arguments對象，該對象在函數(shù)體內(nèi)不存在，如果要用，可以用rest參數(shù)代替。
4）不可以使用yield命令，因此箭頭函數(shù)不能用作Generator函數(shù)。

function foo () {
 setTimeout(() => {
 console.log('id: ', this.id)
 }, 100)
}

var id = 21

foo.call({id: 42})

上面代碼中，setTimeout的參數(shù)是一個箭頭函數(shù)，這個箭頭函數(shù)的定義生效是在foo函數(shù)生成時，而它的真正執(zhí)行要等到100ms后。如果是普通函數(shù)，執(zhí)行時this應(yīng)該指向全局對象window,這時應(yīng)該輸出21。但是，箭頭函數(shù)導(dǎo)致this總是指向函數(shù)定義生效時所在的對象，所在輸出的是42.

箭頭函數(shù)根本沒有自己的this，導(dǎo)致內(nèi)部的this就是外層代碼塊的this,正是因為它沒有this,所以也就不能用作構(gòu)造函數(shù)。

除了this,以下三個變量在箭頭函數(shù)之中也是不存在的：

arguments, super, new.target

別外，由于箭頭函數(shù)沒有自己的this,所以當(dāng)然也就不能用call(),apply(),bind()這些方法去改變this的指向。

(function() {
 return [
 (() => this.x).bind({x: 'inner'})()
 ]
}).call({x: 'outer'})

不適用場合

由于箭頭函數(shù)使得this從“動態(tài)”變成“靜態(tài)”，下面兩個場合不應(yīng)該使用箭頭函數(shù)。

第一個場合是定義函數(shù)的方法，且該方法內(nèi)部包括this.

window.lives = 100
var cat = {
 lives: 9,
 jumps: () => { this.lives--; console.log(this.lives)}
}

// 99

上面代碼中，cat.jumps()方法是一個箭頭函數(shù)，這是錯誤的。調(diào)用cat.jumps()時，如果是普通函數(shù)，該方法內(nèi)部的this指向cat；如果寫成上面那樣的箭頭函數(shù)，使得this指向全局對象，因些不會得到預(yù)期結(jié)果。

第二個場合是需要動態(tài)this（事件監(jiān)聽）的時候，也不應(yīng)該使用箭頭函數(shù)。

var button = document.getElementById('press');
button.addEventListener('click', () => {
 this.classList.toggle('on');
});

上面代碼運行時，點擊按鈕會報錯，因為button的監(jiān)聽函數(shù)是一個箭頭函數(shù)，導(dǎo)致里面的this就是全局對象。如果改成普通函數(shù)，this就會動態(tài)指向被點擊的按鈕對象。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

最新評論