ES6中的箭頭函數(shù)怎么使用

這篇文章主要介紹“ES6中的箭頭函數(shù)怎么使用”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“ES6中的箭頭函數(shù)怎么使用”文章能幫助大家解決問題。

一、箭頭函數(shù)的介紹

1.1 什么是箭頭函數(shù)

ES6中允許使用=>來定義函數(shù)。箭頭函數(shù)相當(dāng)于匿名函數(shù)，并簡化了函數(shù)定義。

1.2 基本語法

// 箭頭函數(shù)
let fn = (name) => {
    // 函數(shù)體
    return `Hello ${name} !`;
};

// 等同于
let fn = function (name) {
    // 函數(shù)體
    return `Hello ${name} !`;
};

箭頭函數(shù)在語法上比普通函數(shù)簡潔多。箭頭函數(shù)就是采用箭頭=>來定義函數(shù)，省去關(guān)鍵字function。

函數(shù)的參數(shù)放在=>前面的括號(hào)中，函數(shù)體跟在=>后的花括號(hào)中

1.3 箭頭函數(shù)的參數(shù)

①如果箭頭函數(shù)沒有參數(shù)，寫空括號(hào)

//沒有參數(shù)，寫空括號(hào)
    let fn = () => {
        console.log('hello');
    };

②如果箭頭函數(shù)有一個(gè)參數(shù)，也可以省去包裹參數(shù)的括號(hào)

//只有一個(gè)參數(shù)，可以省去參數(shù)括號(hào)
    let fn = name => {
        console.log(`hello ${name}!`)
    };

③如果箭頭函數(shù)有多個(gè)參數(shù)，將參數(shù)依次用逗號(hào)(,)分隔，包裹在括號(hào)中。

    let fn = (val1, val2, val3, val4) => {
        return [val1, val2, val3, val4];
    }

1.4 箭頭函數(shù)的函數(shù)體

①如果箭頭函數(shù)的函數(shù)體只有一句執(zhí)行代碼，簡單返回某個(gè)變量或者返回一個(gè)簡單的js表達(dá)式，可以省去函數(shù)體花括號(hào){ }

//返回某個(gè)簡單變量val
let f = val => val;
// 等同于
let f = function (val) { return val };


//返回一個(gè)簡單的js表達(dá)式num1+num2
let sum = (num1, num2) => num1 + num2;
// 等同于
let sum = function(num1, num2) {
  return num1 + num2;
};

②如果箭頭函數(shù)的函數(shù)體只有一句代碼，返回的不是變量和簡單的js表達(dá)式，而是一個(gè)對(duì)象。

//錯(cuò)誤寫法—花括號(hào)會(huì)被解釋為函數(shù)體
    let getItem = id => {
        id: id,
        name: 'gaby'
    };
//正確寫法
    let getItem = id => ({
        id: id,
        name: 'gaby'
    });

③如果箭頭函數(shù)的函數(shù)體只有一條語句且不需要返回值（最常用于回調(diào)函數(shù)），加上void關(guān)鍵字

let fn = () => void doesNotReturn();

箭頭函數(shù)用于回調(diào)函數(shù)，常見簡潔

//栗子1
//普通函數(shù)
    [1, 2, 3].map(function (x) {
        return x + x;
    });
//ES6箭頭函數(shù)
[1, 2, 3].map(x => x + x);

//栗子2
//普通函數(shù)
    var result = [2, 4, 5, 1, 6].sort(function (a, b) {
        return a - b;
    });
//ES6箭頭函數(shù)
	var result = [2, 4, 5, 1, 6].sort((a, b) => a - b);

二、箭頭函數(shù)的this指向規(guī)則

2.1 箭頭函數(shù)沒有原型prototype，因此箭頭函數(shù)沒有this指向

    let fn = () => {
        console.log('Hello World !')
    };
    console.log(fn.prototype); // undefined

2.2 箭頭函數(shù)不會(huì)創(chuàng)建自己的this，如果存在外層第一個(gè)普通函數(shù)，在定義的時(shí)候會(huì)繼承它的this

箭頭函數(shù)沒有自己的this指向，它會(huì)捕獲自己定義所處的外層執(zhí)行環(huán)境，并且繼承這個(gè)this值。箭頭函數(shù)的this指向在被定義的時(shí)候就確定了，之后永遠(yuǎn)都不會(huì)改變。（！永遠(yuǎn)）

（1）栗子1

    var id = 'Global';
    //普通函數(shù)
    function fn1() {
        setTimeout(function () {
            console.log(this.id)

        }, 1000);
    }
    //箭頭函數(shù)
    function fn2() {
        setTimeout(() => {
            console.log(this.id)
        }, 1000);
    }

    fn1.call({
        id: 'obj'
    });//Global

    fn2.call({
        id: 'obj'
    });//obj

解析：普通函數(shù)的setTimeout 一秒后執(zhí)行是在全局作用域，所有this指向window對(duì)象，this.id指向了全局變量id，輸出Golbal。箭頭函數(shù)的this在定義的時(shí)候就確定了，繼承fn2的執(zhí)行環(huán)境中的this，fn2的this指向被call方法改變綁定到obj這個(gè)對(duì)象

