詳解箭頭函式和普通函式的區別以及箭頭函式的注意事項、不適用場景

OBKoro1發表於2019-03-21

箭頭函式是ES6的API，相信很多人都知道，因為其語法上相對於普通函式更簡潔，深受大家的喜愛。就是這種我們日常開發中一直在使用的API，大部分同學卻對它的瞭解程度還是不夠深...

普通函式和箭頭函式的區別：

箭頭函式的this指向規則：

1. 箭頭函式沒有`prototype`(原型)，所以箭頭函式本身沒有this

let a = () =>{};
console.log(a.prototype); // undefined
複製程式碼

2. 箭頭函式的this指向在定義的時候繼承自外層第一個普通函式的this。

下面栗子中在一個函式中定義箭頭函式，然後在另一個函式中執行箭頭函式。

let a,
  barObj = { msg: 'bar的this指向' };
fooObj = { msg: 'foo的this指向' };
bar.call(barObj); // 將bar的this指向barObj
foo.call(fooObj); // 將foo的this指向fooObj
function foo() {
  a(); // 結果：{ msg: 'bar的this指向' }
}
function bar() {
  a = () => {
    console.log(this, 'this指向定義的時候外層第一個普通函式'); // 
  }; // 在bar中定義 this繼承於bar函式的this指向
}
複製程式碼

從上面栗子中可以得出兩點

箭頭函式的this指向定義時所在的外層第一個普通函式，跟使用位置沒有關係。
被繼承的普通函式的this指向改變，箭頭函式的this指向會跟著改變

3. 不能直接修改箭頭函式的this指向

上個栗子中的foo函式修改一下，嘗試直接修改箭頭函式的this指向。

let fnObj = { msg: '嘗試直接修改箭頭函式的this指向' };
function foo() {
  a.call(fnObj); // 結果：{ msg: 'bar的this指向' }
}
複製程式碼

很明顯，call顯示繫結this指向失敗了，包括aaply、bind都一樣。

它們(call、aaply、bind)會預設忽略第一個引數，但是可以正常傳參。

然後我又通過隱式繫結來嘗試同樣也失敗了，new 呼叫會報錯，這個稍後再說。

SO，箭頭函式不能直接修改它的this指向。

幸運的是，我們可以通過間接的形式來修改箭頭函式的指向：

去修改被繼承的普通函式的this指向，然後箭頭函式的this指向也會跟著改變，這在上一個栗子中有演示。

bar.call(barObj); // 將bar普通函式的this指向barObj 然後內部的箭頭函式也會指向barObj
複製程式碼

4. 箭頭函式外層沒有普通函式，嚴格模式和非嚴格模式下它的this都會指向`window`(全域性物件)

唔，這個問題實際上是面試官提出來的，當時我認為的箭頭函式規則就是：箭頭函式的this指向繼承自外層第一個普通函式的this，現在看來真是不嚴謹(少說一個定義的時候)，要是面試官問我：定義和執行不在同一個普通函式中，它又指向哪裡，肯定歇菜...

既然箭頭函式的this指向在定義的時候繼承自外層第一個普通函式的this，那麼：

當箭頭函式外層沒有普通函式，它的this會指向哪裡？

這裡跟我之前寫的this繫結規則不太一樣(不懂的可以點進去看一下),普通函式的預設繫結規則是：

在非嚴格模式下，預設繫結的this指向全域性物件，嚴格模式下this指向undefined

如果箭頭函式外層沒有普通函式繼承，它this指向的規則：

經過測試，箭頭函式在全域性作用域下，嚴格模式和非嚴格模式下它的this都會指向window(全域性物件)。

Tip：測試的時候發現嚴格模式在中途宣告無效，必須在全域性/函式的開頭宣告才會生效：

a = 1;
'use strict'; // 嚴格模式無效 必須在一開始就宣告嚴格模式
b = 2; // 不報錯
複製程式碼

箭頭函式的

箭頭函式的arguments

箭頭函式的this指向全域性，使用arguments會報未宣告的錯誤

如果箭頭函式的this指向window(全域性物件)使用arguments會報錯，未宣告arguments。

let b = () => {
  console.log(arguments);
};
b(1, 2, 3, 4); // Uncaught ReferenceError: arguments is not defined
複製程式碼

PS：如果你宣告瞭一個全域性變數為arguments，那就不會報錯了，但是你為什麼要這麼做呢？

箭頭函式的this指向普通函式時,它的`argumens`繼承於該普通函式

