目錄

• 1. 箭頭函式的使用
• 1. 普通函式到箭頭函式
• 2. 省略大括號和 return
• 3. 省略小括號
• 2. 箭頭函式與普通函式的區別
• 1. 箭頭函式的 this 是父級作用域的 this
• 2. call、apply、bind無法改變箭頭函式的 this
• 3. 不可以作為建構函式
• 4. 不可以使用 arguments
• 5. 箭頭函式不支援 new.target

1. 箭頭函式的使用

ES6 中新增了使用箭頭=>來定義函式表示式的方法。很多情況下，箭頭函式和函式表示式建立的函式並無區別，只有寫法上的不同。

本文第二塊內容將介紹箭頭函式和普通函式功能上的區別。

1. 普通函式到箭頭函式

如下所示，定義一個函式，可以使用function

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

若使用箭頭函式來定義這個函式，可以寫成如下形式，省略function關鍵字，用箭頭=>定義一個函式。

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

2. 省略大括號和 return

若定義的箭頭函式，函式體內只有return語句，則可以省略大括號{}和return。

如下所示，定義的箭頭函式，完整寫法。

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

此箭頭函式的函式體內只有return語句，那麼，省略了大括號{}和return後的精簡寫法如下：

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

3. 省略小括號

若定義的箭頭函式，引數只有一個，則可以省略小括號。

如下所示，定義的箭頭函式，只有一個引數，完整寫法。

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

省略了引數旁邊的小括號，以下程式碼等價於上面的程式碼。

const func = a => a + 2;

注意：若函式沒有引數，或者多個引數的情況下，必須要使用括號。

2. 箭頭函式與普通函式的區別

大多數情況下，能使用普通函式的地方都可以用箭頭函式代替，因為箭頭函式更精簡。

但在部分情況下，箭頭函式與普通函式有著很大的卻別。

1. 箭頭函式的 this 是父級作用域的 this

如下程式碼，定義了一個物件obj，物件中有個普通www.cppcns.com函式定義的方法getThis，打印出此處的this。呼叫obj.getThis()，會打印出obj物件。這說明方法內部的this指向物件obj。

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

同樣定義一個物件obj，但裡面的方法用箭頭函式定義，瀏覽器中呼叫obj.getThis()卻打印出Window，這說明即使呼叫obj物件身上的方法，方法內部的this也不會指向obj，而是指向定義obj的上下文的this。

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

2. call、apply、bind無法改變箭頭函式的 this

如下程式碼，普通函式getName列印this.name，通過call將函式中的this繫結到obj身上，呼叫getName打印出obj身上的屬性name。

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

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

若將函式改成箭頭函式，那麼call將不起作用，無法將函式內部的this繫結到obj，打印出undefined。

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

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

3. 不可以作為建構函式

箭頭函式不可以作為建構函式使用，若將箭頭函式作為建構函式，將報錯，如下程式碼所示。

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

4. 不可以使用 arguments

在普通函式內部，可以使用arguments來獲取傳入的引數，是一個類陣列物件：

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

而箭頭函式就不可以使用arguments物件，獲取不到輸入的引數。

在瀏覽器中，若在箭頭函式使用arguments物件，將報錯。

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

但是箭頭函式可以在引數內，以...args的方式，獲取到輸入的引數，得到的args是一個數組。

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

5. 箭頭函式不支援 new.target

普通函式定義的建構函式內部，支援使用new.target，返回構造例項的建構函式。

function Person() {
    this.name = 'Jack';
    console.log(new.target);
}
// 指向建構函式
new Person(); // [Function: Person]

而在箭頭函式中，不支援使用new.target。在瀏覽器環境中，箭頭函式使用new.target將報錯：new.target expression is not allowed here。

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

本文參考：

《高階程式設計（第4版）》

到此這篇關於Script 箭頭函式的特點、與普通函式的區別的文章就介紹到這了,更多相關箭頭函式普通函式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！