javascript - 从内部扩展命名空间模块

Question

代码:

;(function (ns, undefined) {
  ns = {
    foo1: "bar1"
  }

  this.ns = {
    foo2: "bar2"
  };

  ns.foo3 = "bar3";

  return ns;

})(window.ns = window.ns || {});

结果:

调用 ns 结果:对象 {foo2: "bar2"}

IIFE 返回:对象 {foo: "bar1", foo3: "bar3"}

<强>1。我理解正确吗？

• ns 是 IIFE 中一个新的私有(private)对象，然后返回
• this.ns 属于window.ns 并对其进行扩展

<强>2。为什么 this.ns 中有 this 关键字？

由于 IIFE 是在全局上下文中调用的，因此链接了 this 关键字具有全局性，因此:document.ns(命名空间)

<强>3。如何在 IIFE 中正确访问 this.ns 属性？

例如 console.log(this.ns.foo2) - 这是正确的方法吗？

<强>4。由于我将 window.ns 作为 ns 参数传递，为什么我必须使用 this.ns 而不仅仅是 ns 只有？

Answer 1

调用 IIFE 的参数是什么？

window 对象在运行时没有 .ns 属性。因此 window.ns 将评估为 undefined，在 || 表达式中将强制为 false 而 {} 将强制为 true。 || 表达式因此最终将变为 false || true 导致 window.ns = {} 作为参数传递给 IIFE。

IIFE 内部发生了什么？

ns 参数被传递给 window.ns = {} 参数，然后 ns = {foo1: 'bar1'} 分配一个ns 的新值，然后 ns.foo3 = 'bar3 向其添加另一个属性/值对。

this 在全局范围内声明的函数中使用时默认为全局对象(浏览器中的窗口对象)。 this.ns = {foo2: 'bar2'} 因此在窗口对象上创建了一个名为 .ns 且值为 {foo2: ' bar2'}.

如何访问window.ns和ns？

你可以从任何地方访问window.ns，因为它属于全局范围。

只有 IIFE 和其中的函数可以访问 ns，因为它是在 IIFE 的词法范围内声明的。但是，由于 IIFE 返回 ns，因此可以将返回值存储在全局范围内的变量中，从而使 ns 可以在 IIFE 的词法范围之外访问。