Question

我正在玩javascript对象以更好地理解“this”和函数上下文。我偶然发现了这个问题。 我收到错误“obj2未定义”，除非我在分配后运行window.obj2（），但我不知道为什么。将函数分配给window.obj2并不是立即执行它不应该足够吗？我知道你不应该污染窗口对象，这只是一个测试。谢谢！

window.obj2 = function(){
    console.log('obj2 in window.object',this);
}

window.obj2(); // problem when this line is commented out

(function () {

    var parent = {
        obj : function(){
            //console.log(this);
            obj2();
            this.obj2();
            window.obj2();
        },
        obj2 :function(){
            console.log('obj2 in parent',this);
        }
    }

    parent.obj();

}());

说明

OP问为什么在定义它之后必须执行该函数，以便稍后在代码中定义它...看看当你注释掉问题行时会发生什么。

Answer 1

解开谜团：

你忘记了分号：

window.obj2 = function(){
    console.log('obj2 in window.object',this);
}; // <--

没有它，代码将被解释为

// I'm naming the functions to refer to them later
window.obj2 = function a(){
   ...
}(function b() { ... }());

即。 b周围的括号被解释为a的调用操作（就像您对b本身所做的那样:( function b() {...}()）。

引擎首先执行b，以便将返回值作为参数传递给a，然后将返回值分配给window.obj2。

因此，在调用b时，window.obj2确实不存在。

因此，添加window.obj2()使其工作的原因并不是因为您正在访问window.obj2，而是因为它使代码不具有暧昧性。以下括号不能再被解释为调用操作。你可以在那里使用任何声明，例如

window.obj2 = function(){
    console.log('obj2 in window.object',this);
}

"foo";

(function () {
    obj2();
}());

Answer 2

如果您在匿名函数中定义了函数window.obj2，该函数会调用自身，那么它可以正常运行，看看代码。

<script>
//window.obj2(); // problem

(function (window) {
    window.obj2 = function(){
        console.log('obj2 in window.object',this);
    }

    var parent = {
        obj : function(){
            //console.log(this);
            obj2();
            this.obj2();
            window.obj2();
        },
        obj2 :function(){
            console.log('obj2 in parent',this);
        }
    }

    parent.obj();

}(window));

</script>
<body>

</body>

将函数添加到全局Windows对象

2 个答案: