众所周知,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 函数。