感到困惑的JavaScript中的“这个”关键词(Confused about the 't

2019-09-23 02:07发布

我还没有使用的JavaScript在很长一段时间,并已在今天刷新它自己。 有一两件事,一直让我是this关键字。 我知道在jQuery的事件处理程序,如单击事件, this是指触发事件的元素。 如何this传递给我给它,即使我的功能没有参数的回调函数?

考虑下面的代码:

$("tr.SummaryTbRow").data("Animating", false);
$("tr.SummaryTbAltRow").data("Animating", false);

$("tr.SummaryTbRow").click(function () {
    if ($(this).data("Animating") == false) {
        if ($(this).next(".Graph").css("display") == "none") {
            $(this).data("Animating", true);

            //Part I am questioning.
            setTimeout(function () {
                $(this).data("Animating", false);
            }(this), 550);

            $(this).next(".Graph").slideRow('down', 500);
        }
        else {
            $(this).data("Animating", true);
            $(this).next(".Graph").slideRow('up', 500);
        }
    }
});

我试图找出如何使用类元素表行通过SummaryTbRow我setTimeout的回调函数。 jQuery的是否通过this相似的FASION什么我与我的匿名回调函数做什么? 我是否this在函数内部参考this我通过?

我知道我可能只是这样做:

setTimeout(function (element) {
    $(element).data("Animating", false);
}(this), 550);

但是,我想弄清楚的jQuery是如何能够通过this我的回调函数,即使我的函数接受0参数。

Answer 1:

简短的回答:

您可以设置this使用功能的上的功能.call().apply()方法。

长一点的回答:

this对任何函数的变量是类似arguments变量(这可能是一些你不知道的)。 这是当函数被调用,它的功能是如何称为工件设定。 为了解释,让我先示范arguments 。 考虑:

myFunction = function () {
    return arguments.length;
};

现在,让我们来看看几个调用myFunction

myFunction(); //is 0
myFunction(null); //is 1
myFunction(undefined); //is 1
myFunction(0, 0, 0, 0, 0); //is 5

正如你所看到的,价值arguments.length不依赖于如何或在哪里我们写的功能,但我们如何调用该函数。 同样是真实的this变量(否则称为“调用对象”)。 正好有3种方法来设置调用对象(有一个排序的ES5第四,但我们会忽略):

  1. 您可以通过使用点符号调用该函数设置(如something.myFunction()
  2. 您可以通过使用该功能的设置.call().apply()方法(如myFunction.call(someObject)
  3. 如果它不使用方法1号或2集,则默认为全局对象(如window

所以大部分人都习惯法#1。 如果您将其分配功能作为一个对象的属性,然后调用使用对象和点符号,那么该对象被设置为功能this 。 像这样:

var myFn = (function () { return this.x });

var myObj = {
    x: 1,
    y: myFn
};

myObj.myFn(); //is 1

但是,我们也可以使用方法2,如果myFn是不是我们想要调用它的对象的属性,但对象遵循正确的形式myFn才能够采取行动(参见:鸭打字):

var myOtherObj = {
    x: 2
}

myFn.call(myOtherObj); //is 2
myFn.apply(myOtherObj); //is 2
myFn.apply({ x : 3}); //is 3

很酷,不是吗? 这是jQuery的是怎么做的。 当他们执行回调函数,他们这样做用.apply(event.target)设置this到事件的目标对象)。 他们这样做是在一个更复杂的方式,因为他们的callbacks框架, 但这个想法是存在的 。

无论如何,我不会提供很长的答案,如果我没有方法#3的解释,驱动一些人完全疯折腾:如果您没有设置调用对象,会发生什么?

因为所有的全局变量全局对象的隐式属性,你从方法#3一些有趣的效果。 如:

var x = 4;
myFn(); //is 4

但大部分的时间你不够幸运有您的全局对象满足功能有其通话对象的要求,所以平时它只是导致错误和很多无奈。

也许超过你要找的人,但希望你现在更多的调用对象及其狡猾的方式上获悉。



Answer 2:

要回答你的最后一个问题,你可以使用为例通过您所选择的接收器功能的JavaScript 调用 :

someFunction.call(someObject);

里面someFunctionthis将是someObject

在你的情况,你似乎什么要的是

setTimeout(function (element) {
    $(element).data("Animating", false);
}, 550, this); // this will be passed as element to the callback

或( 更相容 )

var _this = this;
setTimeout(function () {
    $(_this).data("Animating", false);
}, 550); 


Answer 3:

您可以通过调用函数fn.callfn.apply的该走哪用于上下文参数都this



Answer 4:

应用 , 调用和绑定方法服务于这一目的。 在你的情况,你只是写:

setTimeout(function() {
  $(this).data("Animating", false);
}.bind(this), 550);


文章来源: Confused about the 'this' keyword in javascript