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

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

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

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

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

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

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

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

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

// 報(bào)錯(cuò)
let getTempItem = id => {id: id, name: "Temp"}
// 不報(bào)錯(cuò)
let getTempItem = id => ({id: id, name: "Temp"})

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

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

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

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

let fn = () => void doesNotReturn()

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

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

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

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

箭頭函數(shù)的一個(gè)用處是簡化回調(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)

使用注意點(diǎn)

1）函數(shù)體內(nèi)的this對(duì)象，就是定義所在的對(duì)象，而不是使用時(shí)所在的對(duì)象。
2)不可以當(dāng)作構(gòu)造函數(shù)，也就是說，不可以使用new命令，否則會(huì)拋出一個(gè)錯(cuò)誤。
3）不可以使用arguments對(duì)象，該對(duì)象在函數(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ù)是一個(gè)箭頭函數(shù)，這個(gè)箭頭函數(shù)的定義生效是在foo函數(shù)生成時(shí)，而它的真正執(zhí)行要等到100ms后。如果是普通函數(shù)，執(zhí)行時(shí)this應(yīng)該指向全局對(duì)象window,這時(shí)應(yīng)該輸出21。但是，箭頭函數(shù)導(dǎo)致this總是指向函數(shù)定義生效時(shí)所在的對(duì)象，所在輸出的是42.

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

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

arguments, super, new.target

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

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

不適用場(chǎng)合

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

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

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

// 99

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

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

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

上面代碼運(yùn)行時(shí)，點(diǎn)擊按鈕會(huì)報(bào)錯(cuò)，因?yàn)閎utton的監(jiān)聽函數(shù)是一個(gè)箭頭函數(shù)，導(dǎo)致里面的this就是全局對(duì)象。如果改成普通函數(shù)，this就會(huì)動(dòng)態(tài)指向被點(diǎn)擊的按鈕對(duì)象。

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

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

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

最新評(píng)論