JavaScript自执行函数

自执行功能？ (Self-Executing function?)

如果您从未听说过它，但您使用过JavaScript，则很有可能已经使用过它。

A self-executing function, also known as Immediately Invoked Function Expression (IIFE), is declared as follows:

自我声明的函数，也称为立即调用函数表达式（IIFE），声明如下：

(function(){ 
  // do something here 
})();

My definition of self-executing function is:

我对自我执行功能的定义是：

Self-executing functions are a way to allow the creation of an isolated scope for code that we want to execute right after it's parsed.

自我执行功能是一种允许为我们想要在解析后立即执行的代码创建隔离范围的方法。

()

Scope, the eternally misunderstood

You may ask, why are we even doing this in the first place, right?

范围，永远被误解

您可能会问，为什么我们甚至还要这样做呢？

The short answer is: to execute code inside a controlled scope.

简短的答案是： 在受控范围内执行代码 。

If there's something that is often misunderstood, or even completely ignored, is the fact that scope is a key feature of JavaScript. As a functional language, JavaScript doesn't have classes and the only way to declare a private piece of code, is to write it inside its own scope.

如果某些东西经常被误解，甚至被完全忽略，那就是范围是JavaScript的关键功能。 作为一种功能语言，JavaScript没有类，并且声明私有代码段的唯一方法是在自己的作用域内编写代码。

Very few instructions create a scope, and functions are one of them and this means that, if you declare a variable inside a function, you won't be able to access it outside that function; for example:

很少有指令创建作用域，而函数就是其中的一个，这意味着，如果在函数内部声明变量，则将无法在该函数外部访问它。 例如：

var a = 5;
  function MyFunction(){
  var a = 10;
  return a;
}

console.log(MyFunction()); // prints 10
console.log(a); // prints 5

What the previous code snippet shows is that MyFunction creates a scope for variable a, which allows the internal value to be different from the one declared inside.

前面的代码片段显示的是

So if you want to execute your code in a way that won't interfere with anything else, you should create your own scope for it.

因此，如果您希望以不会干扰其他任何方式的方式执行代码，则应为其创建自己的作用域。

命名与匿名函数 (
Named vs Anonymous functions)

JavaScript支持两种类型的函数，即命名函数和匿名函数。 用他们的名字，我想你已经可以想象到区别了。 一个有一个名称，另一个没有：) JavaScript中的命名函数定义如下：

function MyFunction(){
  // do something here
}

function(){
// do something here
}

MyFunction() but you can't call the anonymous function because it has no name. What you can do instead is declare the anonymous function and assign it to a variable, like this:

var MyFunction = function(){
  // do something here
}

MyFunction(). All good until now? :)

()

自称它 (Self-Calling it)

现在，还记得我上面说过的我们不能调用匿名函数吗？ 好吧，如果我们不需要调用该怎么办？ 如果在声明之后就可以自我调用怎么办？

By wrapping a function in parenthesis we can then tell the JavaScript compiler to execute it right away, like this:

通过将函数包装在括号中，我们可以告诉JavaScript编译器立即执行它，如下所示：

(function(){
  // do something here
})()

self-executing function!

We can even call the function, passing arguments.

我们甚至可以通过传递参数来调用函数。

Below is a common example of a technique, more popular in the early days, to avoid naming conflicts with the $.

下面是一种常见的技术示例，该技术在早期更加流行，以避免与$命名冲突。

As jQuery can be used in both ways (jQuery and $), passing jQuery as an argument into your code prevents conflicts with other libraries that could be also using $ as an alias.

由于jQuery可以同时使用两种方法（jQuery和$），因此将jQuery作为参数传递给您的代码可防止与其他可能将$用作别名的库发生冲突。

(function($){
  // do something here
  // making sure that $ represents jQuery
})(jQuery)

学过的知识 (Lesson learned)

下次您有一段应立即执行的代码时，不要只是将其放在文件或 script block, wrap it with a self-executing function!

Happy safe coding!

快乐安全编码！

翻译自: https://www.experts-exchange.com/articles/27563/JavaScript-Self-Executing-Functions.html