关于this 的问题

        <div id="father">
            <div id="son"></div>
        </div>
        <script src="jquery-1.11.3.js"></script>
        <script>
            $(function(){
                $("#son").fadeOut(3000,function(){this.remove()});
            });
        </script>

如上的简单代码,页面加载完,#son在3秒内淡出页面,然后从dom树删除。
上面的方法可以实现。
但是当我把fadeOut中的回调函数改成箭头函数,如下:

            $(function(){
                $("#son").fadeOut(3000,()=>this.remove());
            });

这样就无法删除了,this指向了window。请教是为什么??不应该是第一种方法中的this指向window吗??谢谢

阅读 3.4k
6 个回答

函数中的this是在函数被调用时生成的,是传递给函数的一个隐式变量,指向函数的上下文。所以this的指向跟函数的调用方法有关,当函数作为对象的方法调用时,this指向的是这个方法的对象。
$("#son").fandOut()中,回调函数是fandOut方法的处理程序,$("#son")对象调用了这个方法,所以回调函数中this就指向$("#son");
在ES6语法规定箭头函数不再绑定this,所以箭头函数中this始终指向window。

在 ES6 中,会默认采用 严格模式, 因此 this 也不会自动指向 window 对象了, 而箭头函数本身并没有 this, 因此 this 就只能是 undefined.

// 我们试图用ES6的写法来重构上面的对象
const person = {
    name: 'tom',
    getName: () => this.name
}

// 但是编译结果却是
var person = {
    name: 'tom',
    getName: function getName() {
        return undefined.name;
    }
};

一个箭头函数表达式的语法比一个函数表达式更短,并且不绑定自己的 this,arguments,super或 new.target。具体查看箭头函数的文档。https://developer.mozilla.org...

因为jquery在fadeOut的回调函数里,对this进行了修改。
而你如果使用箭头函数,由于箭头函数的this在声明的时候就已经确定了,所以jquery改不了回调的this,就会导致你的问题出现。

改成$(this).remove();

因为箭头函数的实现是这个样子的:

$(function () {
  $("#son").fadeOut(3000, () => this.remove());
});
$(function () {
  var _this = this;
  $("#son").fadeOut(3000, function () {
    _this.remove()
  });
});

再回答题中第二个问题,第一种写法中jQuery.fn['fadeOut']最后触发callback时做了处理,使其this指向当前jQuery对象。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题