es6中的箭頭函數(shù)

UsherChen 發(fā)布于2019-08-20 15:45 / 467人閱讀

摘要：箭頭函數(shù)箭頭函數(shù)相當(dāng)于一個(gè)匿名函數(shù)同等于下面的匿名函數(shù)傳參如果箭頭函數(shù)含表達(dá)式就必須加和如果箭頭函數(shù)不是一個(gè)參數(shù)，參數(shù)就必須加兩個(gè)參數(shù)沒有參數(shù)可變參數(shù)是個(gè)如果的值是一個(gè)對(duì)象需要加進(jìn)行區(qū)分，防止沖突箭頭函數(shù)中的由上下文決定寫法寫法錯(cuò)誤

箭頭函數(shù)（arrow function）

箭頭函數(shù)相當(dāng)于一個(gè)匿名函數(shù)

x => x * x;
//同等于下面的匿名函數(shù)
//x - >傳參
//x * x  -> return

function(x) {
    return x * x;
}

如果箭頭函數(shù)含表達(dá)式就必須加{...} 和 return

x => {
    if(x>10) {
        return x + x;
    }else {
        return x * x;
    }
}

如果箭頭函數(shù)不是一個(gè)參數(shù)，參數(shù)就必須加()->(x,y)

//兩個(gè)參數(shù)
(x,y) => x * y
//沒有參數(shù)
() = > 1 + 4
//可變參數(shù)
var fn = (x,...rest) => {
    for(var i = 0;i < rest.length; i++) {
        x += rest[i]
    }
    return x;
}
//rest是個(gè)Array [4,5]
fn(1,4,5);//10

如果return的值是一個(gè)對(duì)象需要加()進(jìn)行區(qū)分，防止沖突

var fn = x => { foo: x }
fn(3);//undefined

var fn = x => ({ foo: x })
fn(3);//Object {foo: 3}

箭頭函數(shù)中的this由上下文決定

//es6 =>寫法

var obj = {
    age: 18,
    fnc : function (x) {
        var fn = x => this.age + x;//this->obj
        return fn(x);
    }
}
obj.fnc(5)//23

//es5寫法

//錯(cuò)誤的寫法
var obj = {
    age: 18,
    fnc : function (x) {
        var fn = function (x) {
            return this.age + x;//this->window
        } 
        return fn(x);
    }
}
obj.fnc(5)//NaN
//正確的寫法
var obj = {
    age: 18,
    fnc : function (x) {
        var that = this;//this->obj
        var fn = function (x) {
            return that.age + x;
        } 
        return fn(x);
    }
}
obj.fnc(5)//23

如果用call()或者apply()調(diào)用箭頭函數(shù)時(shí)，無法對(duì)this進(jìn)行綁定（傳入的第一個(gè)參數(shù)被忽略）：

var obj = {
    age: 18,
    fnc : function (x) {
        var fn = x => this.age + x;//this->obj
        return fn.call({age:20},x);//用call無法改變this的指向，箭頭函數(shù)中的age依然等于18
    }
}
obj.fnc(5)//23

GPU云服務(wù)器云服務(wù)器 es6中的class es6中的promise 箭頭函數(shù) javascript中的函數(shù)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/82463.html

相關(guān)文章

es6 - 箭頭函數(shù)

摘要：也就是說箭頭函數(shù)的的值不再根據(jù)調(diào)用時(shí)上下文確定，而是像普通變量那樣根據(jù)定義時(shí)的作用域鏈進(jìn)行查找。箭頭函數(shù)中的依然要根據(jù)定義時(shí)的作用域鏈進(jìn)行查找。知乎這篇文章對(duì)箭頭函數(shù)的一些不適合的場(chǎng)景進(jìn)行了總結(jié)，可以作為參考。 es6 - 箭頭函數(shù) 哇，箭頭函數(shù)...，聽起來好NB，但是如果你知道它是因?yàn)槭褂昧?>這樣類似箭頭的符號(hào) ，所以才叫箭頭函數(shù)。瞬間感覺：呵，這名字起的...。 es6增加了...

