JS:箭頭函數(shù)(ES6標(biāo)準(zhǔn))

Arrow Function(箭頭函數(shù))养铸。

ES6標(biāo)準(zhǔn)新增了一種新的函數(shù):Arrow Function(箭頭函數(shù))。

為什么叫Arrow Function?因?yàn)?strong>它的定義用的就是一個(gè)箭頭:

一太援、寫法之一:

x => x * x

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

function (x) {
    return x * x;
}

在繼續(xù)學(xué)習(xí)箭頭函數(shù)之前笋敞,請(qǐng)測(cè)試你的瀏覽器是否支持ES6的Arrow Function

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

箭頭函數(shù)相當(dāng)于匿名函數(shù),并且簡(jiǎn)化了函數(shù)定義

二季惯、寫法之二:

箭頭函數(shù)有兩種格式:

一種像上面的臀突,只包含一個(gè)表達(dá)式勉抓,連{ ... }和return都省略掉了候学。
還有一種可以包含多條語句,這時(shí)候就不能省略{ ... }和return:

x => {
    if (x > 0) {
        return x * x;
    }
    else {
        return - x * x;
    }
}
如果參數(shù)不是一個(gè)念逞,就需要用括號(hào)()括起來:
// 兩個(gè)參數(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;
}

如果要返回一個(gè)對(duì)象,就要注意,如果是單表達(dá)式,這么寫的話會(huì)報(bào)錯(cuò):

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

因?yàn)楹秃瘮?shù)體的{ ... }有語法沖突黔漂,所以要加括號(hào)

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

三诫尽、this

箭頭函數(shù)看上去是匿名函數(shù)的一種簡(jiǎn)寫,但實(shí)際上炬守,箭頭函數(shù)和匿名函數(shù)有個(gè)明顯的區(qū)別:箭頭函數(shù)內(nèi)部的this是詞法作用域酣藻,由上下文確定。

回顧前面的例子观蜗,由于JavaScript函數(shù)對(duì)this綁定的錯(cuò)誤處理臊恋,下面的例子無法得到預(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對(duì)象
        return fn();
    }
};
obj.getAge(); // 27

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

var that = this;

就不再需要了砖第。

由于this在箭頭函數(shù)中已經(jīng)按照詞法作用域綁定了撤卢,所以,用call()或者apply()調(diào)用箭頭函數(shù)時(shí)梧兼,無法對(duì)this進(jìn)行綁定放吩,即傳入的第一個(gè)參數(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(2015); // 25
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市羽杰,隨后出現(xiàn)的幾起案子渡紫,更是在濱河造成了極大的恐慌到推,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,402評(píng)論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件惕澎,死亡現(xiàn)場(chǎng)離奇詭異莉测,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)唧喉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門捣卤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人八孝,你說我怎么就攤上這事董朝。” “怎么了干跛?”我有些...
    開封第一講書人閱讀 162,483評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵子姜,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我驯鳖,道長(zhǎng)闲询,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,165評(píng)論 1 292
  • 正文 為了忘掉前任浅辙,我火速辦了婚禮扭弧,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘记舆。我一直安慰自己鸽捻,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,176評(píng)論 6 388
  • 文/花漫 我一把揭開白布泽腮。 她就那樣靜靜地躺著御蒲,像睡著了一般。 火紅的嫁衣襯著肌膚如雪诊赊。 梳的紋絲不亂的頭發(fā)上厚满,一...
    開封第一講書人閱讀 51,146評(píng)論 1 297
  • 那天,我揣著相機(jī)與錄音碧磅,去河邊找鬼碘箍。 笑死,一個(gè)胖子當(dāng)著我的面吹牛鲸郊,可吹牛的內(nèi)容都是我干的丰榴。 我是一名探鬼主播,決...
    沈念sama閱讀 40,032評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼秆撮,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼四濒!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,896評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤盗蟆,失蹤者是張志新(化名)和其女友劉穎戈二,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體喳资,經(jīng)...
    沈念sama閱讀 45,311評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡挽拂,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,536評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了骨饿。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,696評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡台腥,死狀恐怖宏赘,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情黎侈,我是刑警寧澤察署,帶...
    沈念sama閱讀 35,413評(píng)論 5 343
  • 正文 年R本政府宣布,位于F島的核電站峻汉,受9級(jí)特大地震影響贴汪,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜休吠,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,008評(píng)論 3 325
  • 文/蒙蒙 一扳埂、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧瘤礁,春花似錦阳懂、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至赡盘,卻和暖如春号枕,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背陨享。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工葱淳, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人霉咨。 一個(gè)月前我還...
    沈念sama閱讀 47,698評(píng)論 2 368
  • 正文 我出身青樓蛙紫,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親途戒。 傳聞我的和親對(duì)象是個(gè)殘疾皇子坑傅,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,592評(píng)論 2 353

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

  • 官方中文版原文鏈接 感謝社區(qū)中各位的大力支持,譯者再次奉上一點(diǎn)點(diǎn)福利:阿里云產(chǎn)品券喷斋,享受所有官網(wǎng)優(yōu)惠唁毒,并抽取幸運(yùn)大...
    HetfieldJoe閱讀 2,894評(píng)論 0 16
  • 函數(shù)參數(shù)的默認(rèn)值 基本用法 在ES6之前蒜茴,不能直接為函數(shù)的參數(shù)指定默認(rèn)值,只能采用變通的方法浆西。 上面代碼檢查函數(shù)l...
    呼呼哥閱讀 3,382評(píng)論 0 1
  • 本文是大神廖雪峰的JavaScript教程學(xué)習(xí)筆記粉私。并不是教程,如有需要近零,請(qǐng)前往廖雪峰大神大博客. 一诺核、函數(shù)定義和...
    0o凍僵的企鵝o0閱讀 486評(píng)論 1 3
  • 函數(shù)函數(shù)定義與調(diào)用變量作用域全局變量方法高階函數(shù)閉包箭頭函數(shù)$generator$ 函數(shù) 函數(shù)定義與調(diào)用 定義函數(shù)...
    染微言閱讀 583評(píng)論 0 5
  • 昨天在普明禪院拜佛的時(shí)候,聽到了自己的聲音:臣服于你的心久信,跪拜時(shí)內(nèi)心充滿法喜窖杀,看著各種面目猙獰的羅漢,內(nèi)心卻很喜悅...
    竺子閱讀 249評(píng)論 0 1