在JavaScript中使用匿名和自执行功能

While functions were introduced in this reading list series as named tasks, it’s also possible to create anonymous functions, which have several important roles in JavaScript.

虽然在本阅读列表系列中将函数作为命名任务引入 ，但也可以创建匿名函数，这些匿名函数在JavaScript中具有多个重要角色。

日常匿名 (Everyday Anonymity)

You’re probably already encountered anonymous functions: they’re an intrinsic part of callbacks.

您可能已经遇到匿名函数：它们是callbacks的固有部分。

document.getElementById("button").addEventListener("click", 
    function (){
        …
    })

Because the function used in the event listener is not named, it’s anonymous. Anonymous functions are frequently created and run at the same moment, as they are in a callback.

因为事件监听器中使用的函数未命名，所以它是匿名的 。 匿名函数经常在回调中创建并同时运行 。

An anonymous function can also be the value of a variable, as a function expression:

匿名函数也可以是变量的值，作为函数表达式：

var luke = function() {
    // use the force
}

In this way, the function can be referred to later by the name of the variable, although it is still considered anonymous.

这样，尽管仍被认为是匿名的，但以后可以通过变量名来引用该函数。

有区别的区别 (Distinctions with a Difference)

One important distinction about anonymous functions is that they must be defined before making any reference to them. You might recall back in the first article in this series that traditional functions can be declared anywhere in your code and referenced from anywhere, since the browser will parse your code before executing it, picking up any named functions along the way; it’s only convention (and good coding practice) that functions are written at the start of your script. But because an anonymous function is created at the moment it is run in the script, not when the script is parsed, it can’t be written after a reference to it in your code.

关于匿名函数的一个重要区别是， 必须在对它们进行任何引用之前对其进行定义。 您可能还记得本系列的第一篇文章 ，传统功能可以在代码中的任何地方声明并可以从任何地方引用，因为浏览器将在执行代码之前对其进行解析，并在此过程中拾取所有命名的函数。 唯一的约定 (也是良好的编码习惯)是在脚本开始处编写函数。 但是，由于匿名函数是在脚本中运行时创建的 ，而不是在解析脚本时创建的，因此无法在代码中对其进行引用后再编写。

用于匿名函数 (Uses for Anonymous Functions)

Because they don’t need a name, anonymous functions are shorter and easier to write if you don’t need a reference to them elsewhere; that’s one of the reasons they’re used in callbacks. There’s also one interesting feature of anonymous functions: used in a particular way, they can run themselves.

因为它们不需要名称，所以如果您不需要在其他地方引用它们，匿名函数将更短且更容易编写。 这是在回调中使用它们的原因之一。 匿名函数还有一个有趣的功能：以特定方式使用，它们可以自行运行。

(function() {
    // run a bunch of code automatically
})();

The technique is known as a self-executing, self-invoked, or immediately invoked function expression (and thus by the acronym IIFE). It is created by the empty parentheses at the end of the function, which tells the browser to run the function as soon as it comes across it. This may seem to be somewhat redundant: ordinary JavaScript will also be executed when it is encountered in your code, so why use this odd-looking function?

该技术被称为自执行，自调用或立即调用的函数表达式(因此缩写为IIFE)。 它由函数末尾的空括号创建，它告诉浏览器在遇到函数时立即运行它。 这似乎有点多余：普通JavaScript也将在您的代码中遇到时执行，那么为什么要使用这个看起来很奇怪的函数呢？

The primary reason is to take advantage of scope. You may recall that variables declared inside functions can only be referenced inside the context of that function; they’re not recognized at all outside of it. As such, creating variables inside a self-executing function “locks off” the function, and prevents the variables from being accidentally referenced or overwritten elsewhere in your code. The technique neatly encapsulates the variables and code, keeping them out of the global namespace and ensuring they don’t clash with other code written elsewhere. As such, additions to code such as polyfills or plugins are frequently written as self-executing functions.

主要原因是要利用范围 。 您可能还记得， 在函数内部声明的变量只能在该函数的上下文内引用。 他们根本不被认可。 这样，在自执行函数内部创建变量会“锁定”该函数，并防止在代码的其他地方意外引用或覆盖变量。 该技术巧妙地封装了变量和代码，使它们不位于全局名称空间中，并确保它们不会与其他地方编写的其他代码冲突。 这样，诸如polyfills或插件之类的代码添加经常被编写为自执行功能。

结论 (Conclusion)

Understanding anonymous and self-executing functions allows you to pass functions around as variables and modularize your code. But functions can be used for much more: they can even create and return other functions. That’s the role of closures, which we will look at next.

了解匿名和自执行函数可以使您将函数作为变量传递并模块化代码。 但是函数可以使用更多：它们甚至可以创建和返回其他函数。 这就是闭包的作用，我们将在后面讨论。

翻译自: https://thenewcode.com/1145/Using-Anonymous-and-Self-Executing-Functions-in-JavaScript