A closer look at anonymous functions and arrow functions in JavaScript

In JavaScript, functions are first-class citizens, which means they can be passed, stored, and called just like variables. Anonymous functions and arrow functions are two commonly used function forms in JavaScript.

Anonymous functions are functions without names, usually declared through function expressions. It is created at declaration time but can only be used at the declaration location. Anonymous functions can be passed directly as function parameters or stored as a variable that can be called.

For example, we can use the following anonymous function to create an immediate execution function:

(function () {
  console.log('立即执行函数。');
})();

(function () {})() in the code represents an anonymous A function that contains a block of code that prints out a message. It is used to create an immediate execution function, that is, it will run immediately after declaration. This function does not require a global name, so we can declare it as an anonymous function.

Compared with anonymous functions, arrow functions are a new feature in ES6. Arrow functions are a simpler way to declare functions, using => symbols to connect the parameter list and function body. Arrow functions can directly return the value of an expression.

The following is a simple example that shows how to use arrow functions to print out a message:

const printMessage = message => console.log(`信息为: ${message}`);
printMessage('Hello World!');

const printMessage = message => console.log(The information is: ${message}); represents an arrow function, which receives a parameter message and prints this parameter to the console. We then store this arrow function into a variable printMessage and use it to print out a message.

Another difference is that in an arrow function, the scope of this is the context in which the function that has it is defined, not the context in which it is executed. This causes this to not work as expected in some special cases (such as requiring dynamic binding context) when using arrow functions. In this case, using an anonymous function may be more useful.

Here is a classic example of using arrow functions in an object literal resulting in incorrect context for this:

const person = {
  name: 'John Doe',
  getName: () => {
    console.log(this.name); // undefined
  }
};
person.getName();

Here, we define An object containing a property name and a method getName. The getName method is an arrow function that attempts to print the value of this.name. However, because the arrow function uses the context in which the function that has it is defined, the value of this.name is undefined. In this case it would be better to use an anonymous function.

Here is the same example, this time we use an anonymous function instead of an arrow function:

const person = {
  name: 'John Doe',
  getName: function () {
    console.log(this.name); // John Doe
  }
};
person.getName();

Here, we just convert the arrow function into an anonymous function. This function uses the normal function context, so the value of this.name is the correct value.

In general, anonymous functions and arrow functions are two commonly used function forms in JavaScript but have different characteristics. When using functions, you need to choose the appropriate function form according to the actual situation.

The above is the detailed content of A closer look at anonymous functions and arrow functions in JavaScript. For more information, please follow other related articles on the PHP Chinese website!