箭头函数与普通函数的区别

一、语法

箭头函数使用紧凑的语法，没有自己的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