javascript - 将全局对象作为参数传递给自执行函数有什么意义？

Question

我经常在 Javascript 库中看到这种模式:

(function (window, document, $, undefined) {
    window.foo = 'bar';
})(window, document, jQuery);

在这个例子中，传递 window、document 和 jQuery 有什么意义，因为它们是全局属性并且可以直接访问，就像这样:

(function () {
    window.foo = 'bar';
})();

console.log(foo);

这只是清洁问题，还是另有目的？

Answer 1

一个好处是它允许缩小版本的库替换参数名称。例如:

(function (window) {
    window.foo = 'bar';
})(window);

可以缩小到

(function(w){w.foo='bar'})(window);

鉴于

(function () {
    window.foo = 'bar';
})();

只能缩小到

(function(){window.foo='bar'})();

这并没有太大的改进。无法重命名全局对象，但可以重命名参数名称。

使用 undefined 作为未传递给函数的参数可确保函数内部对 undefined 的引用实际上是 undefined ，而不是一段疯狂的代码分配给名为 undefined 的变量的其他值，例如:

(() => {
  // absurd code that has a possibility of existing:
  const undefined = 'foo';

  // library code:
  // does not work:
  (() => {
    let someVarName;
    // We expect someVarName to be undefined because someVarName hasn't been assigned to, but:
    console.log(someVarName === undefined);
  })();
})();

作为解决方法，您可以使用绝对不会传递给函数的参数:

(() => {
  // absurd code that has a possibility of existing:
  const undefined = 'foo';

  // library code:
  // DOES work:
  ((undefined) => {
    let someVarName;
    console.log(someVarName === undefined);
  })();
})();

鉴于库代码通常在顶层运行，这大部分是过去的遗物，回到 undefined 可在顶层重新分配的时代，幸运的是不在现代浏览器中。