箭頭函數(shù)

基礎語法

(1)(參數(shù)1, 參數(shù)2, …, 參數(shù)N) => { 函數(shù)聲明 }

相當于:(參數(shù)1, 參數(shù)2, …, 參數(shù)N) =>{ return 表達式; }
(參數(shù)1, 參數(shù)2, …, 參數(shù)N) => 表達式(單一)

(2) 當只有一個參數(shù)時芳悲,圓括號是可選的:
(單一參數(shù)) => {函數(shù)聲明}
單一參數(shù) => {函數(shù)聲明}

(3)沒有參數(shù)的函數(shù)應該寫成一對圓括號删顶。
() => {函數(shù)聲明}

高級語法

//加括號的函數(shù)體返回對象字面表達式:參數(shù)=> ({foo: bar})

//支持剩余參數(shù)和默認參數(shù)(參數(shù)1, 參數(shù)2, ...rest) => {函數(shù)聲明}(參數(shù)1 = 默認值1,參數(shù)2, …, 參數(shù)N = 默認值N) => {函數(shù)聲明}

//同樣支持參數(shù)列表解構(gòu)let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;f(); // 6

箭頭函數(shù)的作用

引入箭頭函數(shù)有兩個方面的作用:更簡短的函數(shù)并且不綁定this帮寻。
Array.prototype.map()//
map() 方法創(chuàng)建一個新數(shù)組偏陪,其結(jié)果是該數(shù)組中的每個元素都調(diào)用一個提供的函數(shù)后返回的結(jié)果夜郁。

eg:

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'];
  
  elements.map(function(element){
    return element.length;
  });//返回數(shù)組:[8,6,7,9]
  
  //上面的普通改寫為箭頭函數(shù)為:
  elements.map((element)=>{
    return element.length;
  });
  
  // 當箭頭函數(shù)只有一個參數(shù)時西轩,可以省略參數(shù)的圓括號
  elements.map(element=>{
    return element.length;
  });
  
// 當箭頭函數(shù)的函數(shù)體只有一個 `return` 語句時奕筐,可以省略 `return` 關(guān)鍵字和方法體的花括號
elements.map(element => element.length);

// 在這個例子中岛啸,因為我們只需要 `length` 屬性泪酱,所以可以使用參數(shù)解構(gòu)// 需要注意的是字符串 `"length"` 是我們想要獲得的屬性的名稱派殷,而 `lengthFooBArX` 則只是個變量名,// 可以替換成任意合法的變量名
elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]

不綁定this

在箭頭函數(shù)出現(xiàn)之前墓阀,每個新定義的函數(shù)都有它自己的 this值(在構(gòu)造函數(shù)的情況下是一個新對象毡惜,在嚴格模式的函數(shù)調(diào)用中為 undefined,如果該函數(shù)被作為“對象方法”調(diào)用則為基礎對象等)斯撮。This被證明是令人厭煩的面向?qū)ο箫L格的編程经伙。

function Person(){
    //Peron()構(gòu)造函數(shù)定義'this'作為它自己的實例
    this.age = 0;
    setInterval(function growUp(){
    // 在非嚴格模式, growUp()函數(shù)定義 `this`作為全局對象, 
    // 與在 Person()構(gòu)造函數(shù)中定義的 `this`并不相同.
        this.age++;
    },1000);
}
var p = new Person();

箭頭函數(shù)不會創(chuàng)建自己的this,它只會從自己的作用域鏈的上一層繼承this。因此勿锅,在下面的代碼中帕膜,傳遞給setInterval的函數(shù)內(nèi)的this與封閉函數(shù)中的this值相同:

function Person(){
    this.age = 0;
    setInterval(() => {
        this.age++;//this正確的指向p實例
    },1000)
}
var p = new Person();

與嚴格模式的關(guān)系

鑒于 this 是詞法層面上的枣氧,嚴格模式中與 this 相關(guān)的規(guī)則都將被忽略。

function Person(){
    this.age = 0;
    var closure = '123';
    setInterval(function growUp() {
        this.age++;
        console.log(closure)
      }, 1000);
}
var p = new Person();

