箭頭函數 和 一般函數的 差別
頭函數和普通函數的差別如下：
-
語法：箭頭函數的語法比較簡潔，可以省去很多不必要的符號，使代码更容易閱讀。普通函數則需要使用
**function**關鍵字，並且必須定義函數名。 -
**this**綁定：箭頭函數的**this**是固定的，不受外界的影響，因此它不适用于需要修改**this**的场景。普通函數的**this**是可以通过**call**、**apply**或**bind**方法修改的。 -
參數：箭頭函數的參數與普通函數的參數相同，都可以接受多個參數。
-
回傳：箭頭函數和普通函數的回傳方式相同，都可以使用
**return**關鍵字回傳數值。
因此，根據需要使用的功能，您可以選擇使用箭頭函數或普通函數。
使用普通函數的情況：
- 修改
**this**：如果需要修改函數的**this**，則應使用普通函數。
在這個程式碼中，在**showName**方法中，使用普通函數作為**setTimeout**的回調函數，但由於普通函數在這種情況下會改變**this**的指向，因此會得到**undefined**。因此，調用**myClass.showName()**會印出：undefined
class MyClass {
constructor() {
this.name = "My Class";
}
showName() {
setTimeout(function() {
console.log(this.name);
}, 1000);
}
}
const myClass = new MyClass();
myClass.showName(); // undefined
如果您想要在普通函數中引用類實例中的屬性，您可以在構造函數中保存實例，並在普通函數中引用它：
class MyClass {
constructor() {
this.name = "My Class";
this.self = this;
}
showName() {
setTimeout(function() {
console.log(this.self.name);
}, 1000);
}
}
const myClass = new MyClass();
myClass.showName(); // My Class
- 使用 arguments 參數：如果需要使用 arguments 參數，則應使用普通函數。
function sum() {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}
console.log(sum(1, 2, 3, 4, 5));
使用箭頭函數的情況：
- 簡化代码：如果需要簡化函數的語法，則應使用箭頭函數。
const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(number => number * number);
console.log(squares);
- 保留外部的
**this**：如果需要保留外部的**this**，則應使用箭頭函數。
class MyClass {
constructor() {
this.name = "My Class";
}
showName() {
setTimeout(() => {
console.log(this.name);
}, 1000);
}
}
const myClass = new MyClass();
myClass.showName();