关于this 的问题

Question

        <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吗？？谢谢

Answer 1

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

Answer 2

在 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...

Answer 3

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

Answer 4

改成$(this).remove();

Answer 5

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

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

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

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

Answer 6

哇，我竟然不知道