Es6 箭頭函數(shù)

轉(zhuǎn)換

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

箭頭函數(shù)有幾個使用注意點(diǎn)薯酝。

(1)函數(shù)體內(nèi)的this對象,就是定義時所在的對象母截,而不是使用時所在的對象到忽。

(2)不可以當(dāng)作構(gòu)造函數(shù),也就是說清寇,不可以使用new命令喘漏,否則會拋出一個錯誤。

(3)不可以使用arguments對象华烟,該對象在函數(shù)體內(nèi)不存在翩迈。如果要用,可以用 rest 參數(shù)代替盔夜。

(4)不可以使用yield命令负饲,因此箭頭函數(shù)不能用作 Generator 函數(shù)。

上面四點(diǎn)中比吭,第一點(diǎn)尤其值得注意绽族。this對象的指向是可變的,但是在箭頭函數(shù)中衩藤,它是固定的吧慢。

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

  var id = 21;

 foo.call({ id: 42 });

例子2
箭頭函數(shù)可以讓setTimeout里面的this,綁定定義時所在的作用域赏表,而不是指向運(yùn)行時所在的作用域检诗。下面是另一個例子。

 function Timer() {
 this.s1 = 0;
  this.s2 = 0;
 // 箭頭函數(shù)
  setInterval(() => this.s1++, 1000);
 // 普通函數(shù)
 setInterval(function () {
  this.s2++;
 }, 1000);
 }

var timer = new Timer();

setTimeout(() => console.log('s1: ', timer.s1), 3100);
 setTimeout(() => console.log('s2: ', timer.s2), 3100);
 // s1: 3
 // s2: 0

例子3
箭頭函數(shù)可以讓this指向固定化瓢剿,這種特性很有利于封裝回調(diào)函數(shù)逢慌。下面是一個例子,DOM 事件的回調(diào)函數(shù)封裝在一個對象里面间狂。

       var handler = {
      id: '123456',

       init: function() {
document.addEventListener('click',
  event => this.doSomething(event.type), false);
  },

  doSomething: function(type) {
console.log('Handling ' + type  + ' for ' + this.id);
  }
};

例子4
嵌套的箭頭函數(shù)
箭頭函數(shù)內(nèi)部攻泼,還可以再使用箭頭函數(shù)。下面是一個 ES5 語法的多重嵌套函數(shù)鉴象。

 function insert(value) {
return {into: function (array) {
return {after: function (afterValue) {
  array.splice(array.indexOf(afterValue) + 1, 0, value);
  return array;
 }};
 }};
}

 insert(2).into([1, 3]).after(1); //[1, 2, 3]

上面這個函數(shù)忙菠,可以使用箭頭函數(shù)改寫。

  let insert = (value) => ({into: (array) => ({after: (afterValue) => {
  array.splice(array.indexOf(afterValue) + 1, 0, value);
    return array;
   }})});

    insert(2).into([1, 3]).after(1); //[1, 2, 3]


// id: 42
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末纺弊,一起剝皮案震驚了整個濱河市牛欢,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌淆游,老刑警劉巖傍睹,帶你破解...
    沈念sama閱讀 219,110評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件隔盛,死亡現(xiàn)場離奇詭異,居然都是意外死亡拾稳,警方通過查閱死者的電腦和手機(jī)吮炕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,443評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來访得,“玉大人来屠,你說我怎么就攤上這事≌痧模” “怎么了?”我有些...
    開封第一講書人閱讀 165,474評論 0 356
  • 文/不壞的土叔 我叫張陵捆姜,是天一觀的道長传趾。 經(jīng)常有香客問我,道長泥技,這世上最難降的妖魔是什么浆兰? 我笑而不...
    開封第一講書人閱讀 58,881評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮珊豹,結(jié)果婚禮上簸呈,老公的妹妹穿的比我還像新娘。我一直安慰自己店茶,他們只是感情好蜕便,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,902評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著贩幻,像睡著了一般轿腺。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上丛楚,一...
    開封第一講書人閱讀 51,698評論 1 305
  • 那天族壳,我揣著相機(jī)與錄音,去河邊找鬼趣些。 笑死仿荆,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的坏平。 我是一名探鬼主播拢操,決...
    沈念sama閱讀 40,418評論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼功茴!你這毒婦竟也來了庐冯?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,332評論 0 276
  • 序言:老撾萬榮一對情侶失蹤坎穿,失蹤者是張志新(化名)和其女友劉穎展父,沒想到半個月后返劲,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,796評論 1 316
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡栖茉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,968評論 3 337
  • 正文 我和宋清朗相戀三年篮绿,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片吕漂。...
    茶點(diǎn)故事閱讀 40,110評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡亲配,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出惶凝,到底是詐尸還是另有隱情吼虎,我是刑警寧澤,帶...
    沈念sama閱讀 35,792評論 5 346
  • 正文 年R本政府宣布苍鲜,位于F島的核電站思灰,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏混滔。R本人自食惡果不足惜洒疚,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,455評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望坯屿。 院中可真熱鬧油湖,春花似錦、人聲如沸领跛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,003評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽吠昭。三九已至鹅经,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間怎诫,已是汗流浹背瘾晃。 一陣腳步聲響...
    開封第一講書人閱讀 33,130評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留幻妓,地道東北人蹦误。 一個月前我還...
    沈念sama閱讀 48,348評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像肉津,于是被迫代替她去往敵國和親强胰。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,047評論 2 355

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

  • 參考: http://es6.ruanyifeng.com/?search=%E7%AE%AD%E5%A4%B4&...
    TingsLee閱讀 486評論 0 1
  • 前言 最近學(xué)習(xí)了慕課網(wǎng)上的vue仿餓了嗎的視頻妹沙,體會到了es6的箭頭函數(shù)的妙用偶洋,因此特別總結(jié)了一下箭頭函數(shù)的用法。...
    破浪_閱讀 403評論 0 3
  • 函數(shù)體內(nèi)的this對象距糖,就是定義時所在的對象玄窝,而不是使用時所在的對象牵寺。請看下面這個例子: 輸出undefined是...
    zenggo閱讀 1,039評論 0 50
  • 箭頭符號在JavaScript誕生時就已經(jīng)存在,當(dāng)初第一個JavaScript教程曾建議在HTML注釋內(nèi)包裹行內(nèi)腳...
    程序員之路閱讀 742評論 0 3
  • 如需轉(zhuǎn)載請注明來源恩脂,喜歡的朋友們點(diǎn)個贊帽氓,蟹蟹~~~ 如有錯誤,請批評指正俩块! 關(guān)鍵詞:()=>{}黎休,this 先看一...
    枸杞辣條閱讀 1,162評論 0 11