Javascript 全局模块或全局变量

Javascript global module or global variable

抱歉,我想不出更好的问题标题。

我的问题是,根据 https://github.com/mathiasbynens/he/blob/master/he.js,在 he.js 中,他们使用以下代码:

/*! https://mths.be/he v0.5.0 by @mathias | MIT license */
;(function(root) {

    //...omitted

    var he = {
        'version': '0.5.0',
        'encode': encode,
        'decode': decode,
        'escape': escape,
        'unescape': decode
    };

    // Some AMD build optimizers, like r.js, check for specific condition patterns
    // like the following:
    if (
        typeof define == 'function' &&
        typeof define.amd == 'object' &&
        define.amd
    ) {
        define(function() {
            return he;
        });
    }   else if (freeExports && !freeExports.nodeType) {
        if (freeModule) { // in Node.js or RingoJS v0.8.0+
            freeModule.exports = he;
        } else { // in Narwhal or RingoJS v0.7.0-
            for (var key in he) {
                has(he, key) && (freeExports[key] = he[key]);
            }
        }
    } else { // in Rhino or a web browser
        root.he = he;
    }

}(this));

如果您将其作为

导入您的页面
<script src="he.js"></script>

您将能够以 he.encode(...).

的形式调用页面中的方法

我的问题是,它究竟是如何设置变量he的?

我的意思是,我可以看到

    } else { // in Rhino or a web browser
        root.he = he;
    }
}(this));

但是在}(this));的召唤下,this到底是什么?

让我们简化一下:

;(function(root) {
    ...
}(this));

所以,我们有一个函数,它接受一个名为 root 的参数。立即调用此函数 (http://benalman.com/news/2010/11/immediately-invoked-function-expression/),我们将值 this 传递给它。

在此上下文中,this 是您的全局对象。如果您使用的是浏览器,您的全局对象将为 window.

所以,如果您确实在使用浏览器:

 root.he = he;

实际上等同于:

window.he = he;

请注意,我们不一定需要使用浏览器,多亏了像 Node 这样的平台,现在有其他上下文 this 全局对象不是 window。这就是为什么另一个没有明确指定 window 并完成这个特定练习的原因。