【二十】箭頭函數(shù)

ES6標準新增了一種新的函數(shù):Arrow Function(箭頭函數(shù))。
為什么叫Arrow Function? 因為它的定義用的就是一個箭頭:

x => x*x

上面的箭頭函數(shù)相當于:

function (x) {
    return x * x;
}

測試瀏覽器是否支持ES6的Arrow Function:

'use strict';
var fn = x => x * x;
alert('你的瀏覽器支持ES6的Arrow Function!');

箭頭函數(shù)相當于匿名函數(shù),并且簡化了函數(shù)定義。箭頭函數(shù)有兩種格式,一種像上面的物臂,只包含了一個表達式,連{ ... }和return都省略掉了。還有一種可以包含多條語句遇西,這時候就不能省略{ ... }和return:

x => {
    if (x > 0) {
        return x*x;
    }
    else {
        return -x*x;
    }
}

如果參數(shù)不是一個,就需要用括號()括起來:

//  兩個參數(shù)严嗜;
(x, y) => x * x + y * y

// 無參數(shù)粱檀;
() => 3.14

// 可變參數(shù);
(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) {
        sum += rest[i];
    }
    return sum;
}

如果要返回一個對象,就要注意漫玄,如果是單表達式茄蚯,這么寫的話會報錯:

//SyntaxError:
x => { foo: x }

因為和函數(shù)體的{ ... } 有語法沖突,所以要改為:

//  ok;
x => ({ foo: x})

</br>

this
箭頭函數(shù)看上去是匿名函數(shù)的一種簡寫睦优,但實際上渗常,箭頭函數(shù)和匿名函數(shù)有個明顯的區(qū)別:箭頭函數(shù)內(nèi)部的this是詞法作用域,由上下文確定汗盘。
回去前面的例子皱碘,由于JavaScript函數(shù)對this綁定的錯誤處理,下面的例子無法得到預(yù)期結(jié)果:

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = function () {
            return new Date().getFullYear() - this.birth;  // this指向window或undefined
        };
        return fn();
    }
}

現(xiàn)在隐孽,箭頭函數(shù)完全修復(fù)了this的指向癌椿,this總是指向詞法作用域,也就是外層調(diào)用者obj:

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth;  // 1990
        var fn = () => new Date().getFullYear()  - this.birth;  // this指向obj對象
        return fn();
    }
};
obj.getAge();  // 27

如果使用箭頭函數(shù),以前的那種hack寫法:

var that = this;

就不再需要了菱阵。
由于this在箭頭函數(shù)中已經(jīng)按照詞法作用域綁定了踢俄,所以,用call()或者apply()調(diào)用箭頭函數(shù)時送粱,無法對this進行綁定褪贵,即傳入的第一個參數(shù)被忽略:

var obj = {
    birth: 1990,
    getAge: function (year) {
        var b = this.birth;  // 1990
        var fn = (y) => y - this.birth;  // this.birth仍是1990
        return fn.call({birth:2000}, year);
    }
};
obj.getAge(2017);  // 27
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子脆丁,更是在濱河造成了極大的恐慌世舰,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件槽卫,死亡現(xiàn)場離奇詭異跟压,居然都是意外死亡,警方通過查閱死者的電腦和手機歼培,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進店門震蒋,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人躲庄,你說我怎么就攤上這事查剖。” “怎么了噪窘?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵笋庄,是天一觀的道長。 經(jīng)常有香客問我倔监,道長直砂,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任浩习,我火速辦了婚禮静暂,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘谱秽。我一直安慰自己洽蛀,他們只是感情好,可當我...
    茶點故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布弯院。 她就那樣靜靜地躺著辱士,像睡著了一般。 火紅的嫁衣襯著肌膚如雪听绳。 梳的紋絲不亂的頭發(fā)上颂碘,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天,我揣著相機與錄音椅挣,去河邊找鬼头岔。 笑死,一個胖子當著我的面吹牛鼠证,可吹牛的內(nèi)容都是我干的峡竣。 我是一名探鬼主播,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼量九,長吁一口氣:“原來是場噩夢啊……” “哼适掰!你這毒婦竟也來了颂碧?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤类浪,失蹤者是張志新(化名)和其女友劉穎载城,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體费就,經(jīng)...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡诉瓦,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了力细。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片睬澡。...
    茶點故事閱讀 40,090評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖眠蚂,靈堂內(nèi)的尸體忽然破棺而出煞聪,到底是詐尸還是另有隱情,我是刑警寧澤逝慧,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布米绕,位于F島的核電站,受9級特大地震影響馋艺,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜迈套,卻給世界環(huán)境...
    茶點故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一捐祠、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧桑李,春花似錦踱蛀、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至禁荒,卻和暖如春猬膨,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背呛伴。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工勃痴, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人热康。 一個月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓沛申,卻偏偏與公主長得像,于是被迫代替她去往敵國和親姐军。 傳聞我的和親對象是個殘疾皇子铁材,可洞房花燭夜當晚...
    茶點故事閱讀 45,033評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 函數(shù) 1.JavaScript允許傳入任意個參數(shù)而不影響調(diào)用尖淘,因此傳入的參數(shù)比定義的參數(shù)多也沒有問題,雖然函數(shù)內(nèi)部...
    wyude閱讀 164評論 0 1
  • 函數(shù)就是最基本的一種代碼抽象的方式著觉。 定義函數(shù)function abs(x) {if (x >=0){return...
    _我和你一樣閱讀 447評論 0 0
  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品村生,去做同樣的事情,實現(xiàn)同樣的效果;這時候需要使用工廠模式固惯。簡單...
    舟漁行舟閱讀 7,766評論 2 17
  • 單例模式 適用場景:可能會在場景中使用到對象梆造,但只有一個實例,加載時并不主動創(chuàng)建葬毫,需要時才創(chuàng)建 最常見的單例模式镇辉,...
    Obeing閱讀 2,073評論 1 10
  • 我以為很多東西 早已遺忘 原來從不曾忘記 觸景變會生情 猶記得上學(xué)路上 家門口 一直凝望的您 也不曾忘記 殷殷等待...
    逐風(fēng)逐你閱讀 188評論 0 0