The difference between arrow functions and ordinary functions

The differences between arrow functions and ordinary functions are mainly in the simplicity of syntax, different this points, not applicable to constructors, no arguments objects, etc. Detailed introduction: 1. Syntax simplicity. The syntax of arrow functions is more concise than that of ordinary functions. Arrow functions can be defined using arrows. The function keyword and curly braces are omitted, and the parameters and return values ​​of the function can be directly defined. The arrow function is When there is only one parameter, the parentheses can also be omitted; 2. This points to different points, etc.

Arrow Function and Regular Function are two ways of defining functions in JavaScript. They have some differences in syntax and functionality. . Below I will introduce in detail the difference between arrow functions and ordinary functions.

1. Syntax simplicity:

The syntax of arrow functions is more concise than that of ordinary functions. Arrow functions can be defined using arrows (=>). The function keyword and curly braces are omitted, and the parameters and return values ​​of the function can be directly defined. For example:

   // 普通函数
   function regularFunc(a, b) {
     return a + b;
   }
   
   // 箭头函数
   const arrowFunc = (a, b) => a + b;

The arrow function can also omit the parentheses when it has only one parameter. For example:

   // 普通函数
   function regularFunc(a) {
     return a * 2;
   }
   
   // 箭头函数
   const arrowFunc = a => a * 2;

2. What this points to is different:

In a normal function, the value of this is determined when the function is called, and it points to the object that calls the function. In arrow functions, the value of this is determined when the function is defined, and it points to the context in which the arrow function is defined. This means that the arrow function does not have its own this, it inherits the this of the parent scope. For example:

   // 普通函数
   const obj = {
     name: 'Alice',
     regularFunc: function() {
       console.log(this.name);
     }
   };
   obj.regularFunc(); // 输出：Alice
   
   // 箭头函数
   const obj = {
     name: 'Alice',
     arrowFunc: () => {
       console.log(this.name);
     }
   };
   obj.arrowFunc(); // 输出：undefined

In an arrow function, this points to the context in which the arrow function is defined, not the object that calls the arrow function.

3. Not applicable to constructors:

Arrow functions cannot be used as constructors, and objects cannot be instantiated through the new keyword. Ordinary functions can be used as constructors, and object instances can be created through the new keyword. For example:

   // 普通函数
   function RegularConstructor() {
     this.name = 'Alice';
   }
   const regularObj = new RegularConstructor();
   
   // 箭头函数
   const ArrowConstructor = () => {
     this.name = 'Alice';
   };
   const arrowObj = new ArrowConstructor(); // 报错：ArrowConstructor is not a constructor

4. No arguments object:

In a normal function, you can use the arguments object to access all incoming parameters, which is an array-like object. The arrow function does not have its own arguments object, it inherits the arguments object in the parent scope. For example:

   // 普通函数
   function regularFunc() {
     console.log(arguments[0]);
   }
   regularFunc(1, 2, 3); // 输出：1
   
   // 箭头函数
   const arrowFunc = () => {
     console.log(arguments[0]);
   };
   arrowFunc(1, 2, 3); // 报错：arguments is not defined

In summary, the grammatical difference between arrow functions and ordinary functions is mainly reflected in simplicity and this pointing. Arrow functions have a more concise syntax, but cannot be used as constructors and do not have their own this and arguments objects. The syntax of ordinary functions is relatively complex, but it can be used as a constructor and has its own this and arguments objects. In actual use, we can choose the appropriate function definition method according to specific needs.

The above is the detailed content of The difference between arrow functions and ordinary functions. For more information, please follow other related articles on the PHP Chinese website!