Important Differences of Named Anonymous Arrow Functions in Javascript Recommendations for of

A named function is a function that explicitly gives a name, function abs (x) {}. An anonymous function is a function with only the keyword function and no function name like abs, such as function () {}. The ES6 standard adds a new function: Arrow Function (arrow function) The arrow function is ostensibly equivalent to an anonymous function and simplifies the function definition. What are the differences between them?

1 The difference between named and anonymous functions

Difference: Anonymous function needs to talk about address assignment to another variable let a, and then use a to call the function; The named function can be called directly with this function name because it shows the function name.

The return value of a named function is the return value of the function body, for example, the return value of an abs (x) function is an number variable. When the function is called, it is called directly by abs (6), 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 implicitly gives a function name, but here abs is assigned to the address of the anonymous function, so you can use it directly with abs (-3), and so on.

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

2 arrow function

A new function is added to the ES6 standard: Arrow Function (arrow function). Why is it called Arrow Function? Because it is defined by an arrow. The arrow function is ostensibly anonymous and simplifies the function definition.

There are two formats for arrow functions. One contains only one expression, omitting {…} and return.

x => x * x

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

function (x) {
 return x * x;
}

There is another one that can contain multiple statements, so {…} and return cannot be omitted at this time:

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

3 The difference between arrow function and anonymous function

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

Call function obj1.getAge(2017) And call obj2.getAge(2017) Will you get the same result?

The fn function in obj1 can not get the expected result due to the wrong handling of this binding by JavaScript function, and this. birth points to window or undefined.

But obj2, fn functions are arrow functions, which completely fix the pointing of this, and this always points to the lexical scope, that is, the outer caller obj2.

var obj1 = {
 birth: 1990,
 getAge: function (year) { 
  let fn=function(y){
   return y - this.birth; // this Point window Or undefined
  }; 
  return fn(year); 
 }
};
var obj2 = {
 birth: 1990,
 getAge: function (year) {
  var fn = (y) => y - this.birth; // this.birth For 1990
  return fn(year);
 }
};

4 Summary

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

Above is the site to introduce you Javascript anonymous arrow function with the important difference, I hope to help you, if you have any questions welcome to leave me a message, this site will reply to you in time!