function PersonX(){
    'use strict'
    this.age = 0;
    var closure = "123"
    setInterval(()=>{
        this.age++;
        console.log(closure)
      }, 1000);
}
var px = new PersonX();

通過用call或apply調(diào)用

由于 箭頭函數(shù)沒有自己的this指針垮刹,通過 call() 或 apply() 方法調(diào)用一個函數(shù)時达吞,只能傳遞參數(shù)(不能綁定this---譯者注),他們的第一個參數(shù)會被忽略荒典。(這種現(xiàn)象對于bind方法同樣成立---譯者注)

var adder = {
    base : 1,
    
    add : function(a){
        var f = v => v+ this.base;
        return f(a);
    },
    
    addThruCall : function(a){
        var f = v => v + this.base;
        var b = {
            base : 2
        };
        return f.call(b,a);
    }
};
console.log(adder.add(1));         // 輸出 2
console.log(adder.addThruCall(1)); // 仍然輸出 2,而不是3

不綁定arguments

箭頭函數(shù)不綁定Arguments 對象酪劫。因此,在本示例中种蝶,arguments只是引用了封閉作用域內(nèi)的arguments:

var arguments = [1,2,3];
var arr = () => arguments[0];
arr();//1

function foo(n) {
  var f = () => arguments[0] + n; // 隱式綁定 foo 函數(shù)的 arguments 對象. arguments[0] 是 n
  return f();}

foo(1); // 2

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末契耿,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子螃征,更是在濱河造成了極大的恐慌搪桂,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,104評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件盯滚,死亡現(xiàn)場離奇詭異踢械,居然都是意外死亡,警方通過查閱死者的電腦和手機魄藕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,816評論 3 399
  • 文/潘曉璐 我一進店門内列,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人背率,你說我怎么就攤上這事话瞧。” “怎么了寝姿?”我有些...
    開封第一講書人閱讀 168,697評論 0 360
  • 文/不壞的土叔 我叫張陵交排,是天一觀的道長。 經(jīng)常有香客問我饵筑,道長埃篓,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,836評論 1 298
  • 正文 為了忘掉前任根资,我火速辦了婚禮架专,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘玄帕。我一直安慰自己部脚,他們只是感情好,可當我...
    茶點故事閱讀 68,851評論 6 397
  • 文/花漫 我一把揭開白布裤纹。 她就那樣靜靜地躺著委刘,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上钱雷,一...
    開封第一講書人閱讀 52,441評論 1 310
  • 那天骂铁,我揣著相機與錄音,去河邊找鬼罩抗。 笑死拉庵,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的套蒂。 我是一名探鬼主播钞支,決...
    沈念sama閱讀 40,992評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼操刀!你這毒婦竟也來了烁挟?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,899評論 0 276
  • 序言:老撾萬榮一對情侶失蹤骨坑,失蹤者是張志新(化名)和其女友劉穎撼嗓,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體欢唾,經(jīng)...
    沈念sama閱讀 46,457評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡且警,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,529評論 3 341
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了礁遣。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片斑芜。...
    茶點故事閱讀 40,664評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖祟霍,靈堂內(nèi)的尸體忽然破棺而出杏头,到底是詐尸還是另有隱情,我是刑警寧澤沸呐,帶...
    沈念sama閱讀 36,346評論 5 350
  • 正文 年R本政府宣布醇王,位于F島的核電站,受9級特大地震影響垂谢,放射性物質(zhì)發(fā)生泄漏厦画。R本人自食惡果不足惜疮茄,卻給世界環(huán)境...
    茶點故事閱讀 42,025評論 3 334
  • 文/蒙蒙 一滥朱、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧力试,春花似錦徙邻、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,511評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春帅容,著一層夾襖步出監(jiān)牢的瞬間颇象,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,611評論 1 272
  • 我被黑心中介騙來泰國打工并徘, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留遣钳,地道東北人。 一個月前我還...
    沈念sama閱讀 49,081評論 3 377
  • 正文 我出身青樓麦乞,卻偏偏與公主長得像蕴茴,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子姐直,可洞房花燭夜當晚...
    茶點故事閱讀 45,675評論 2 359