1. 箭頭函數(shù)的使用

ES6 中新增了使用箭頭=>來(lái)定義函數(shù)表達(dá)式的方法。很多情況下，箭頭函數(shù)和函數(shù)表達(dá)式創(chuàng)建的函數(shù)并無(wú)區(qū)別，只有寫(xiě)法上的不同。

本文第二塊內(nèi)容將介紹箭頭函數(shù)和普通函數(shù)功能上的區(qū)別。

1. 普通函數(shù)到箭頭函數(shù)

如下所示，定義一個(gè)函數(shù)，可以使用function關(guān)鍵字，函數(shù)接收兩個(gè)參數(shù)a和b，返回a和b的和。

function getSum(a, b) {
    return a + b;
}

若使用箭頭函數(shù)來(lái)定義這個(gè)函數(shù)，可以寫(xiě)成如下形式，省略function關(guān)鍵字，用箭頭=>定義一個(gè)函數(shù)。

const getSum = (a, b) => {
    return a + b;
};

2. 省略大括號(hào)和 return

若定義的箭頭函數(shù)，函數(shù)體內(nèi)只有return語(yǔ)句，則可以省略大括號(hào){}和return。

如下所示，定義的箭頭函數(shù)，完整寫(xiě)法。

const getSum = (a, b) => {
    return a + b;
};

此箭頭函數(shù)的函數(shù)體內(nèi)只有return語(yǔ)句，那么，省略了大括號(hào){}和return后的精簡(jiǎn)寫(xiě)法如下：

const getSum = (a, b) => a + b;

3. 省略小括號(hào)

若定義的箭頭函數(shù)，參數(shù)只有一個(gè)，則可以省略小括號(hào)。

如下所示，定義的箭頭函數(shù)，只有一個(gè)參數(shù)，完整寫(xiě)法。

const func = (a) => {
    return a + 2;
};

省略了參數(shù)旁邊的小括號(hào)，以下代碼等價(jià)于上面的代碼。

const func = a => a + 2;

注意：若函數(shù)沒(méi)有參數(shù)，或者多個(gè)參數(shù)的情況下，必須要使用括號(hào)。

2. 箭頭函數(shù)與普通函數(shù)的區(qū)別

大多數(shù)情況下，能使用普通函數(shù)的地方都可以用箭頭函數(shù)代替，因?yàn)榧^函數(shù)更精簡(jiǎn)。

但在部分情況下，箭頭函數(shù)與普通函數(shù)有著很大的卻別。

1. 箭頭函數(shù)的 this 是父級(jí)作用域的 this

如下代碼，定義了一個(gè)對(duì)象obj，對(duì)象中有個(gè)普通函數(shù)定義的方法getThis，打印出此處的this。調(diào)用obj.getThis()，會(huì)打印出obj對(duì)象。這說(shuō)明方法內(nèi)部的this指向?qū)ο?code>obj。

const obj = {
    name: 'Jack',
    getThis() {
        console.log(this);
    },
};
obj.getThis(); // {name: 'Jack', getThis: ƒ}

同樣定義一個(gè)對(duì)象obj，但里面的方法用箭頭函數(shù)定義，瀏覽器中調(diào)用obj.getThis()卻打印出Window，這說(shuō)明即使調(diào)用obj對(duì)象身上的方法，方法內(nèi)部的this也不會(huì)指向obj，而是指向定義obj的上下文的this。

const obj = {
    name: 'Jack',
    getThis: () => {
        console.log(this);
    },
};
obj.getThis(); // Window

2. call、apply、bind無(wú)法改變箭頭函數(shù)的 this

如下代碼，普通函數(shù)getName打印this.name，通過(guò)call將函數(shù)中的this綁定到obj身上，調(diào)用getName打印出obj身上的屬性name。

const obj = {
    name: 'Jack',
};

function getName() {
    console.log(this.name);
}
getName.call(obj); // Jack

若將函數(shù)改成箭頭函數(shù)，那么call將不起作用，無(wú)法將函數(shù)內(nèi)部的this綁定到obj，打印出undefined。

const obj = {
    name: 'Jack',
};

const getName = () => {
    console.log(this.name);
};
getName.call(obj); // undefined

3. 不可以作為構(gòu)造函數(shù)

箭頭函數(shù)不可以作為構(gòu)造函數(shù)使用，若將箭頭函數(shù)作為構(gòu)造函數(shù)，將報(bào)錯(cuò)，如下代碼所示。

const Person = () => {
    this.name = 'Jack';
};
const usr = new Person(); // Person is not a constructor

4. 不可以使用 arguments

在普通函數(shù)內(nèi)部，可以使用arguments來(lái)獲取傳入的參數(shù)，是一個(gè)類(lèi)數(shù)組對(duì)象：

function func() {
    console.log(arguments);
}
func(1, 2, 3); // [Arguments] { '0': 1, '1': 2, '2': 3 }

而箭頭函數(shù)就不可以使用arguments對(duì)象，獲取不到輸入的參數(shù)。

在瀏覽器中，若在箭頭函數(shù)使用arguments對(duì)象，將報(bào)錯(cuò)。

const func = () => {
    // 瀏覽器環(huán)境
    console.log(arguments); // arguments is not defined
};
func(1, 2, 3);

但是箭頭函數(shù)可以在參數(shù)內(nèi)，以...args的方式，獲取到輸入的參數(shù)，得到的args是一個(gè)數(shù)組。

const func = (...args) => {
    console.log(args); // [ 1, 2, 3 ]
};
func(1, 2, 3);

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

普通函數(shù)定義的構(gòu)造函數(shù)內(nèi)部，支持使用new.target，返回構(gòu)造實(shí)例的構(gòu)造函數(shù)。

function Person() {
    this.name = 'Jack';
    console.log(new.target);
}
// 指向構(gòu)造函數(shù)
new Person(); // [Function: Person]

而在箭頭函數(shù)中，不支持使用new.target。在瀏覽器環(huán)境中，箭頭函數(shù)使用new.target將報(bào)錯(cuò)：new.target expression is not allowed here。

const Person=() =>{
    this.name = 'Jack';
    console.log(new.target);
}
// 瀏覽器環(huán)境
new Person(); // new.target expression is not allowed here

本文參考：

《JavaScript高級(jí)程序設(shè)計(jì)（第4版）》

到此這篇關(guān)于JavaScript 箭頭函數(shù)的特點(diǎn)、與普通函數(shù)的區(qū)別的文章就介紹到這了,更多相關(guān)js箭頭函數(shù)普通函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論