成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

ES6學(xué)習(xí)筆記之箭頭函數(shù)

Vultr / 1354人閱讀

摘要：特性介紹箭頭函數(shù)是新增的特性之一，它為這門(mén)語(yǔ)言提供了一種全新的書(shū)寫(xiě)函數(shù)的語(yǔ)法。用生成的函數(shù)會(huì)定義一個(gè)自己的，而箭頭函數(shù)沒(méi)有自己的，而是會(huì)和上一層的作用域共享。

本文同步自我得博客：http://www.joeray61.com

JS中的箭頭

箭頭在JS里并不算是個(gè)新鮮的玩意兒，一直以來(lái)，JS都支持-->這樣的箭頭。

很早的時(shí)候有些瀏覽器還不支持JS，當(dāng)時(shí)的人們?yōu)榱思嫒葸@些瀏覽器，需要這樣寫(xiě)JS:

這段代碼在不支持JS的瀏覽器里會(huì)被解讀成2個(gè)未知標(biāo)簽和一段html注釋。在支持JS的瀏覽器里，JS引擎會(huì)把看成是單行注釋的開(kāi)始。需要說(shuō)明的是，-->僅僅是在一行的開(kāi)頭才能表示這一行是注釋，其余情況-->是一個(gè)操作符，表示goes to的含義。

function countdown(n) {
    while (n --> 0) {
        alert(n);
    }
}

這段代碼確實(shí)能夠正常運(yùn)行哦。當(dāng)你給countdown函數(shù)傳入一個(gè)大于0的參數(shù)時(shí)，這個(gè)循環(huán)能夠一直運(yùn)行，直到n變?yōu)?為止。

此箭頭非彼箭頭，以上講述的-->并不是我們今天要講的主角，大家權(quán)當(dāng)拓展下JS知識(shí)，下面讓我們進(jìn)入正題。

特性介紹

箭頭函數(shù)是ES6新增的特性之一，它為JS這門(mén)語(yǔ)言提供了一種全新的書(shū)寫(xiě)函數(shù)的語(yǔ)法。

// ES5
var double = nums.map(function (v) {
    return 2 * n;
});

// ES6
var double = nums.map(v => 2 * n);

箭頭函數(shù)簡(jiǎn)化了原先的函數(shù)語(yǔ)法，不需要再寫(xiě)function，如果函數(shù)體只有一行代碼的話連return都不用寫(xiě)，這個(gè)特性對(duì)于熱衷于簡(jiǎn)化流程和工作的程序員來(lái)說(shuō)相當(dāng)對(duì)胃口。

使用箭頭函數(shù)有幾個(gè)注意點(diǎn)：

函數(shù)體

箭頭函數(shù)支持兩種模式的函數(shù)體寫(xiě)法，我們姑且叫他簡(jiǎn)潔函數(shù)體和塊級(jí)函數(shù)體。

// 簡(jiǎn)潔函數(shù)體
var fn = x => x * x;

// 塊級(jí)函數(shù)體
var fn = (x, y) => {return x + y;};

簡(jiǎn)介函數(shù)體默認(rèn)會(huì)把表達(dá)式的結(jié)果返回，塊級(jí)函數(shù)體需要手動(dòng)return。如果想要返回一個(gè)對(duì)象又想使用簡(jiǎn)潔函數(shù)體的話，需要這么寫(xiě)：

var fn = () => ({});
fn();   // {}

如果寫(xiě)成var fn = () => {};，那么執(zhí)行fn()只能返回undefined。

this

用function生成的函數(shù)會(huì)定義一個(gè)自己的this，而箭頭函數(shù)沒(méi)有自己的this，而是會(huì)和上一層的作用域共享this。

function Person() {
    this.age = 0;
    var self = this;
    setTimeout(function () {
        self.age++;
        console.log(self.age);
    }, 1000);
}
var p = new Person();

這段代碼里，setTimeout的參數(shù)function中需要操作外層的age屬性，必須要把this賦值給self，然后通過(guò)self來(lái)獲取到age

如果使用箭頭函數(shù)則省事很多，代碼如下：

function Person() {
    this.age = 0;
    setTimeout(() => {
        this.age++;
        console.log(this.age);
    }, 1000);
}
var p = new Person();
apply & call

由于箭頭函數(shù)已經(jīng)綁定了this的值，即使使用apply或者call也不能只能起到傳參數(shù)的作用，并不能強(qiáng)行改變箭頭函數(shù)里的this。

var adder = {
    x: 1,
    add1: function (y) {
        var fn = v => v + this.x;
        return fn(y);
    },
    add2: function (y) {
        var fn = v => v + this.x;
        var whatever = {
            x: 2
        };
        return fn.call(whatever, y);
    }
};

adder.add1(1);    // 2
adder.add2(1);    // 仍然是2
arguments

普通函數(shù)里arguments代表了調(diào)用時(shí)傳入的參數(shù)，但是箭頭函數(shù)不然，在箭頭函數(shù)中無(wú)法使用arguments

