什么是包装整个Javascript文件在匿名函数像“（function（）{...}）（）”的目的是什么？ [英] What is the purpose of wrapping whole Javascript files in anonymous functions like “(function(){ … })()”?

问题描述

我最近一直在阅读很多Javascript，我一直注意到整个文件被包装如下.js文件中被导入。

 （function（）{
 ... 
 code 
 ... 
}） 
  

这样做的原因是什么，而不是一组简单的构造函数？

解决方案

通常是命名空间（见后文），并控制成员函数和/或变量的可见性。想象它像一个对象定义。 jQuery插件通常是这样写的。

在Javascript中，你可以嵌套函数。所以，以下是合法的：

  function outerFunction（）{
 function innerFunction（）{
 / / code 
} 
} 
  

现在可以调用 outerFunction（），但是 innerFunction（）的可见性限制在 outerFunction（），意味着它是 outerFunction（）的私有。它基本上遵循与JavaScript中的变量相同的原则：

  var globalVariable; 
 
 function someFunction（）{
 var localVariable; 
} 
  

相应地：

  function globalFunction（）{
 
 var localFunction1 = function（）{
 // I'm anonymous！但localFunction1是对我的引用！ 
}; 
 
 function localFunction2（）{
 //我命名了！ 
} 
} 
  

在上述情况下，您可以调用 globalFunction（），但不能调用 localFunction1 或 localFunction2 。

当你写（function（）{... code ...}）（），你是在代码里面的函数文字（意思是整个对象实际上是一个函数）。之后，你是自我调用的函数（最后（））。因此，我之前提到的主要优点是，你可以有私有方法/函数和属性：

  ）{
 var private_var; 
 
 function private_function（）{
 // code 
} 
}）（）
  

整洁的事情是，你也可以定义内部的东西，并将它暴露在外面的世界（一个命名空间的例子，您自己的库/插件）：

  var myPlugin =（function（）{
 var private_var; 
 
 function private_function（）{
} 
 
 return {
 public_function1：function（）{
}，
 public_function2：function 
} 
} 
}）（）
  

调用 myPlugin.public_function1（），但不能访问 private_function（）！所以非常类似于类定义。为了更好地理解这一点，我推荐以下链接阅读：

• 命名空间您的Javascript


• Javascript中的私人成员（by Douglas Crockford）

EDIT

我忘了提及。在最后的（），你可以传递任何你想要的。例如，当您创建jQuery插件时，您传递 jQuery 或 $ ：

 （function（jQ）{... code ...}）（jQuery）
   jQ ，一个局部变量，并且仅知道该函数）。然后你自我调用该函数并传入一个参数（也叫 jQuery ，但这个一个是来自外部世界，到实际的jQuery本身）。没有迫切的需要这样做，但有一些优点：
 
 
 
 
 
您可以重新定义一个全局参数，并给它一个名字， 
 
 
有一个轻微的性能优势，因为它更快地在本地范围查找东西，而不必走上范围链进入全局范围。 / li> 
 
有压缩（缩小）的好处。
 
 
 
I have been reading a lot of Javascript lately and I have been noticing that the whole file is wrapped like the following in the .js files to be imported.
(function() {
    ... 
    code
    ...
})();
What is the reason for doing this rather than a simple set of constructor functions?
解决方案
It's usually to namespace (see later) and control the visibility of member functions and/or variables. Think of it like an object definition. jQuery plugins are usually written like this.

In Javascript, you can nest functions. So, the following is legal:
function outerFunction() {
   function innerFunction() {
      // code
   }
}
Now you can call outerFunction(), but the visiblity of innerFunction() is limited to the scope of outerFunction(), meaning it is private to outerFunction(). It basically follows the same principle as variables in Javascript:
var globalVariable;

function someFunction() {
   var localVariable;
}
Correspondingly:
function globalFunction() {

   var localFunction1 = function() {
       //I'm anonymous! But localFunction1 is a reference to me!
   };

   function localFunction2() {
      //I'm named!
   }
}
In the above scenario, you can call globalFunction() from anywhere, but you cannot call localFunction1 or localFunction2.

What you're doing when you write (function() { ... code ... })(), is you're making the code inside a function literal (meaning the whole "object" is actually a function). After that, you're self-invoking the function (the final ()). So the major advantage of this as I mentioned before, is that you can have private methods/functions and properties:
(function() {
   var private_var;

   function private_function() {
     //code
   }
})()
The neat thing is that you can also define things inside and expose it to the outside world so (an example of namespacing so you can basically create your own library/plugin):
var myPlugin = (function() {
 var private_var;

 function private_function() {
 }

 return {
    public_function1: function() {
    },
    public_function2: function() {
    }
 }
})()
Now you can call myPlugin.public_function1(), but you cannot access private_function()! So pretty similar to a class definition. To understand this better, I recommend the following links for some further reading:


Namespacing your Javascript
Private members in Javascript (by Douglas Crockford)


EDIT

I forgot to mention. In that final (), you can pass anything you want inside. For example, when you create jQuery plugins, you pass in jQuery or $ like so: 
(function(jQ) { ... code ... })(jQuery) 
So what you're doing here is defining a function that takes in one parameter (called jQ, a local variable, and known only to that function). Then you're self-invoking the function and passing in a parameter (also called jQuery, but this one is from the outside world and a reference to the actual jQuery itself).  There is no pressing need to do this, but there are some advantages:


You can redefine a global parameter and give it a name that makes sense in the local scope.
There is a slight performance advantage since it is faster to look things up in the local scope instead of having to walk up the scope chain into the global scope.
There are benefits for compression (minification).


                        
这篇关于什么是包装整个Javascript文件在匿名函数像“（function（）{...}）（）”的目的是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！