What is an anonymous function in JavaScript?

This article will introduce to you what anonymous functions are in JavaScript. I hope that after reading this article, you will have a certain understanding of the concept and use of anonymous functions in JavaScript.

#What is an anonymous function in JavaScript?

In front-end interviews, interviewers will basically ask what is an anonymous function and what is a closure function.

This article will first talk about what an anonymous function is.

Anonymous function, as the name implies, is a function without a name. Usually the functions we write are like this:

function do(){
  // 执行代码  
};
// 调用
do();

This way of writing is to define a function named do and pass the function name Make the call.

What would it be like if there was no name?

function () {
   // 执行代码   
 };

This way of writing will report an error during compilation:

Uncaught SyntaxError: Unexpected token (

Why is this? It turns out that when the browser performs syntax analysis, it finds that this function cannot be executed at all.

Then why do we need anonymous functions? If there is another coding method in a programming language, then this coding method will definitely run normally. So how to make the anonymous function run? Look at the following example:

var do = function () {  // 执行代码  }do();

Everyone must know this kind of function. In fact, this way of writing is to copy the anonymous function into the variable do, and then execute the function through the variable name.

(function(){   // 执行代码 
　　console.log("打印成功");
})();

What does the above code mean?

You can first divide the above code into several parts:

The first part is the anonymous function inside the brackets, the second part is the anonymous function with brackets, and the third part with The parentheses used at the end of the execution.

The anonymous function inside the brackets can be regarded as treating the anonymous function as a variable and then executing it through the brackets.

(function () {
   // 执行代码 
})();

// 相当于
var do = function() {
   // 执行代码  
}；

do();

In fact, the above anonymous function writing method is used in many places. This type is also called a self-executing function. Some toolkits such as JQuery will use this writing method. What are the advantages of self-executing functions? ?

// 定义一个全局变量a
var a = 1;

(function() {
  // 在自执行函数中也创建一个变量a
  var a = 2;
   console.log(a);  // 2
})();

console.log(a); // 1

You can see that the number printed in the self-executing function is 2, while the number printed in the self-executing function is 1;

Why is this?

Because there is a name in the program called scope, the scope of the global environment is called the global scope, the scope in the function is called the function scope, and the scope is hierarchical, internal scope Variables in the outer scope can be accessed in the domain, but variables in the inner scope cannot be accessed in the outer scope.

When accessing a variable in an internal scope, it will first search in the scope where it is located. If it cannot be found, it will search in the upper-level scope. If it cannot find it, it will search higher up again. to find the global scope. This layer-by-layer relationship is like a chain, so it is called a scope chain.

Look at the above code again: in the self-executing function, the console.log function accesses the a variable. It first searches in its own scope and finds the a variable, so the value of a is output 2; the global environment The console.log function in also accesses the a variable. Since the external scope cannot access the internal scope, the a variable accessed in the global environment can only be searched in the global function environment, so the value of a is 1;

Summary: The advantage of a self-executing function is to ensure that the variables in the self-executing function will not be contaminated by other environments.

This article comes from the js tutorial column, welcome to learn!

The above is the detailed content of What is an anonymous function in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!