欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript 箭頭函數(shù)的特點(diǎn)、與普通函數(shù)的區(qū)別

 更新時(shí)間:2021年11月02日 09:00:48   作者:火星飛鳥(niǎo)  
這篇文章主要介紹了JavaScript 箭頭函數(shù)的特點(diǎn)、與普通函數(shù)的區(qū)別,很多情況下,箭頭函數(shù)和函數(shù)表達(dá)式創(chuàng)建的函數(shù)并無(wú)區(qū)別,只有寫(xiě)法上的不同,本文第二塊內(nèi)容將介紹箭頭函數(shù)和普通函數(shù)功能上的區(qū)別,感興趣的朋友跟隨小編一起看看吧

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ù)ab,返回ab的和。

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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論