ES6箭头函数 this指向的误区

众所周知，ES6的箭头函数能解决this指向的问题。能解决this内外指向不一致的问题。

箭头函数体内的this对象，就是定义该函数时所在的作用域指向的对象，而不是使用时所在的作用域指向的对象。

箭头函数的this取决于函数的定义，而不是调用。
​ (在定时器中用箭头函数就可以解决this指向问题，箭头函数内部的this与外部的this保持一致)
有了箭头函数，我们就不再需要用that来替代this

var that = this;

但是有一点很多人容易弄错。看下面这个例子

function queryData() {
	//通过接口获取到data
	if (data) {
		var $ul = $('#jcwh_stat_list');
		$ul.find('[data-name]').each(function() {	
			var $this = $(this);
			var name = $this.attr('data-name');
			if (!data.hasOwnProperty(name)) {
				return;				
			}
			$this.html(data[name]);
		})
	}
}

/** 如果写成箭头函数 */
function queryData() {
	//通过接口获取到data
	if (data) {
		var $ul = $('#jcwh_stat_list');
		$ul.find('[data-name]').each(() => {	
			var $this = $(this);
			var name = $this.attr('data-name');
			if (!data.hasOwnProperty(name)) {
				return;				
			}
			$this.html(data[name]);
		})
	}
}

咋看下去好像没什么问题，但是如果你在箭头函数内部输出this，你就会发现，这个this并不是非箭头函数写法下我们想要的选择器选择出的对象。而是function queryData对象

为什么呢，看看开始的总结：
箭头函数体内的this对象，就是定义该函数时所在的作用域指向的对象，而不是使用时所在的作用域指向的对象。

箭头函数的this取决于函数的定义，而不是调用。箭头函数内部的this与外部的this保持一致

所以箭头函数内部的this就是他的外部，也就是函数queryData。

最后是使用箭头函数其他几点需要注意的地方

1.不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。xxx is not a constructor
2.不可以使用arguments获取参数列表，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
3.不可以使用yield命令，因此箭头函数不能用作 Generator 函数。