13651657101 2019-08-26 11:46 評(píng)論0 收藏0
深入ES6：箭頭函數(shù)

摘要：令人震驚的箭頭函數(shù)引入了寫入函數(shù)的新語法。使用箭頭函數(shù)創(chuàng)建簡(jiǎn)單對(duì)象時(shí)有一個(gè)警告。代碼因此被默默地解釋為一個(gè)不執(zhí)行任何操作并返回未定義的箭頭函數(shù)。內(nèi)部函數(shù)是一個(gè)箭頭函數(shù)，所以它從封閉范圍繼承此函數(shù)。箭頭從一開始就一直是JavaScript的一部分。第一個(gè)JavaScript教程建議在HTML注釋中包裝內(nèi)聯(lián)腳本。這會(huì)阻止不支持JS的瀏覽器錯(cuò)誤地將JS代碼顯示為文本。你會(huì)寫這樣的東西： ...

MasonEast 2019-08-22 17:14 評(píng)論0 收藏0
ES6 系列之箭頭函數(shù)

摘要：回顧我們先來回顧下箭頭函數(shù)的基本語法。主要區(qū)別包括沒有箭頭函數(shù)沒有，所以需要通過查找作用域鏈來確定的值。箭頭函數(shù)并沒有方法，不能被用作構(gòu)造函數(shù)，如果通過的方式調(diào)用，會(huì)報(bào)錯(cuò)。回顧我們先來回顧下箭頭函數(shù)的基本語法。 ES6 增加了箭頭函數(shù)： let func = value => value; 相當(dāng)于： let func = function (value) { return ...

hsluoyz 2019-08-26 11:58 評(píng)論0 收藏0
ES6箭頭函數(shù)體中this指向哪里？

摘要：注意因?yàn)榧^函數(shù)內(nèi)部的是指向外層代碼塊的最近的，例中的函數(shù)的，所以我們可以通過改變外層代碼塊的的指向從而改變箭頭函數(shù)中的指向例中使用了函數(shù)的方法。一、this關(guān)鍵字小測(cè)試 ES6箭頭函數(shù)體中的this指向哪里？在回答這個(gè)問題之前先來揣揣你對(duì)this關(guān)鍵字的了解程度：（讓我們回到ES6之前）題： var obj = { a: function() { cons...

Half 2019-08-22 15:48 評(píng)論0 收藏0
帶你入門 JavaScript ES6 (三)

摘要：上一章我們學(xué)習(xí)了遍歷和擴(kuò)展字符語法。本章我們主要學(xué)習(xí)中的箭頭函數(shù)箭頭函數(shù)更準(zhǔn)確來說叫箭頭函數(shù)表達(dá)式。箭頭函數(shù)余普通函數(shù)功能相同，但語法差別比較大。帶你入門 JavaScript ES6 (三) 本文同步帶你入門 JavaScript ES6 (三)，轉(zhuǎn)載請(qǐng)注明出處。上一章我們學(xué)習(xí)了 for of 遍歷和擴(kuò)展字符語法。本章我們主要學(xué)習(xí) ES6 中的箭頭函數(shù) 箭頭函數(shù) 更準(zhǔn)確來說叫箭...

劉福 2019-08-21 18:35 評(píng)論0 收藏0
【ES6系列】函數(shù)部分

摘要：正是因?yàn)樗鼪]有，所以也就不能用作構(gòu)造函數(shù)。不可以當(dāng)作構(gòu)造函數(shù)，也就是說，不可以使用命令，否則會(huì)拋出一個(gè)錯(cuò)誤。不可以使用對(duì)象，該對(duì)象在函數(shù)體內(nèi)不存在。箭頭函數(shù) 在之前ES5的版本中，我們定義一個(gè)函數(shù)的形式如下： function a() { // do something…… } 但是在ES6中，則新增了箭頭函數(shù)的方式，ES6中允許使用箭頭（=>）來定義函數(shù)。 () => { ...

enda 2019-08-22 16:15 評(píng)論0 收藏0