上面是第一種情況：箭頭函式的this指向全域性物件，會報arguments未宣告的錯誤。

第二種情況是：箭頭函式的this如果指向普通函式,它的argumens繼承於該普通函式。

function bar() {
  console.log(arguments); // ['外層第二個普通函式的引數']
  bb('外層第一個普通函式的引數');
  function bb() {
    console.log(arguments); // ["外層第一個普通函式的引數"]
    let a = () => {
      console.log(arguments, 'arguments繼承this指向的那個普通函式'); // ["外層第一個普通函式的引數"]
    };
    a('箭頭函式的引數'); // this指向bb
  }
}
bar('外層第二個普通函式的引數');
複製程式碼

那麼應該如何來獲取箭頭函式不定數量的引數呢？答案是：ES6的rest引數（...擴充套件符）

rest引數獲取函式的多餘引數

這是ES6的API，用於獲取函式不定數量的引數陣列，這個API是用來替代arguments的，API用法如下：

let a = (first, ...abc) => {
  console.log(first, abc); // 1 [2, 3, 4]
};
a(1, 2, 3, 4);
複製程式碼

上面的栗子展示了，獲取函式除第一個確定的引數，以及用一個變數接收其他剩餘引數的示例。

也可以直接接收函式的所有引數，rest引數的用法相對於arguments的優點：

箭頭函式和普通函式都可以使用。
更加靈活，接收引數的數量完全自定義。
可讀性更好

引數都是在函式括號中定義的，不會突然出現一個arguments，以前剛見到的時候，真的好奇怪了！
rest是一個真正的陣列，可以使用陣列的API。

因為arguments是一個類陣列的物件，有些人以為它是真正的陣列，所以會出現以下場景：
```
arguments.push(0); // arguments.push is not a function
複製程式碼
```
如上，如果我們需要使用陣列的API，需要使用擴充套件符/Array.from來將它轉換成真正的陣列:
```
arguments = [...arguments]; 或者 ：arguments = Array.from(arguments);
複製程式碼
```

rest引數有兩點需要注意：

rest必須是函式的最後一位引數：

let a = (first, ...rest, three) => {
  console.log(first, rest,three); // 報錯：Rest parameter must be last formal parameter
};
a(1, 2, 3, 4);
複製程式碼

函式的length屬性，不包括 rest 引數

(function(...a) {}).length  // 0
(function(a, ...b) {}).length  // 1
複製程式碼

擴充套件運算子還可以用於陣列，這裡是阮一峰老師的文件

PS：感覺這裡寫多了，但比較喜歡把一個知識點講清楚...

使用`new`呼叫箭頭函式會報錯

無論箭頭函式的thsi指向哪裡，使用new呼叫箭頭函式都會報錯，因為箭頭函式沒有constructor

let a = () => {};
let b = new  a(); // a is not a constructor
複製程式碼

箭頭函式不支援`new.target`：

new.target是ES6新引入的屬性，普通函式如果通過new呼叫，new.target會返回該函式的引用。

此屬性主要：用於確定建構函式是否為new呼叫的。

箭頭函式的this指向全域性物件，在箭頭函式中使用箭頭函式會報錯

let a = () => {
  console.log(new.target); // 報錯：new.target 不允許在這裡使用
};
a();
複製程式碼

箭頭函式的this指向普通函式，它的new.target就是指向該普通函式的引用。

new bb();
function bb() {
  let a = () => {
    console.log(new.target); // 指向函式bb：function bb(){...}
  };
  a();
}
複製程式碼

更多關於new.target可以看一下阮一峰老師關於這部分的解釋。

箭頭函式不支援重新命名函式引數,普通函式的函式引數支援重新命名

如下示例，普通函式的函式引數支援重新命名，後面出現的會覆蓋前面的，箭頭函式會丟擲錯誤：

function func1(a, a) {
  console.log(a, arguments); // 2 [1,2]
}

var func2 = (a,a) => {
  console.log(a); // 報錯：在此上下文中不允許重複引數名稱
};
func1(1, 2); func2(1, 2);
複製程式碼

箭頭函式相對於普通函式語法更簡潔優雅：

講道理，語法上的不同，也屬與它們兩個的區別！

箭頭函式都是匿名函式，並且都不用寫function

只有一個引數的時候可以省略括號:

var f = a => a; // 傳入a 返回a
複製程式碼

函式只有一條語句時可以省略{}和return

var f = (a,b,c) => a; // 傳入a,b,c 返回a
複製程式碼

