箭頭函數與普通函數的區別

一、語法

箭頭函數使用緊湊的語法，沒有自己的this，arguments，super，new.target綁定。箭頭函數不能作為構造函數使用且使用箭頭函數時不能使用arguments對象

//普通函數 
function sum(a, b) {
  return a + b;
}
//箭頭函數
const sum = (a, b) => a + b;

二、this指向

普通函數中的this指向動態變化，this的值由函數的調用方式決定。箭頭函數中的this指向是在定義的時候就被確定的，也就是它所處的詞法作用域中的this值。

//普通函數 
const obj = {
  x: 1,
  getX() {
    return this.x;
  }
}
console.log(obj.getX()) // 1

const getX = obj.getX;
console.log(getX()) // undefined 

//箭頭函數
const obj = {
  x: 1,
  getX: () => {
    return this.x;
  }
}
console.log(obj.getX()) // undefined 

三、綁定

普通函數可以使用call()、apply()、bind()方法將this指向綁定到指定對象，但箭頭函數不可以。箭頭函數中的this是無法被改變的。

//普通函數 
const obj1 = { value: 1 };
const obj2 = { value: 2 };

function getValue(name) {
  console.log(name + this.value);
}

getValue.call(obj1, 'obj1'); // 輸出：obj11
getValue.call(obj2, 'obj2'); // 輸出：obj22

//箭頭函數
const obj1 = { value: 1 };
const obj2 = { value: 2 };

const getValue = (name) => {
  console.log(name + this.value);
}

getValue.call(obj1, 'obj1'); // 輸出：obj2undefined
getValue.call(obj2, 'obj2'); // 輸出：obj2undefined

四、使用場景

箭頭函數相對於普通函數來說更適用於短小的回調函數，使用箭頭函數可以讓代碼更加簡潔易懂。

//普通函數 
[1, 2, 3].map(function (x) {
  return x * x;
});

//箭頭函數
[1, 2, 3].map((x) => x * x); 

五、作用域

箭頭函數中沒有單獨的函數作用域，它與定義時外層的作用域共享。普通函數中，有自己的作用域。

//普通函數 
var x = 'global';
function foo() {
  var x = 'function';
  return function () {
    console.log(x);
  }
}
var bar1 = foo();
bar1(); //function

//箭頭函數
var x = 'global';
function foo() {
  var x = 'function';
  return () => console.log(x);
}
var bar2 = foo();
bar2(); //function