与“这个"混淆JavaScript 匿名函数中的对象 [英] Confusion with "this" object in JavaScript anonymous functions

问题描述

您好，我正在尝试运行以下 JavaScript 代码.我的目标是在 JavaScript 中不同范围和不同类型的调用中掌握 this 的含义.

Hi I have following JavaScript code that I am trying to run. My aim is to grasp the meaning of this in different scopes and different types of invocations in JavaScript.

如果您查看下面的代码:我有一个内部匿名函数，它被分配给 innerStuff 变量.在那个匿名函数中，this 指向 window 对象，而不是外部函数对象或其他任何东西.事件虽然它仍然可以访问函数的变量.

If you look in code below: I have a inner anonymous function, which is getting assigned to innerStuff variable. In that anonymous function as such this points to window object and not the outer function object or anything else. Event though it still has access to out function's variables.

无论如何，我不确定，为什么会这样；但是如果你看下面的代码，我稍后会以 that 的形式将 this 传递给 innerStuff ，它工作得很好并用 doofus 属性在控制台.

Anyway, I am not sure, why that would be; but if you look at code below, I pass this in form of that to innerStuff later and it works just fine and prints object with doofus attribute in console.

    var someStuff = {
        doofus:"whatever",
        newF: function()
        {
            var that = this;
            console.log(that);
            var innerStuff = function(topThis){
                console.log(topThis);
            };

            return innerStuff(that);
        }
    }

    someStuff.newF();

现在我只更改了一点代码.而不是将它分配给 innerStuff，我将通过调用它直接返回该函数，如下所示:

Now I am changing a code only little bit. And instead of assigning it to innerStuff, I'll just directly return the function by invoking it as shown below:

    var someStuff = {
        doofus:"whatever",
        newF: function()
        {
            var that = this;
            console.log(that);
            return function(that){
                console.log(that);
            }();
        }
    }

    someStuff.newF();

这会为内部匿名函数打印 undefined.是否因为作为参数传递的 that 与在外部函数中定义的 that 之间存在冲突?我认为该参数会覆盖可见性.为什么不保留价值?

This prints undefined for the inner anonymous function. Is it because there is a clash between a that that is being passed as parameter and a that defined in outside function? I thought the parameter would have overriden the visibility. Why would the value be not retained?

这完全令人困惑.

另一方面，如果我不通过 that，而是直接使用它，因为可见性在那里，结果是正确的并且符合预期.

On the other hand if I don't pass that, but instead just use it, because visibility is there, the outcome is proper and as expected.

我错过了什么?它是存在于同一范围内的变量之间的冲突吗?是否有充分的理由，内部函数将 this 绑定到 window 对象?

What is it that I am missing? Is it the clash between the variables, present in same scope? Is there a good reason, that inner functions have this bound to window object?

推荐答案

this 在 JavaScript 中是指您对其调用方法的对象.如果您以 someObject.functionName(args) 调用函数，则 this 将绑定到该对象.如果您只是调用一个裸函数，如 functionName(args)，那么 this 将绑定到 window 对象.

this in JavaScript refers to the object that you called a method on. If you invoke a function as someObject.functionName(args), then this will be bound to that object. If you simply invoke a bare function, as in functionName(args), then this will be bound to the window object.

在第二个示例中的 newF 内部，您在内部函数中隐藏了 that 变量，但没有向其中传递任何内容，因此它是未定义的.>

Inside of newF in the second example, you are shadowing the that variable in your inner function, but not passing anything into it, so it is undefined.

        var that = this;
        console.log(that);
        return function(that){
            console.log(that);
        }();

如果您想要与第一个示例等效的内容(将 that 传递给内部函数)，您可能需要以下内容:

You probably want the following instead, if you want something that is equivalent to your first example (passing that in to the inner function):

        var that = this;
        console.log(that);
        return function(that){
            console.log(that);
        }(that);

或者下面的，如果你不想隐藏它而只是使用外部函数的绑定:

Or the following, if you don't want to shadow it and just use the outer function's binding:

        var that = this;
        console.log(that);
        return function(){
            console.log(that);
        }();

这篇关于与“这个"混淆JavaScript 匿名函数中的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！