簡化回撥函式，讓你的回撥函式更優雅：

[1,2,3].map(function (x) {
  return x * x;
}); // 普通函式寫法 
[1,2,3].map(x => x * x); // 箭頭函式只需要一行
複製程式碼

箭頭函式的注意事項及不適用場景

箭頭函式的注意事項

一條語句返回物件字面量，需要加括號，或者直接寫成多條語句的return形式，

否則像func中演示的一樣，花括號會被解析為多條語句的花括號，不能正確解析

var func1 = () => { foo: 1 }; // 想返回一個物件,花括號被當成多條語句來解析，執行後返回undefined
var func2 = () => ({foo: 1}); // 用圓括號是正確的寫法
var func2 = () => {
  return {
    foo: 1 // 更推薦直接當成多條語句的形式來寫，可讀性高
  };
};
複製程式碼

箭頭函式在引數和箭頭之間不能換行！

var func = ()
           => 1;  // 報錯： Unexpected token =>
複製程式碼

箭頭函式的解析順序相對靠前

MDN: 雖然箭頭函式中的箭頭不是運算子，但箭頭函式具有與常規函式不同的特殊運算子優先順序解析規則

let a = false || function() {}; // ok
let b = false || () => {}; // Malformed arrow function parameter list
let c = false || (() => {}); // ok
複製程式碼

箭頭函式不適用場景：

圍繞兩點：箭頭函式的this意外指向和程式碼的可讀性。

定義字面量方法,this的意外指向。

因為箭頭函式的簡潔

const obj = {
  array: [1, 2, 3],
  sum: () => {
    // 根據上文學到的：外層沒有普通函式this會指向全域性物件
    return this.array.push('全域性物件下沒有array，這裡會報錯'); // 找不到push方法
  }
};
obj.sum();
複製程式碼

上述栗子使用普通函式或者ES6中的方法簡寫的來定義方法，就沒有問題了：

// 這兩種寫法是等價的
sum() {
  return this.array.push('this指向obj');
}
sum: function() {
  return this.array.push('this指向obj');
}
複製程式碼

還有一種情況是給普通函式的原型定義方法的時候，通常會在普通函式的外部進行定義，比如說繼承/新增方法的時候。

這時候因為沒有在普通函式的內部進行定義，所以this會指向其他普通函式，或者全域性物件上，導致bug！

回撥函式的動態this

下文是一個修改dom文字的操作，因為this指向錯誤，導致修改失敗：

const button = document.getElementById('myButton');
button.addEventListener('click', () => {
    this.innerHTML = 'Clicked button'; // this又指向了全域性
});
複製程式碼

相信你也知道了，改成普通函式就成了。

考慮程式碼的可讀性，使用普通函式
- 函式體複雜：
  
  具體表現就是箭頭函式中使用多個三元運算子號，就是不換行，非要在一行內寫完，非常噁心！
- 行數較多
- 函式內部有大量操作

文章內容小結：

普通函式和箭頭函式的區別：

箭頭函式沒有prototype(原型)，所以箭頭函式本身沒有this
箭頭函式的this在定義的時候繼承自外層第一個普通函式的this。
如果箭頭函式外層沒有普通函式，嚴格模式和非嚴格模式下它的this都會指向window(全域性物件)
箭頭函式本身的this指向不能改變，但可以修改它要繼承的物件的this。
箭頭函式的this指向全域性，使用arguments會報未宣告的錯誤。
箭頭函式的this指向普通函式時,它的argumens繼承於該普通函式
使用new呼叫箭頭函式會報錯，因為箭頭函式沒有constructor
箭頭函式不支援new.target
箭頭函式不支援重新命名函式引數,普通函式的函式引數支援重新命名
箭頭函式相對於普通函式語法更簡潔優雅

箭頭函式的注意事項及不適用場景

箭頭函式的注意事項：

箭頭函式一條語句返回物件字面量，需要加括號
箭頭函式在引數和箭頭之間不能換行
箭頭函式的解析順序相對||靠前

不適用場景：箭頭函式的this意外指向和程式碼的可讀性。

結語

嘔心瀝血，可以說是很全了，反正第一次問到我的時候只能想到箭頭函式的this是繼承而來的，以及語法上的簡潔性，其他的我都不知道，希望這篇文章能夠幫助各位同學學到知識。

PS：目前找工作中，求大佬們內推，中高階前端，偏JS，Vue，上海楊浦。

部落格、前端積累文件、公眾號、GitHub、wx:OBkoro1、郵箱：obkoro1@foxmail.com

