封装在JavaScript中

很久以前,我看到有人用下面的代码封装了他们的整个JavaScript块:

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

问题:

  1. 上面的代码是否正确?
  2. 封装如上所述的整个JavaScript块有什么好处?

对,那是正确的。 它被称为自调用匿名函数expression式。

JavaScriptvariables具有函数范围或全局范围。 没有块范围。 将自己的代码封装在一个自我调用函数中,就像在你的例子中一样,为一次性使用的,立即运行的代码创build一个临时的本地作用域,而不会污染全局名称空间。

考虑以下:

 <html> <body> ... <script> (function() { var x = ''; function myFunction () { alert('Hello: ' + x); } x = 'Bob'; myFunction(); alert(typeof x); // string alert(typeof myFunction); // function })(); alert(typeof x); // undefined alert(typeof myFunction); // undefined </script> <script src="other-javascript.js"></script> </body> </html> 

无论你声明自我调用函数是在一个单独的范围内。 variablesx和函数myFunction()不能从其他地方访问。 例如, other-javascript.js的代码将不会看到它们,并且可以自由地声明另一个函数myFunction()而不发生冲突。

除了@Daniel的答案之外,把this传递给函数是一个通用的模式来引用全局对象,例如:

 (function(window){ })(this); 

在浏览器脚本中,全局对象有一个名为window的属性,它指向全局对象本身,在其他环境中没有window属性。

另外,可以做的另一件事是指定一个名为undefined的参数,因为undefined属性在ECMAScript 3rd中没有描述。 版本标准(不存在或不存在保证),在某些实现中,属性是可变的,例如:

 (function(window, undefined){ })(this); 

在上面的例子中,我们有两个本地标识符 (parsing速度快一些), windowundefined ,只有第一个标识符被传递( this总是指全局代码中的全局对象函数)),第二个将包含原始undefined值,因为我们没有给它传递任何值。

这个模式被jQuery等一些库所使用。