与“这个”混淆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 变量。在那个匿名函数中，这个指向窗口对象而不是外部函数对象或其他任何东西。事件虽然它仍然可以访问函数的变量。

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.

无论如何，我不确定，为什么会这样;但如果您查看下面的代码，我将此以的形式传递给<$ code>到 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。是因为作为参数传递的 与外部函数中定义的 之间存在冲突？
我认为参数会覆盖可见性。为什么价值不会保留？

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?

这完全令人困惑。

另一方面，如果我没有传递 ，而只是使用它，因为可见性在那里，结果是正确的，如预期的那样。

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.

我错过了什么？它是变量之间的冲突，存在于相同的范围内吗？
有充分的理由，内部函数有这个绑定到窗口对象吗？

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?

推荐答案

JavaScript中的此指的是您调用方法的对象。如果您调用函数 someObject.functionName（args），那么此将绑定到该对象。如果您只是调用一个裸函数，如 functionName（args），那么此将绑定到 window object。

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 内部，你在内部函数中隐藏了那个变量，但没有传递任何东西，所以它是未定义的。

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);
        }();

如果你想要的东西与你的第一个例子相同，你可能想要以下内容（传递 进入内部函数）：

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屋！