Important differences between named and anonymous arrow functions in Javascript (recommended)

A named function refers to a function that explicitly gives a name, function abs(x){}. An anonymous function refers to a function that only has the keyword function and does not have a function name like abs, such as function(){}. The ES6 standard adds a new function: Arrow Function. Arrow functions are superficially equivalent to anonymous functions and simplify function definition. What is the difference between them?

1 The difference between named and anonymous functions

Difference: The anonymous function needs to assign the address to another variable let a, and then use a to call the function; while the named function needs to explicitly give The function name is included, so you can call it directly with this function name.

The return value of a named function is the return value in the function body. For example, the return value of the abs(x) function is the number variable. When calling a function, call abs(6) directly, which is very easy to understand.

function abs(x){
 if(x>=0){
  return x;
 }else{
  return -x;
 }
}

But what about anonymous functions? As shown below, the function does not explicitly give a function name, but abs here is assigned the address of this anonymous function, so you can use abs(-3) directly when using it, and so on.

let abs=function(x){
 if(x>=0){
  return x;
 }else{
  return -x;
 }
}

2 Arrow function

The ES6 standard adds a new function: Arrow Function. Why is it called Arrow Function? Because its definition uses an arrow. Arrow functions are superficially equivalent to anonymous functions and simplify function definition.

The arrow function has two formats. One is that it contains only one expression, even {...} and return are omitted.

x => x * x

The above arrow function is equivalent to an anonymous function ""

function (x) {
 return x * x;
}

There is also a type that can contain multiple statements, which cannot be used at this time Omit {…} and return:

(x,y) => {
 if (x > 0) {
  return x + y;
 }
 else {
  return -x + y;
 }
}

3 The difference between arrow functions and anonymous functions

The arrow function seems to be a shorthand for an anonymous function, but in fact, There is an obvious difference between arrow functions and anonymous functions: this inside the arrow function is the lexical scope, determined by the context.

Will calling function obj1.getAge(2017) and calling obj2.getAge(2017) get the same result?

The fn function in obj1 cannot get the expected result due to the incorrect handling of this binding by the JavaScript function. This.birth points to window or undefined.

But obj2 and fn functions are arrow functions. The arrow function completely repairs the pointing of this. This always points to the lexical scope, which is the outer caller obj2.

var obj1 = {
 birth: 1990,
 getAge: function (year) {
  let fn=function(y){
   return y - this.birth; // this指向window或undefined
  };
  return fn(year);
 }
};
var obj2 = {
 birth: 1990,
 getAge: function (year) {
  var fn = (y) => y - this.birth; // this.birth为1990
  return fn(year);
 }
};

4 Summary

Compared with named functions, anonymous functions need to assign the address to another variable let a, and then use a to call the function; compared with anonymous functions, arrow functions completely fix the pointing of this, which always points to the lexical scope.

The above is the important difference between named anonymous arrow functions in Javascript introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. !

For more important differences between named and anonymous arrow functions in Javascript (recommended), please pay attention to the PHP Chinese website!