（2）栗子2

    var id = 'Global';
    var obj = {
        id: 'OBJ',
        a: function () {
            console.log(this.id)
        },//方法a普通函數(shù)定義
        b: () => {
            console.log(this.id)
        }//方法b用箭頭函數(shù)定義
    };
    obj.a();//OBJ
    obj.b();//Global

解析：普通函數(shù)作為對(duì)象的方法調(diào)用，this指向所屬的對(duì)象（誰調(diào)用它就指向誰），this.id 就是obj.id；箭頭函數(shù)繼承定義它的執(zhí)行環(huán)境的this，指向window對(duì)象，指向全局變量，輸出Global?；ɡㄌ?hào){}無法形成一個(gè)單獨(dú)的執(zhí)行環(huán)境，所有它依然在全局中。

2.3 箭頭函數(shù)的this是繼承而來的永遠(yuǎn)不會(huì)變，call/apply/bind也無法改變

.call()/.apply()/.bind()方法可以用來動(dòng)態(tài)修改函數(shù)執(zhí)行時(shí)this的指向，但由于箭頭函數(shù)的this定義時(shí)就已經(jīng)確定且永遠(yuǎn)不會(huì)改變

    var name = 'gaby'
    var person = {
        name: 'gabrielle',
        say: function () {
            console.log('say hello', this.name)
        }, //普通函數(shù)
        say2: () => {
            console.log('say2 hello', this.name)
        } //箭頭函數(shù)
    }
    person.say.call({
        name: 'Mike'
    })
    person.say2.call({
        name: 'Amy'
    })

解析：say的普通函數(shù)通過call調(diào)用已經(jīng)改變this指向。say2箭頭函數(shù)調(diào)用call綁定嘗試改變this指向，但是仍然打印出外一層普通函數(shù)的this指向，window對(duì)象的全局變量name。

2.4 箭頭函數(shù)this指向只能間接修改

間接修改：修改被繼承的普通函數(shù)的this指向，箭頭函數(shù)的this指向也會(huì)跟著改變。

箭頭函數(shù)的this指向定義時(shí)所在的外層第一個(gè)普通函數(shù)，跟使用的位置沒有關(guān)系。

    let al
    let aObj = {
        msg: 'a的this指向'
    };
    bObj = {
        msg: 'b的this指向'
    };
    a.call(aObj); //將a的this指向aObj
    b.call(bObj); //將b普通函數(shù)的this指向bObj 箭頭函數(shù)內(nèi)部的this指向也會(huì)指向bObj

    function b() {
        al();
    }

    function a() {
        al = () => {
            console.log(this, 'this指向定義時(shí)外層第一個(gè)普通函數(shù) ')
        };
    }

2.5 箭頭函數(shù)外層沒有函數(shù)，嚴(yán)格模式和非嚴(yán)格模式下它的this都會(huì)指向window全局對(duì)象

箭頭函數(shù)的this指向繼承自外層第一個(gè)普通函數(shù)的this，那么如果沒有外層函數(shù)，它的this指向哪里？

this的綁定規(guī)則：非嚴(yán)格模式下，默認(rèn)綁定的this指向全局對(duì)象，嚴(yán)格模式下this指向undefined。

如果箭頭函數(shù)外層沒有普通函數(shù)繼承，箭頭函數(shù)在全局作用域下，嚴(yán)格模式和非嚴(yán)格模式下它的this都會(huì)指向window(全局對(duì)象)

2.6 多層嵌套函數(shù)this指向

箭頭函數(shù)中的this引用的是最近作用域中的this，是向外層作用域中，一層層查找this，直到有this的定義。

2.7 箭頭函數(shù)不能作為構(gòu)造函數(shù)使用new

構(gòu)造函數(shù)做了什么？

①JS內(nèi)部首先會(huì)先生成一個(gè)對(duì)象

②再把函數(shù)中的this指向該對(duì)象

③然后執(zhí)行構(gòu)造函數(shù)中的語句

④最終返回該對(duì)象實(shí)例

箭頭函數(shù)沒有自己的this，this繼承外層執(zhí)行環(huán)境中的this，且this永遠(yuǎn)不會(huì)改變。new會(huì)報(bào)錯(cuò)

    let fn = (name, age) => {
        this.name = name;
        this.age = age;
    };

    let person = new fn('gaby', 20)

2.8 箭頭函數(shù)不支持new.target

ES6新引入的屬性，普通函數(shù)可以通過new調(diào)用，new.target返回該函數(shù)的引用。用于確定構(gòu)造函數(shù)是否為new調(diào)用。箭頭函數(shù)并不能作為構(gòu)造函數(shù)使用new，自然也不支持new.targer。

（1）箭頭函數(shù)的this指向全局對(duì)象，在箭頭函數(shù)中使用箭頭函數(shù)會(huì)報(bào)錯(cuò)

    let fn = () => {
        console.log(new.target)
    };
    fn()

（2）箭頭函數(shù)的this指向普通函數(shù)，它的new.target就是指向該普通函數(shù)的引用

    new fn2();

    function fn2() {
        let fn = () => {
            console.log(new.target)
        };
        fn();
    }

