ES6 — 箭头函数

一 为什么要有箭头函数

在日常开发中，可能会需要写类似下面的代码:

其实上例的输出结果是我是undefined，我今年undefined岁！。为什么会输出这种结果呢？
这是因为setTimeout执行的时候，是在全局作用域下的，所有this指向的是全局window,而window上没有names和age，所以当然输出的是undefinedl了。
怎么解决？
通常的写法是缓存this,然后在setTimeout中用缓存的this进行操作，如下：

使用上叙方法后，输出的结果就是 ：我是zhangsan，我今年18岁！。
ECMA组织觉得这确实是个问题，之后在es6的新特性里添加了箭头函数，它能很好的解决这个问题。另外箭头函数还用简化代码量的特点。

二 什么是箭头函数

箭头函数的语法非常简单，简单的箭头函数表示法：
() => console.log(‘Hello’)
之前的写法：
function(){
console.log(‘hello’)
}

三 和普通函数的区别

和普通函数相比，箭头函数主要就是以下两个方面的特点。
1.不绑定this，arguments
2.更简化的代码语法

3.1 不绑定 this

我的理解为箭头函数的this其实就是在定义的时候就确定好的，以后不管怎么调用这个箭头函数，箭头函数的this始终为定义时的this.
例如：

      const Person = {
	    'names': 'zhangsan',
	    'age': 18,
	    'sayHello': function () {
	      setInterval(function () {
	        console.log('我叫' + this.names + '我今年' + this.age + '岁!')
	      }, 1000)
	    }
	  Person.sayHello();

当Person.sayHello()去执行setInterval的时候，是在全局作用下执行的所有setInterval回调函数的this就为全局对象。es3-5中的函数this的值和调用这个函数的上下文有关。
如果用箭头函数写上面的代码。如下：

		const Person = {
		    'name': 'zhangsan',
		    'age': 18,
		    'sayHello': () => {
		      setInterval(() => {
		        console.log('我叫' + this.name + '我今年' + this.age + '岁!')
		      }, 1000)
		    }
		Person.sayHello();

输出的是我叫’zhangsan’，我今年18岁 ？其实输出之后发现结果不对，输出的还是undefined。
因为我把方法写在了对象里，而对象的括号是不能封闭作用域的。所以此时的this还是指向全局对象。
所以，通过以上的错误可以提醒我们，最好不要用箭头函数作为对象的方法。
重新举一个例子，如下：

		function Person () {
			  this.names = 'zhangsan',
			  this.age = 18,
			  let self = this,
			  setTimeout(function sayHello () {
			    console.log('我叫' + self.names + '我今年' + self.age + '岁!')
			  }, 1000)
		  }
		 let p = new Person()

缓存this，然后输出，能达到我们想要的结果。
把上述例子改为箭头函数的形式如下:

		function Person () {
			  this.name = 'zhangsan',
			  this.age = 18
			  setInterval(() => {
			    console.log('我叫' + this.name + '我今年' + this.age + '岁')
			},1000)
	    }
	   let p = new Person();

我们可以看到，箭头函数使用了定义时上下文的this，且与在哪里调用没有关系。

3.2 不绑定arguments

箭头函数还有一个有特点的地方就是不绑定arguments,即如果你在箭头函数中使用arguments参数不能得到想要的内容。

	  let arrowfunc = () => console.log(arguments.length);
	  arrowfunc(); //arguments is not defined

所以在箭头函数中我们是不能直接使用arguments对象的，但是如果我们又想获得函数的参数怎么办？
我们可以使用剩余参数来取代arguments

	  let arrowfunc = (...arg) => console.log(arg.length)
	  arrowfunc(1,2); //2

四 什么时候不能用箭头函数

1.作为对象的方法
最好不要在对象的方法中使用箭头函数，这样可能会导致一些问题的产生。除非很熟悉箭头函数。
2.不能作为构造函数
由于箭头函数的this不绑定的特点，所以不能使用箭头函数作为构造函数，实际上如果这样做了，也会报错。
3.定义原型方法

		function Person (name){
			 this.name = name
	    }
		Person.prototype.sayHello = () => {
		     console.log(this);
		}
	    var p1 = new Person()
	    p1.sayHello(); //window

这里的this指向的是window对象，这点和在对象方法中定义有点像.

五 总结

箭头函数由于其代码的简洁性和不绑定调用者this的特点，在非方法函数中使用是最合适的，而在方法函数中使用，需要特别注意它的this绑定问题，如果需要动态的修改this，最好还是不要使用箭头函数了。