當(dāng)然，ES6中也有辦法可以讓箭頭函數(shù)像普通函數(shù)一樣使用類似于arguments這樣的類數(shù)組對(duì)象

var fn = (...rest) => rest[0];
fn(2);    // 2

...rest也是ES6的一個(gè)新特性，之后會(huì)介紹。

不能被new

箭頭函數(shù)不能與new關(guān)鍵字一起使用，會(huì)報(bào)錯(cuò)

var Fn = () => {
    this.a = 1;
};
var f = new Fn();    // Error
使用場(chǎng)景

在我看來(lái)，箭頭函數(shù)幾乎可以完全取代function，除非是函數(shù)需要進(jìn)行遞歸或者需要可變的this對(duì)象，其他場(chǎng)景我認(rèn)為都可以使用箭頭函數(shù)。

參考資料

ES6 In Depth: Arrow functions

Arrow functions

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79314.html

相關(guān)文章

  • ES6學(xué)習(xí)筆記

    摘要：所以，如果一個(gè)數(shù)組成員不嚴(yán)格等于，默認(rèn)值是不會(huì)生效的因?yàn)椴粐?yán)格等于對(duì)象解構(gòu)對(duì)象的解構(gòu)與數(shù)組有一個(gè)重要的不同。數(shù)組的元素是按次序排列的，變量的取值由它的位置決定而對(duì)象的屬性沒(méi)有次序，變量必須與屬性同名，才能取到正確的值。 http://es6.ruanyifeng.com/?se... 一、作用域 let //i作用域在全局，每次循環(huán)i都被重新賦值了而覆蓋了之前的值 var a = []...

    Gu_Yan 評(píng)論0 收藏0

  • es6學(xué)習(xí)筆記-箭頭函數(shù)_v1.0_byKL

    摘要：因?yàn)榧^函數(shù)本身沒(méi)有所以不可以當(dāng)作構(gòu)造函數(shù)，也就是說(shuō)，不可以使用命令，否則會(huì)拋出一個(gè)錯(cuò)誤。箭頭函數(shù)不可以使用對(duì)象，該對(duì)象在函數(shù)體內(nèi)不存在。 es6學(xué)習(xí)筆記-箭頭函數(shù)_v1.0 箭頭函數(shù)使用方法 var f = v => v; //普通函數(shù)配合箭頭函數(shù)寫(xiě)法,這里并且是傳參的 //相當(dāng)于 var f = function(v) { return v; }; /*-----------...

    lushan 評(píng)論0 收藏0

  • ES6箭頭函數(shù)學(xué)習(xí)筆記

    摘要：普通函數(shù)里代表了調(diào)用時(shí)傳入的參數(shù)，但是箭頭函數(shù)不然，箭頭函數(shù)會(huì)把當(dāng)成一個(gè)普通的變量，順著作用域鏈由內(nèi)而外地查詢。不能被箭頭函數(shù)不能與關(guān)鍵字一起使用，會(huì)報(bào)錯(cuò)。 語(yǔ)法 具有一個(gè)參數(shù)的簡(jiǎn)單函數(shù) var single = a => a single(hello, world) // hello, world 沒(méi)有參數(shù)的需要用在箭頭前加上小括號(hào) var log = () => { ...

    sydMobile 評(píng)論0 收藏0

  • 學(xué)習(xí)ES6筆記──工作中常用到的ES6語(yǔ)法

    摘要：但是有了尾調(diào)用優(yōu)化之后，遞歸函數(shù)的性能有了提升。常被用來(lái)檢查對(duì)象中是否存在某個(gè)鍵名，集合常被用來(lái)獲取已存的信息。循環(huán)解構(gòu)對(duì)象本身不支持迭代，但是我們可以自己添加一個(gè)生成器，返回一個(gè)，的迭代器，然后使用循環(huán)解構(gòu)和。 一、let和const 在JavaScript中咱們以前主要用關(guān)鍵var來(lái)定義變量，ES6之后，新增了定義變量的兩個(gè)關(guān)鍵字，分別是let和const。對(duì)于變量來(lái)說(shuō)，在ES5中...

    curried 評(píng)論0 收藏0

  • 【前端工程師手冊(cè)】this拾遺之關(guān)于箭頭函數(shù)的種種

    摘要：之前總結(jié)了的一些常見(jiàn)綁定情況前端工程師手冊(cè)之的筆記，但是還有一些沒(méi)有說(shuō)到，今天繼續(xù)學(xué)習(xí)一下。參考資料箭頭函數(shù)你不知道的上卷 之前總結(jié)了this的一些常見(jiàn)綁定情況（【前端工程師手冊(cè)】JavaScript之this的筆記），但是還有一些沒(méi)有說(shuō)到，今天繼續(xù)學(xué)習(xí)一下。 es6箭頭函數(shù) 先說(shuō)結(jié)論：箭頭函數(shù)沒(méi)有自己的this，它是根據(jù)外層(函數(shù)或者全局，后面會(huì)說(shuō)到箭頭函數(shù)作為某個(gè)對(duì)象的方法時(shí)的情況...

    oogh 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<