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

資訊專欄INFORMATION COLUMN

ES6指北【2】—— 箭頭函數(shù)

DobbyKim / 3392人閱讀

摘要：箭頭函數(shù)基本語法函數(shù)語法具名函數(shù)匿名函數(shù)三句話第一句話聲明第二句話聲明匿名函數(shù)第三句話把匿名函數(shù)賦值給箭頭函數(shù)語法特點只能做賦值，不能做聲明第一種寫法完全寫法不省略參數(shù)個數(shù)，不省略函數(shù)體花括號參數(shù)個數(shù)函數(shù)體內(nèi)語句個數(shù)第二種寫法省略參數(shù)括號參

1.箭頭函數(shù)基本語法 1.1 ES3 函數(shù)語法 
// 具名函數(shù)
function xxx(arg1, arg2) {
    console.log(arg1)
    console.log(arg2)
    return arguments
}

// 匿名函數(shù)(三句話)
let xxx = function (arg1, arg2) {
    console.log(arg1)
    console.log(arg2)
    return arguments
}

// 第一句話 聲明xxx
// 第二句話 聲明匿名函數(shù)
// 第三句話 把匿名函數(shù)賦值給xxx
1.2 箭頭函數(shù)語法 
特點：只能做賦值，不能做聲明

    第一種寫法【完全寫法 —— 不省略參數(shù)個數(shù)，不省略函數(shù)體花括號】
    1.參數(shù)個數(shù) >= 2
    2.函數(shù)體內(nèi)語句個數(shù) >= 2

    let xxx = (arg1, arg2) => {
        console.log(arg1)
        console.log(arg2)
        return arg1 + arg2
    }
    第二種寫法【省略參數(shù)括號】
    1.參數(shù)只有一個
    2.函數(shù)體內(nèi)語句個數(shù) >= 2
    let xxx = arg1 => {
        console.log(arg1)
        return arg1
    }
    第三種寫法【省略函數(shù)花括號和return】
    1.參數(shù)個數(shù) >= 2
    2.函數(shù)體內(nèi)語句只有一句，且這一句會被return
    let xxx = (arg1, arg2) => arg1 + arg2
    // 如果你加了花括號，就必須把return同時加上去才能夠返回arguments
    let xxx = (arg1, arg2) => {
        return arg1 + arg2
    }
2.為了搞定難搞的this，我們搞出了箭頭函數(shù)

ES3 支持 this，關(guān)于this在ES3中的使用
請看this總結(jié)【1】—— this概覽和this總結(jié)【2】—— call/apply和bind
ES6 的箭頭函數(shù)弱化了this的用法

2.1 箭頭函數(shù)不綁定this 
    在ES3里，this是Function隱藏的第一個參數(shù)
    而且this是什么，是不確定的，因為每個被新定義的函數(shù)都會創(chuàng)建自己的this值

    function Person() {
        // Person() 構(gòu)造函數(shù)定義 `this`作為它自己的實例.
        this.age = 0;

        setInterval(function growUp() {
            // 在非嚴(yán)格模式, growUp()函數(shù)定義 `this`作為全局對象,
            // 與在 Person()構(gòu)造函數(shù)中定義的 `this`并不相同.
            this.age++;
        }, 1000);
    }

    let p = new Person();

    不同函數(shù)里的this可能總是不一樣，而且沒有什么規(guī)律和邏輯，很難使用
    因此，我們在調(diào)用函數(shù)的時候，高級寫法就是使用call
    這樣，我們在代碼未執(zhí)行前就能確定this的值是什么

    function xxx(/*this,*/arg1, arg2) {
        console.log(this, arg1, arg2)
    }

    xxx.call(window, 1, 2) // Window 1 2
箭頭函數(shù)里的this不會被call改變
    let test1 = () => {
        console.log(this)
    }
    test1.call({name: "bruce"}) // window
2.2 如何使用箭頭函數(shù)里的this

劃重點：把箭頭函數(shù)里的this當(dāng)做普通變量看待?。。?！
劃重點：把箭頭函數(shù)里的this當(dāng)做普通變量看待?。。?！
劃重點：把箭頭函數(shù)里的this當(dāng)做普通變量看待?。。?！

    function Person() {
        this.age = 0;
        let a = 0
        setInterval(() => {
            console.log(a) // 請問a去哪兒找？Person的作用域
            this.age++; // 請問this去哪兒找？Person的作用域
            // 這樣，|this| 就能正確地指向person對象，你也再也不用管call的第一個參數(shù)到底傳的是啥了
        }, 1000);
    }

    let p = new Person();
3.使用箭頭函數(shù)使得代碼變得簡潔

一般用于回調(diào)函數(shù)

// 把數(shù)組內(nèi)每一個數(shù)都換做其平方數(shù)
// 然后再將每個數(shù)都減2
// 【使用map方法】
// 請問該怎么寫？？

// ES3寫法
let arr = [1, 3, 4, 6, 7]
arr.map(function (number) {
    return number * number
}).map(function (number) {
    return number - 2
})

