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

資訊專欄INFORMATION COLUMN

es6 - 箭頭函數(shù)

13651657101 / 3156人閱讀

摘要：也就是說箭頭函數(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)槭褂昧?b>=>這樣類似箭頭的符號(hào) ，所以才叫箭頭函數(shù)。 瞬間感覺：“呵，這名字起的...”。

es6增加了箭頭函數(shù)的特性當(dāng)然不是為了裝B，它可以看作是js中函數(shù)的一次進(jìn)化。

我們知道，在js中，函數(shù)有著不一樣的地位，除了作為普通函數(shù)外，它可以用來構(gòu)造自定義類型，作為對(duì)象的方法，通過調(diào)用bind方法得到一個(gè)新函數(shù)。在后三者的使用中，大多數(shù)情況下都要用到一個(gè)特性 this。

函數(shù)中，this是動(dòng)態(tài)綁定的，它的值是根據(jù)調(diào)用的上下文來確定的，關(guān)于函數(shù)的4種使用方式，書中都已經(jīng)有了詳細(xì)介紹，不再贅述。但是，this在帶來強(qiáng)大能力的同時(shí)，也增加了編程錯(cuò)誤的幾率。即使是有經(jīng)驗(yàn)的開發(fā)者，在使用this時(shí)，也可能因?yàn)槭韬龆鴮?dǎo)致錯(cuò)誤，而且，它會(huì)讓代碼更加難以理解。

箭頭函數(shù)，可以解決上面的問題。

而且，箭頭函數(shù)可以寫的非常的簡(jiǎn)潔。

語法 箭頭函數(shù)簡(jiǎn)潔的語法

程序員很懶的，我們熱衷于各種腳本語言，語法糖。不就是因?yàn)樗麄兡軌蜃岄_發(fā)更有效率，讓代碼寫的更少，更爽嗎？箭頭函數(shù)簡(jiǎn)化了函數(shù)的語法。

(arg1, arg2, ...) => {
    //...
}

上面是一個(gè)標(biāo)準(zhǔn)的箭頭函數(shù)的寫法，左邊的()中填入函數(shù)參數(shù)，右邊的{}中寫入執(zhí)行語句。

當(dāng)函數(shù)參數(shù)只有一個(gè)時(shí)，()可以省略。 當(dāng)右邊{}中只有單行語句時(shí)，{}可以省略。可能有下面這種形式：

let square = x => x*x ;

它相當(dāng)于普通函數(shù)的

let square = function(x){
    return x*x;
}

箭頭函數(shù)的用法有以下幾種：

let sum = (num1, num2) => num1 + num2 ; //作為普通函數(shù)使用

let arr2 = [1,2,3,4].map( item => item*2 ); //作為回調(diào)使用

(() => { //語句... })();                    //作為立即執(zhí)行的匿名函數(shù)使用
箭頭函數(shù)中的this

箭頭函數(shù)與普通函數(shù)最大的不同就是this，前面已經(jīng)講過了，普通函數(shù)中this是根據(jù)上下文確定的。而在箭頭函數(shù)中，沒有this綁定。

也就是說箭頭函數(shù)的this的值不再根據(jù)調(diào)用時(shí)上下文確定，而是像普通變量那樣根據(jù)定義時(shí)的作用域鏈進(jìn)行查找。如果箭頭函數(shù)外部是一個(gè)非箭頭函數(shù)，箭頭函數(shù)內(nèi)部this的值就與該函數(shù)一致。 如果箭頭函數(shù)外部是全局環(huán)境，那么this的值就是全局對(duì)象 - window(瀏覽器環(huán)境)或global(node環(huán)境)。
比如：

var PageHandler = {
    id: "123456",
    init: function(){
        document.addEventListener("click",
            event => this.doSomething(event.type), false);
    },
    doSomething: function(type){
        console.log("Handling" + type + "for" + this.id);
    }
}

在上面這段代碼中，由于箭頭函數(shù)中this與其外部init函數(shù)保持一致，因此，this保存的就是PageHandler對(duì)象的引用，所以可以調(diào)用doSomething方法。

如果使用普通函數(shù)代替箭頭函數(shù)，那么這樣使用this會(huì)導(dǎo)致錯(cuò)誤，因?yàn)檫@時(shí)this指向的document對(duì)象。 通用的解決方法是在init中保存this的引用var _this = this，然后使用_this代替this。

箭頭函數(shù)的arguments

js函數(shù)中的arguments給了我們操作函數(shù)參數(shù)極大的便捷和靈活性。 但是，同this一樣，在箭頭函數(shù)中，沒有arguments綁定。

箭頭函數(shù)中的arguments依然要根據(jù)定義時(shí)的作用域鏈進(jìn)行查找。

雖然，箭頭函數(shù)中我們無法再使用arguments來操作函數(shù)參數(shù)， 但是我們可以使用es6中的剩余參數(shù)特性來獲得同以前arguments同樣的效果。比如：

let sum = (...rest) => console.log(rest.length)

注意事項(xiàng)

在使用箭頭函數(shù)的簡(jiǎn)寫形式時(shí)，要注意一點(diǎn)：

let getData = () => {name: "icode007", age: 27}; //會(huì)報(bào)錯(cuò)

報(bào)錯(cuò)的原因是js把 =>右邊對(duì)象的{}當(dāng)成了函數(shù)體的{}， 因此，要使用()把對(duì)象包裹起來

let getData = () => ({name: "icode007", age: 27});

在箭頭函數(shù)中，不僅僅是this，arguments沒有綁定。

同樣沒有綁定的還有super：es6特性，super指向當(dāng)前對(duì)象的原型對(duì)象，相當(dāng)于Object.getPrototypeOf(this).call(this)

new.target: es6特性，用于確定函數(shù)的使用方式，如果作為普通函數(shù)調(diào)用，該值等于undefined，如果作為構(gòu)造函數(shù)調(diào)用，該值指向新創(chuàng)建對(duì)象實(shí)例的構(gòu)造器。

最佳實(shí)踐

箭頭函數(shù)相比于普通函數(shù)有很多優(yōu)勢(shì)：代碼簡(jiǎn)潔，性能更好，避免了this的問題等，因此可以大量使用。

就個(gè)人感覺來講，箭頭函數(shù)更接近于函數(shù)的原本的能力。如果僅僅是想封裝一段代碼，或是作為回調(diào)函數(shù)使用，而不是用作構(gòu)造函數(shù)，函數(shù)綁定等功能。使用箭頭函數(shù)可以更好?？傊?dāng)你在函數(shù)中無需使用this時(shí)，使用箭頭函數(shù)可能是更好的選擇。

箭頭函數(shù)也有很多不適合的場(chǎng)景：
比如，作為方法使用時(shí)，不要使用箭頭函數(shù)。不要為了過分追求代碼的簡(jiǎn)潔而讓函數(shù)變得難以閱讀和理解等。 知乎這篇文章對(duì)箭頭函數(shù)的一些不適合的場(chǎng)景進(jìn)行了總結(jié)，可以作為參考。

什么時(shí)候不能使用箭頭函數(shù)？：知乎

可以關(guān)注我的專欄學(xué)習(xí)es6, 打算對(duì)es6知識(shí)進(jìn)行一下系統(tǒng)總結(jié)，歡迎共同學(xué)習(xí)。

參考文獻(xiàn): MDN: 箭頭函數(shù)

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

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

相關(guān)文章

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

    摘要：特性介紹箭頭函數(shù)是新增的特性之一，它為這門語言提供了一種全新的書寫函數(shù)的語法。用生成的函數(shù)會(huì)定義一個(gè)自己的，而箭頭函數(shù)沒有自己的，而是會(huì)和上一層的作用域共享。 本文同步自我得博客：http://www.joeray61.com JS中的箭頭 箭頭在JS里并不算是個(gè)新鮮的玩意兒，一直以來，JS都支持-->這樣的箭頭。 很早的時(shí)候有些瀏覽器還不支持JS，當(dāng)時(shí)的人們?yōu)榱思嫒葸@些瀏覽器，需要這...

    Vultr 評(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 評(píng)論0 收藏0

  • ES6 箭頭函數(shù) 從了解到深入

    摘要：有傳聞?wù)f，箭頭函數(shù)的語法，是受到了的影響，并且它與中的語法一樣，共享上下文。箭頭函數(shù)是新增加的一個(gè)特性。箭頭函數(shù)沒有自己的值，其值是通過繼承其它傳入對(duì)象而獲得的通常來說是上一級(jí)外部函數(shù)的的指向。 箭頭函數(shù) 1. 簡(jiǎn)單的定義： 胖箭頭函數(shù) Fat arrow functions，又稱箭頭函數(shù)，是一個(gè)來自ECMAScript 2015（又稱ES6）的全新特性。有傳聞?wù)f，箭頭函數(shù)的語法=>，...

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

  • ES6~你跟箭頭函數(shù)升華之路

    摘要：箭頭函數(shù)簡(jiǎn)單的定義胖箭頭函數(shù)，又稱箭頭函數(shù)，是一個(gè)來自又稱的全新特性。箭頭函數(shù)是新增加的一個(gè)特性。使用箭頭函數(shù)的注意點(diǎn)箭頭函數(shù)在參數(shù)和箭頭之間不能換行。值得注意的一點(diǎn)就是對(duì)象的指向是可變的，但在箭頭函數(shù)內(nèi)是固定的。 箭頭函數(shù) 1. 簡(jiǎn)單的定義： 胖箭頭函數(shù) Fat arrow functions，又稱箭頭函數(shù)，是一個(gè)來自ECMAScript 2015（又稱ES6）的全新特性。有傳聞?wù)f，...

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

  • 關(guān)于ES6中箭頭函數(shù)的this問題

    摘要：對(duì)象的指向是可變的，但是在箭頭函數(shù)中，它是固定的。同樣的由于箭頭函數(shù)沒有自己的所以傳統(tǒng)的顯性綁定無效內(nèi)部的指向外部在的學(xué)習(xí)中，的指向問題一直是個(gè)難點(diǎn)，特別是在對(duì)象方法中使用時(shí)，必須更加小心。由此箭頭函數(shù)在很大程度上減少了我們的困擾。 什么是箭頭函數(shù) 用法 ES6 允許使用箭頭（=>）定義函數(shù) 測(cè)試 var p1 = document.getElementById(test1)...

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

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

0條評(píng)論

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