ES6指北【2】—— 箭頭函數

DobbyKim 發布于2019-08-22 14:57 / 3386人閱讀

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

1.箭頭函數基本語法 1.1 ES3 函數語法

// 具名函數
function xxx(arg1, arg2) {
    console.log(arg1)
    console.log(arg2)
    return arguments
}

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

// 第一句話 聲明xxx
// 第二句話 聲明匿名函數
// 第三句話 把匿名函數賦值給xxx

1.2 箭頭函數語法

特點：只能做賦值，不能做聲明

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

    let xxx = (arg1, arg2) => {
        console.log(arg1)
        console.log(arg2)
        return arg1 + arg2
    }

    第二種寫法【省略參數括號】
    1.參數只有一個
    2.函數體內語句個數 >= 2
    let xxx = arg1 => {
        console.log(arg1)
        return arg1
    }

    第三種寫法【省略函數花括號和return】
    1.參數個數 >= 2
    2.函數體內語句只有一句，且這一句會被return
    let xxx = (arg1, arg2) => arg1 + arg2
    // 如果你加了花括號，就必須把return同時加上去才能夠返回arguments
    let xxx = (arg1, arg2) => {
        return arg1 + arg2
    }

2.為了搞定難搞的this，我們搞出了箭頭函數

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

2.1 箭頭函數不綁定this

    在ES3里，this是Function隱藏的第一個參數
    而且this是什么，是不確定的，因為每個被新定義的函數都會創建自己的this值

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

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

    let p = new Person();

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

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

    xxx.call(window, 1, 2) // Window 1 2

箭頭函數里的this不會被call改變

    let test1 = () => {
        console.log(this)
    }
    test1.call({name: "bruce"}) // window

2.2 如何使用箭頭函數里的this

劃重點：把箭頭函數里的this當做普通變量看待！！！！
劃重點：把箭頭函數里的this當做普通變量看待！！！！
劃重點：把箭頭函數里的this當做普通變量看待！！！！

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

    let p = new Person();

3.使用箭頭函數使得代碼變得簡潔

一般用于回調函數

// 把數組內每一個數都換做其平方數
// 然后再將每個數都減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關鍵字
            console.log(a)
        }
    }

5.箭頭函數其它知識【抄mdn的】 5.1箭頭函數沒有arguments

    let arrow = p1 => {
        console.log(arguments) // 報錯：arguments is not defined
    }
    arrow("xxx")

5.2箭頭函數不可作為構造函數且沒有prototype屬性

    let Foo = () => "test"
    let f1 = new Foo() // 報錯：Foo is not a constructor
    console.log(Foo.prototype) // undefined

GPU云服務器云服務器箭頭函數指北入坑指北 ES6

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93023.html

ES6指北【4】——ES6的函數參數處理，超乎你想象

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

Pandaaa 2019-08-23 11:01 評論0 收藏0
ES6指北【6】——詳談解構賦值【附贈練習題】

摘要：指北詳談解構賦值附贈練習題一何謂解構賦值基本概念首先我們看一下給的定義解構賦值語法是一個表達式，這使得可以將值從數組或屬性從對象提取到不同的變量中從定義中，我們可以發現解構賦值的作用是對變量進行賦值主要通過兩個方面實現這個作用數組將數組中的 ES6指北【6】——詳談解構賦值【附贈練習題】一、何謂解構賦值？ 1. 基本概念首先我們看一下MDN給的定義解構賦值語法是一個 Javasc...

sorra 2019-08-23 11:33 評論0 收藏0
ES6指北【1】——let、const

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

張春雷 2019-08-26 11:45 評論0 收藏0
ES6指北【1】——let、const

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

tain335 2019-08-01 18:35 評論0 收藏0
ES6指北【5】——展開語法(spread syntax)

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

ZoomQuiet 2019-08-26 12:16 評論0 收藏0