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

箭头函数，ES6标准新增的一种函数语法。

定义方式如下：

let func1 = a => a * 2;       // 单参数
let func2 = (a, b) => a + b;  // 双参数
let func3 = a => ({value: a});// 返回对象
let func4 = a => {            // 包含函数体
  console.log(a);
  return a*2;
}

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

1、this值

每个新定义的普通函数都有一个自己的this值，例如：

var obj = {
  value: 0,
  func: function () {
    return function () {
      this.value += 1;
    }
  }
}

console.log(obj.value); // 0
obj.func()();
console.log(obj.value); // 0

在ES5中，可以使用一个变量来传递this，例如：

var obj = {
  value: 0,
  func: function () {
    var that = this;
    return function () {
      this.value += 1;
    }
  }
}

也可以使用bind函数来将this值传递给目标函数，例如：

var obj = {
  value: 0,
  func: function () {
    return function () {
      this.value += 1;
    }
  }.bind(this);
}

而箭头函数会自动捕获上下文中的this值作为自身的this值，如：

var obj = {
  value: 0,
  func: function () {
    return function () {
      this.value += 1;
    }
  }
}

console.log(obj.value); // 0
obj.func()();
console.log(obj.value); // 1

2、获取传递参数数组

普通函数使用arguments获取传入的参数数组，而箭头函数使用与PHP中一样的形式：...args来获取参数数组，如：

var a = function () {
  console.log(arguments);
}

var b = () => {
  console.log(arguments);
}

var c = function (...agrs) {
  console.log(args);
}

var d = (...args) => {
  console.log(args);
}

a(1,2,3,4,5);  // [Arguments] { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }
b(1,2,3,4,5);  // 输出相关环境信息
c(1,2,3,4,5);  // 报错
d(1,2,3,4,5);  // [ 1, 2, 3, 4, 5 ]

3、构造器

箭头函数不能用于构造器，所以不能使用new来创建实例，如：

let A = function () {
  this.value = "A";
}

let B = () => {
  this.value = "B";
}

let a = new A();
console.log(a.value); // A

let b= new B();  // 报错
console.log(b.value); 

4、原型属性

箭头函数没有原型属性

5、作为对象方法出现

当作为对象的方法出现时，没有定义this绑定。如：

var obj = {
  value: 1,
  printValue: () => {
    console.log(this.obj.value);
  },
  printValue2: function () {
    console.log(this.value);
  }
};

obj.printValue();   // undefined
obj.printValue2();  // 1