对javascript中的’this’关键字感到困惑

2019-05-29 23:21:41 阅读：218 来源： 互联网

我很长一段时间没有使用过Javascript,今天就一直在刷新自己.总是让我感到兴奋的是这个关键字.我知道在jQuery事件处理程序中,例如click事件,这指的是触发事件的元素.这是如何传递给我作为回调给它的函数,即使我的函数没有参数？

给出以下代码：

$("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是否通过我的匿名回调功能以类似的方式传递了这个？我的这个功能是否参考了我传入的内容？

我知道我可以这样做：

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

但是我想知道jQuery如何能够将它传递给我的回调函数,即使我的函数接受0个参数.

解决方法:

简短回答：

您可以使用函数的.call()和.apply()方法在函数上设置它.

答案很长：

任何函数的this变量都与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的值不依赖于我们编写函数的方式和位置,而是取决于我们如何调用函数.这个变量也是如此(也称为“调用对象”).设置调用对象的确有3种方法(在ES5中有一种排序,但我们会忽略它)：

>你可以通过使用点符号调用函数来设置它(例如something.myFunction())
>您可以使用函数的.call()或.apply()方法设置它(例如myFunction.call(someObject))
>如果未使用方法#1或#2设置,则默认为全局对象(例如窗口)

所以大多数人都习惯了方法#1.如果将函数指定为对象的属性,则使用object和dot-notation调用该函数,然后将对象设置为此对象.像这样：

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

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

myObj.myFn(); //is 1

但是我们也可以使用方法2,如果myFn不是我们想要调用它的对象的属性,但是对象遵循正确的形式让myFn能够对它进行操作(参见：duck typing)：

var myOtherObj = {
    x: 2
}

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

很酷,嗯？这就是jQuery如何做到的.当他们执行你的回调时,他们使用.apply(event.target)(将其设置为事件的目标对象).由于他们的回调框架but the idea is there,他们以更复杂的方式进行.

无论如何,如果我没有对方法#3进行解释,那么我就不会提供一个很长的答案,这会让一些人完全疯狂：如果你没有设置调用对象会发生什么？

因为所有全局变量都是全局对象的隐式属性,所以您可以从方法#3获得一些有趣的效果.如：

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

但是大多数时候你没有足够的幸运能让你的全局对象满足函数对其调用对象的要求,所以通常只会导致错误和很多挫败感.

可能比你想要的更多,但希望你现在对调用对象及其狡猾的方式更加了解.

标签：jquery,javascript,this
来源： https://codeday.me/bug/20190529/1181437.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

对javascript中的’this’关键字感到困惑