javascript - 这样做的目的是什么？ IIFE 分配给 Snap.svg.js 中的 var

Question

我 self 指导的 javascript 研究最终让我阅读了一些库，在其中我发现了以下代码片段(为简洁起见，已被 chop )。我在 Windows apache 服务器 (xampp) 上使用带有 firebug 的 Firefox。

我认为下面的代码片段就足够了，但如果有人需要它，可以在这里找到整个库:snap.svg.js on github

var Snap = (function(root) {
Snap.version = "0.4.0";

function Snap(w, h) {           	  // can be either width, height OR 
	if (w) {
		if (w.nodeType) {                        // deterimines if parameter is a dom element
			return wrap(w);
		}
		if (is(w, "array") && Snap.set) {        // deterimines if parameter is an array
			return Snap.set.apply(Snap, w);
		}
		if (w instanceof Element) {              // deterimines if parameter is a Snap.Element
			return w;
		}
		if (h == null) {                         // by elimination determines if parameter is a dom element id.
			w = glob.doc.querySelector(String(w));
			return wrap(w);
		}
	}

<numerous public and private properties and methods>	
.
.
.
glob.win.Snap = Snap;
return Snap;
}(window || this));

Firebug 在实例化任何用户对象之前在窗口上下文中显示 Snap 对象。我想知道究竟是什么机制将 Snap 对象注入(inject)到 DOM 中。就在那时我注意到了“var Snap”。最初，我以为就是这样。但是，由于当我更改变量名称甚至删除它时它并没有破坏应用程序，所以我感到困惑。

进一步的调查发现了 iife 的底部......具体来说，“glob.win.Snap = Snap”。由于“window”被传递到 iife，因此这似乎是实际在窗口中创建 Snap 对象的内容。将名称更改为 glob.win.Snappy 证实了这一点。

我还在学习中，如果我错了，请纠正我。我试图了解这个图书馆发生了什么。函数 Snap() 似乎是通过 glob.win.Snap 赋值注入(inject)到窗口上下文中的。我没有看到顶部的“var Snap”或“return Snap”在做任何事情。事实上，我可以将它们删除，一切似乎都运行良好。所以，我的第一个问题:这两行代码是否有一些我没有看到的功能？

第二个问题是:“this”后备参数指的是什么？我对 Snap 的有限理解是它总是在窗口命名空间内使用，所以“this”不总是窗口吗？

正当我认为我开始将范式从经典语言转变为原型(prototype)语言时，我遇到了这样的代码，这让我感到沮丧。我真的很感激一些见解。

Answer 1

我查看了引用的源代码，这里是一个更精简的版本:

var Snap = (function(root) {
    Snap.version = "0.4.0";

    function Snap(w, h) {}

    var glob = {
        win: root.window,
        doc: root.window.document
    };

    ...

    glob.win.Snap = Snap;
    return Snap;
}(window || this));

Snap.plugin(...);

It seems that the function Snap() is being injected to the window context via the glob.win.Snap assignment. I don't see that the "var Snap" at the top or the "return Snap" are doing anything.

你是对的， var Snap = ...; 的声明和通过 return Snap; 的赋值是多余的，因为该变量存在于全局范围内(即Window 对象)并且已由 glob.win.Snap = Snap;

声明

我认为他们只是保留了 var 声明，因为使用类模式时它几乎是标准的:

var MyClass = (function() {
    function MyClass(n) {}
    return MyClass;
})();

A secondary question is: What does the "this" fallback parameter refer to? My limited understanding of Snap is that it is always used within the window namespace so wouldn't "this" always be the window?

在某些 JavaScript 环境中，根对象不称为 window(例如，node.js 中的 global)。 窗口 || this 将计算为根对象，无论它被称为什么。

您会经常在 JavaScript 模块中看到此类依赖注入(inject)。请参阅https://carldanley.com/js-module-pattern/了解更多。

但是，如果由于 var glob = { win: root.window, ... } 没有可用的 window 对象，该库似乎将无法运行> 作业。他们可能只是将 this 保留在那里，因为它是标准模块模式的一部分。