Question

我试图理解：

之间的区别

(function() {
    //do stuff with document
})();

和

document

我不确定为什么惯例似乎是将window，有时{{1}}传递给函数？是否与范围有关？

Answer 1

如果您使用像UglifyJS这样的压缩器/ uglifier，这将变得特别方便。然后，它会用document替换a，从而缩短您的代码。

类似

(function(document, window){
  var body = document.body;
  var foo = document.querySelector('foo');
  var bar = document.querySelector('bar');
})(document, window);

变为

(function(a, b){
  var c = a.body;
  var d = a.querySelector('foo');
  var e = a.querySelector('bar');
})(document, window);

如果您没有将文档和窗口放在函数中，它只会继续说文档;

(function(){
  var c = document.body;
  var d = document.querySelector('foo');
  var e = document.querySelector('bar');
})();

Answer 2

立即调用函数表达式（IIFE）创建一个新的本地范围。就像任何函数一样，您可以在调用时传入参数。 {web} api中的document和window是全局变量，并且在浏览器中运行js时可用。通过将它们传递到IIFE，您可以根据范围访问它们内部的任何内容。例如：

(function(w, d) {
  console.log(w); // window
  console.log(d); // document
})(window, document);

console.log(w); // Uncaught ReferenceError: w is not defined
console.log(a); // Uncaught ReferenceError: a is not defined

w和a未在第二组console.log中定义的原因是因为它们本地作用于IIFE。

Answer 3

这有一些原因：

<强> 1。使用较少的全局变量通过使用全局变量注入函数，它将仅依赖于参数而不是可能多次使用的全局变量。

<强> 2。创建本地范围 IIFE是一种通过声明函数并立即调用它来创建新范围的方法。有关详细信息，请参阅this question。

第3。更好地缩小

例如，如果你将缩小你的例子，它将改变：

(function(document) {
    //do stuff with document
})(document);

对此：

(function(a) {
    //do stuff with a
})(document);

请注意a，它比document短。

编辑：修正拼写错误

使用document参数自我调用anonymouse函数

3 个答案: