箭头函数：Vue为什么不推荐使用箭头函数？

ES2015为我们带来许多特性，箭头函数备受瞩目，那么箭头函数有什么用呢？ 其实就是一个用处，创建函数。 以前，JavaScript创建函数有三种方式：

// 方法1
let func1 = function(a,b){
	return a + b;
};
console.log(func1(1,2)); // 3
// 方法2
function func2(a,b){
	return a - b;
}
console.log(func2(1,2)); // -1
// 方法3 (不推荐)
let func3 = new Function("num1", "num2", "return num1 + num2");

以上三种方式都可以创建函数，方法3不推荐。

方法2和方法1是有区别的，方法2存在变量提升。而方法1创建的函数，只能在定义之后用（不推荐使用var来创建变量）。

console.log(add(a+b));  // 正确执行
function add(a,b){
	return a + b;
};

箭头函数给我们提供了第三种方式来创建函数。

let add = (a,b) => {
	return a + b;
}
(入参)=>{函数体}

箭头函数特性：

1. 匿名
2. 没有自己的this，arguments，super或new.target

用法：

简化函数

不使用箭头函数

// 使用 findIndex 查找 people数组中 age 为 13 
let people = [{name:"A",age:11},{name:"B",age:12},{name:"C",age:13}];
let age13Index = people.findIndex(function(item)=>{
	return item.age === 13;
})

使用箭头函数

let people = [{name:"A",age:11},{name:"B",age:12},{name:"C",age:13}];
let age13Index = people.findIndex(item =>item.age === 13})

简洁了许多，我们使用箭头函数干掉了 return、 funcion 、入参() 。

绑定this

MDN 在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值：

• 如果是该函数是一个构造函数，this指针指向一个新的对象。
• 在严格模式下的函数调用下，this指向undefined。
• 如果是该函数是一个对象的方法，则它的this指针指向这个对象。
• 使用call、apply、bind改变函数里this指向。

不使用箭头函数

function Person() {
  let that = this; 
  that.age = 0;
  setInterval(function growUp() {  
  // 需要使用 that 指向 this，因为setInterval的回调函数会在 window 环境下执行，this===window
    that.age++;
  }, 1000);
}
let p = new Person();

使用箭头函数

function Person(){
  this.age = 0;
  setInterval(() => {
    this.age++; // |this| 正确地指向 p 实例
  }, 1000);
}
let p = new Person();

这是咋回事呢，Babel转一下。转ES5

箭头函数不能取代function

缺点：

1. 箭头函数没有 arguments，super 和 new.target。
2. 箭头函数不能当构造函数。new ()=>{} // 报错。
3. ！！！箭头函数没有this。

1、2很明显，箭头函数就是这样设计的。 但是3也是缺点呢？3不是帮我们干掉that了吗？ 是的，箭头函数可以把that干掉，但是，它本身不带this，对于依赖this的函数，比如 对象中的函数，它就有可能出现问题。

let people = {
	name: "A",
	age: 18,
	getName: function(){
		return this.name; // 根据 "如果是该函数是一个对象的方法，则它的this指针指向这个对象" ,我们可以快乐的使用this来访问对象内的属性
	},
	getAge: ()=>{
		return this.age; // 箭头不带this，非严格模式this 会 指向 window，严格模式为 undefined。
	}
}
people.getName() // A
people.getAge() // 报错

我们可以使用Babel将上述代码转换为ES5。

所以，在Vue文档里有这么一段话。

箭头函数不要随便用。因为箭头函数能做的，普通函数都可以实现。

创作不易！如果对你有帮助，还请点赞收藏。 如果有疑惑可以在下方留言。 如果有什么建议，可以私信我。