三、箭頭函數(shù)的arguments規(guī)則

3.1 箭頭函數(shù)沒有自己的arguments

（1）箭頭函數(shù)處于全局作用域中

箭頭函數(shù)的this指向全局對(duì)象，會(huì)報(bào)arguments未聲明的錯(cuò)。

    let fn = name => {
        console.log(arguments)
    }
    let fn2 = function (name) {
        console.log(arguments)
    }
    //fn()
    fn2()

    let fn = name => {
        console.log(arguments)
    }
    let fn2 = function (name) {
        console.log(arguments)
    }
    fn()
    fn2()

解析：普通函數(shù)可以打印arguments，箭頭函數(shù)報(bào)錯(cuò)。因?yàn)榧^函數(shù)處于全局作用域中，在全局作用域沒有arguments的定義，箭頭函數(shù)本身沒有arguments，所以報(bào)錯(cuò)。

（2）箭頭函數(shù)的this如果指向普通函數(shù),它的argumens繼承于該普通函數(shù)

    let fn2 = function (name) {
        console.log('fn2:', arguments)
        let fn = name => {
            console.log('fn:', arguments)
        }
        fn()
    }
    fn2('gaby')

解析：兩個(gè)函數(shù)打印的argument相同，都是fn2函數(shù)的arguments。

總結(jié)

箭頭函數(shù)沒有自己的arguments對(duì)象。在箭頭函數(shù)中訪問arguments實(shí)際上獲得的是外層局部（函數(shù)）執(zhí)行環(huán)境中的值。

3.2 可以用rest替代，rest參數(shù)獲取函數(shù)的多余參數(shù)

rest是ES6的API，用于獲取函數(shù)不定數(shù)量的參數(shù)數(shù)組。這個(gè)API可以用來替代arguments。

（1）基本用法

    //形式是...變量名 
	let fn = (first, ...arr) => {
        console.log(first, arr);
    }
    fn(1, 2, 3, 4);

解析：rest 參數(shù)搭配的變量是一個(gè)數(shù)組，該變量將多余的參數(shù)放入數(shù)組中。獲取函數(shù)的第一個(gè)確定的參數(shù)，以及用一個(gè)變量接收其他剩余函數(shù)的實(shí)例。

（2）使用注意事項(xiàng)

①rest必須是函數(shù)的最后一位參數(shù)

    let a = (first, ...rest, three) => {
        console.log(first, rest, three);
    };
    a(1, 2, 3, 4);

②函數(shù)的length屬性不包括rest

（3）rest和arguments函數(shù)比較

①箭頭函數(shù)和普通函數(shù)都可以使用rest參數(shù)，而arguments只能普通函數(shù)用。

②接收參數(shù)rest比arguments更加靈活，完全可以自定義。

③rest是一個(gè)真正的數(shù)組可以使用數(shù)組API，arguments只是一個(gè)類數(shù)組。

3.3 箭頭函數(shù)不支持重復(fù)函數(shù)參數(shù)的名稱

    function fn(name, name) {
        console.log('fn2:', name)
    }
    let fn2 = (name, name) => {
        console.log('fn:', name)
    }
    fn('wang', 'gaby')
    fn2('wang', 'gaby')

3.4 箭頭函數(shù)不能用作Generator，不能使用yeild關(guān)鍵字 四、箭頭函數(shù)的注意事項(xiàng)

①函數(shù)箭頭一條語句返回對(duì)象字面量，需要加括號(hào)。

②箭頭函數(shù)在參數(shù)和箭頭之間不能換行

③箭頭函數(shù)的解析順序相對(duì)||靠前

五、箭頭函數(shù)不適用場(chǎng)景

（1）對(duì)象方法，且方法使用了this

對(duì)象無法構(gòu)造單獨(dú)的作用域

    var name = 'gaby'
    var person = {
        name: 'gabrielle',
        say: function () {
            console.log('say hello', this.name)
        }, //普通函數(shù)
        say2: () => {
            console.log('say2 hello', this.name)
        } //箭頭函數(shù)
    }
    person.say()
    person.say2()

解析：person.say2()方法是一個(gè)箭頭函數(shù)，調(diào)用person.say2()的時(shí)候this指向全局對(duì)象，達(dá)不到預(yù)期。對(duì)象無法構(gòu)成單獨(dú)的作用域，定義say2()箭頭函數(shù)的時(shí)候作用域在全局作用域。

（2）回調(diào)函數(shù)的動(dòng)態(tài)this

    var button = document.querySelector('.btn');
    button.addEventListener('click', () => {
        this.classList.toggle('on');
    });

解析：報(bào)錯(cuò)。按鈕點(diǎn)擊是一個(gè)回調(diào)函數(shù)，而箭頭函數(shù)內(nèi)部的this指向外一層普通函數(shù)的this，在這里就是window，所以報(bào)錯(cuò)。改成普通函數(shù)就不會(huì)報(bào)錯(cuò)

關(guān)于“ES6中的箭頭函數(shù)怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。