javascript - 仍然对 JavaScript 的 'this' 感到困惑

Question

在使用 JavaScript 对象时，我已经阅读了很多关于“this”关键字的文章，但我仍然有些困惑。我很高兴编写面向对象的 Javascript，我通过引用完整的对象路径来解决“这个”问题，但我不喜欢我仍然觉得“这个”令人困惑的事实。

我找到了一个很好的答案 here这对我有帮助，但我仍然不是 100% 确定。所以，举个例子。以下脚本链接自 test.html 和 <script src="js/test.js"></script>

if (!nick) {
    var nick = {};
}

nick.name= function(){
    var helloA = 'Hello A';
    console.log('1.',this, this.helloA);

    var init = function(){
        var helloB = 'Hello B';
        console.log('2.',this, this.helloB);
    }

    return {
        init: init
    }
}();

nick.name.init();

希望看到的是什么样的

1. Object {} nick.name, 'Hello A'
2. Object {} init, 'Hello B'

但我得到的是这个？

1. Window test.html, undefined
2. Object {} init, undefined

我想我了解那里发生的一些事情，但如果有人向我解释，我会介意。

此外，我不完全确定为什么要调用第一个“console.log”？如果我删除对 init 函数的调用 //nick.name.init() Firebug 仍然输出 1. Window test.html, undefined .这是为什么？为什么 nick.name() 在 html 页面加载时被 window 对象调用？

非常感谢

Answer 1

Also, I'm not entirely sure why the first 'console.log' is being called at all?

nick.name = function(){
    // ...
}();

在这里你定义了一个函数，立即调用它(因此 ())并将它的返回值({init: init})分配给 nick.name

所以执行是:

1. 创建一个名为 nick 的变量(如果还没有一个具有非假值的变量)
2. 创建一个匿名函数......
3. 在它自己的范围内创建一个名为 helloA 的变量
4. 使用 console.log 输出数据，其中包含“1”(原样)、this(窗口，因为该函数正在执行全局上下文而不是方法)和 this.helloA(window.helloA，它不存在。
5. 定义一个名为init的函数>
6. 返回一个分配给 nick.name
的对象
7. 然后调用 nick.name.init()，它在 name 的上下文中执行 init 函数。
8. 这定义了helloB
9. 然后 console.logs 包含“2”(原样)、this(name)和 this.helloB (nick.name.helloB - 不存在)

所以您获得的第一个输出来自 console.log('1.',this, this.helloA);

我认为您的主要问题是您将 this.foo(调用方法的对象的属性)与变量范围(函数可用的变量)混淆了