// ES6寫法
arr.map(number => number * number).map(number => number - 2)
4.ES6Function作為方法時的簡寫 
    let obj = {
        console: function (a) {
            console.log(a)
        }
    }
    // 等價于
    let obj = {
        console(a) { // 刪去了冒號和function關(guān)鍵字
            console.log(a)
        }
    }
5.箭頭函數(shù)其它知識【抄mdn的】 5.1箭頭函數(shù)沒有arguments 
    let arrow = p1 => {
        console.log(arguments) // 報錯：arguments is not defined
    }
    arrow("xxx")
5.2箭頭函數(shù)不可作為構(gòu)造函數(shù)且沒有prototype屬性 
    let Foo = () => "test"
    let f1 = new Foo() // 報錯：Foo is not a constructor
    console.log(Foo.prototype) // undefined

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

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

相關(guān)文章

  • ES6指北【4】——ES6的函數(shù)參數(shù)處理，超乎你想象

    摘要：參數(shù)搭配的變量是一個數(shù)組，該變量將多余的參數(shù)放入數(shù)組中。從上面的概念中，我們至少可以知道如下三個信息語法變量。 一、函數(shù)的默認(rèn)參數(shù)值 1. ES6之前，我們?nèi)绾螌崿F(xiàn)函數(shù)默認(rèn)參數(shù) 1.1 方式一：使用邏輯運(yùn)算符【||】 function test(x) { x = x || 默認(rèn)值 // 使用||設(shè)置默認(rèn)值 console.log(x) } test() // 默認(rèn)值 但這樣...

    Pandaaa 評論0 收藏0

  • ES6指北【6】——詳談解構(gòu)賦值【附贈練習(xí)題】

    摘要：指北詳談解構(gòu)賦值附贈練習(xí)題一何謂解構(gòu)賦值基本概念首先我們看一下給的定義解構(gòu)賦值語法是一個表達(dá)式，這使得可以將值從數(shù)組或?qū)傩詮膶ο筇崛〉讲煌淖兞恐袕亩x中，我們可以發(fā)現(xiàn)解構(gòu)賦值的作用是對變量進(jìn)行賦值主要通過兩個方面實現(xiàn)這個作用數(shù)組將數(shù)組中的 ES6指北【6】——詳談解構(gòu)賦值【附贈練習(xí)題】 一、何謂解構(gòu)賦值？ 1. 基本概念 首先我們看一下MDN給的定義 解構(gòu)賦值語法是一個 Javasc...

    sorra 評論0 收藏0

  • ES6指北【1】——let、const

    摘要：如何學(xué)習(xí)的學(xué)習(xí)順序以此類推沒學(xué)好就別想學(xué)好邊學(xué)邊用學(xué)了就要用變量聲明的方式上面兩個是的語法，下面兩個是的語法塊級作用域看會聲明一個全局變量嗎顯然當(dāng)聲明了全局變量后，是無法再聲明全局變量的，只能對其賦值結(jié)論含義不明的問題下面的代碼不會執(zhí) 1.如何學(xué)習(xí)ES6 1.1 js的學(xué)習(xí)順序 ES5 -> ES6 -> ES7 -> ES8 以此類推 ES5沒學(xué)好就別想學(xué)好ES6 1.2 邊學(xué)邊用 ...

    張春雷 評論0 收藏0

  • ES6指北【1】——let、const

    摘要：如何學(xué)習(xí)的學(xué)習(xí)順序以此類推沒學(xué)好就別想學(xué)好邊學(xué)邊用學(xué)了就要用變量聲明的方式上面兩個是的語法，下面兩個是的語法塊級作用域看會聲明一個全局變量嗎顯然當(dāng)聲明了全局變量后，是無法再聲明全局變量的，只能對其賦值結(jié)論含義不明的問題下面的代碼不會執(zhí) 1.如何學(xué)習(xí)ES6 1.1 js的學(xué)習(xí)順序 ES5 -> ES6 -> ES7 -> ES8 以此類推 ES5沒學(xué)好就別想學(xué)好ES6 1.2 邊學(xué)邊用 ...

    tain335 評論0 收藏0

  • ES6指北【5】——展開語法(spread syntax)

    摘要：我們先來看一看的官方定義展開語法可以在函數(shù)調(diào)用數(shù)組構(gòu)造時將數(shù)組表達(dá)式或者在語法層面展開還可以在構(gòu)造字面量對象時將對象表達(dá)式按的方式展開。 我們先來看一看MDN的官方定義 展開語法(Spread syntax), 可以在函數(shù)調(diào)用/數(shù)組構(gòu)造時, 將數(shù)組表達(dá)式或者string在語法層面展開；還可以在構(gòu)造字面量對象時, 將對象表達(dá)式按key-value的方式展開。(譯者注: 字面量一般指 [1...

    ZoomQuiet 評論0 收藏0

發(fā)表評論

0條評論

DobbyKim

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<