以上2019.03.22

參考資料：

MDN 箭頭函式

阮一峰-ES6入門

什麼時候你不能使用箭頭函式？

# 普通函式和箭頭函式的區別
2018-07-04
函式
箭頭函式與普通函式的區別
2018-10-12
函式
箭頭函式與普通函式區別
2020-11-23
函式
箭頭函式和普通函式的10個區別
2019-12-06
函式
面試題：箭頭函式和普通函式的區別
2022-04-21
面試題函式
簡述箭頭函式和普通函式的區別
2018-11-01
函式
箭頭函式、簡寫函式、普通函式的區別
2019-12-23
函式
Day 59/100 箭頭函式和普通函式的區別
2020-09-30
函式
箭頭函式適用場景及需要注意的地方
2021-09-09
函式
箭頭函式詳解
2023-02-22
函式
使用箭頭函式的幾個注意事項
2018-02-06
函式
箭頭函式this指向詳解
2018-10-13
函式
箭頭函式
2018-04-13
函式
前端面試ES6系列：箭頭函式和普通函式的區別
2019-04-20
前端面試函式
javascript中的this使用場景以及箭頭函式中的this
2018-09-16
JavaScript函式
深入理解箭頭函式和傳統函式的區別
2022-03-07
函式
箭頭函式中的this
2019-03-18
函式
JavaScript 箭頭函式
2019-10-21
JavaScript函式
TypeScript 箭頭函式
2018-08-11
TypeScript函式
javascript箭頭函式
2017-09-23
JavaScript函式
JS箭頭函式
2024-06-22
JS函式
2022年了你還不瞭解箭頭函式與普通函式的區別嗎？
2022-03-01
函式
ES6中箭頭函式使用的注意事項
2018-06-04
函式
箭頭函式this指向的陷阱
2019-04-27
函式
箭頭函式的this指向（二）
2020-12-20
函式
有關箭頭函式
2018-09-02
函式
JS中的箭頭函式與this
2019-03-04
JS函式
ES6箭頭函式
2021-06-14
函式
[譯]箭頭函式 vs .bind()
2016-03-09
函式
從settTimeout到匿名函式、箭頭函式之() =＞ {}
2020-12-14
函式
vue2專案中箭頭函式和普通函式里面 this的指向有何不同？
2024-10-28
Vue函式
ES6箭頭函式的使用
2024-09-28
函式
JavaScript(ES6)—箭頭函式
2020-10-06
JavaScript函式
JavaScript初學者必看“箭頭函式”
2017-06-03
JavaScript函式
ES 6 中的箭頭函式及用法
2021-05-20
函式
ES6 箭頭函式下的this指向
2018-07-23
函式
javaES6箭頭函式的全新特性
2023-02-24
Java函式
Javascript ES6中的箭頭函式
2017-10-16
JavaScript函式

詳解箭頭函式和普通函式的區別以及箭頭函式的注意事項、不適用場景

普通函式和箭頭函式的區別：

箭頭函式的this指向規則：

1. 箭頭函式沒有prototype(原型)，所以箭頭函式本身沒有this

2. 箭頭函式的this指向在定義的時候繼承自外層第一個普通函式的this。

3. 不能直接修改箭頭函式的this指向

4. 箭頭函式外層沒有普通函式，嚴格模式和非嚴格模式下它的this都會指向window(全域性物件)

箭頭函式的

箭頭函式的arguments

箭頭函式的this指向全域性，使用arguments會報未宣告的錯誤

箭頭函式的this指向普通函式時,它的argumens繼承於該普通函式

rest引數獲取函式的多餘引數

使用new呼叫箭頭函式會報錯

箭頭函式不支援new.target：

箭頭函式不支援重新命名函式引數,普通函式的函式引數支援重新命名

箭頭函式相對於普通函式語法更簡潔優雅：

箭頭函式的注意事項及不適用場景

箭頭函式的注意事項

箭頭函式不適用場景：

文章內容小結：

普通函式和箭頭函式的區別：

箭頭函式的注意事項及不適用場景

結語

相關文章

1. 箭頭函式沒有`prototype`(原型)，所以箭頭函式本身沒有this

4. 箭頭函式外層沒有普通函式，嚴格模式和非嚴格模式下它的this都會指向`window`(全域性物件)

箭頭函式的this指向普通函式時,它的`argumens`繼承於該普通函式

使用`new`呼叫箭頭函式會報錯

箭頭函式不支援`new.target`：