Detailed analysis of javascript callback functions (graphic tutorial)

This article mainly introduces the relevant knowledge points of javascript callback functions and analysis of usage code examples. Friends in need can learn from it.

In an era when high-level languages ​​are emerging in endlessly, each language claims to have the proud saying that everything is an object, but js, as a scripting language, is very different from traditional object-oriented languages ​​​​such as Java. In addition to the weird inheritance system of js, one of the most fascinating features is the callback function. Of course, many people criticize it. The author believes that the callback function and asynchronous are the two most prominent features of the js language. Of course, just like all the advantages You need to meet your own needs. There is no silver bullet in this world. For example, using a large number of callback functions will make your code redundant and messy, affecting the visual and thinking experience of coders.

This article is my own review of learning callback functions My experience is inevitably imperfect or even wrong. Forgive my ignorance. I am willing to learn with an open mind and improve myself.

The most unique thing about JavaScript is that functions are first-class citizens. I prefer to call js everything. A high-level language for variables. Functions are also variables that can become parameters of other functions. We like to call them callback functions in js. In addition, anonymous functions in js can be used as function parameters, making callback functions easy to write.

ps. The callback function is similar to the function pointer in the C language---pointer pointer!!! Important things must be said three times

Let’s first look at the definition of the callback function

In computer programming, a callback is a piece of executable code that is passed as an argument to other code, which is expected to call back (execute) the argument at some convenient time

The callback function is a piece of executable code Code segment, which is passed as a parameter to other code, its function is to facilitate calling this piece of code (callback function) when needed.

Callback function

  function addSqua(num1, num2, callback){
    var sum = num1 + num2;
    return callback(sum);
  }
  
  function squa(num){
    return num*num;
  }
  
  let num = addSqua(1, 2, squa);    
  console.log(num);
  //=>9

Anonymous callback function

Pass the anonymous function directly to the function as a function parameter, which is what we generally use in programming

function addSqua(num1, num2, callback){
 var sum = num1 + num2;
 return callback(sum);
}
let num = addSqua(1, 2, function squa(num){
 return num*num;
});    
console.log(num); 
//=9

Imitate the every method in the array

Add a method similar to every in Array.prototype

  Array.prototype.myEvery = function (callback) {
   if (typeof callback === 'function') {
    for (let i = 0; i < this.length; i++) {
     if (callback(this[i])) {
      return false;
     }   
    }
    return true;
   }
   return true;
  }
  
  let op = [3, 6, &#39;every&#39;, 9,&#39;each&#39;];
  op.myEvery(function (value) {
   console.log(value);
  })
  // 3
  // 6
  // &#39;every&#39;
  // 9
  // &#39;each&#39;

Callback function features

1. will not be executed immediately. As given in the definition, the callback function as a code fragment can be executed under its specific conditions as needed. When the callback function is passed as a parameter to a function , only the function definition is passed and will not be executed immediately.

2. #this, ES6 introduced arrow functions. The introduction of arrow functions requires special attention when writing callback functions. this is the context object pointing to the function where it is located. If you use arrow functions in ES6 You need to pay attention to the use of this. There is no contextual relationship with this in the arrow function. If you are interested, you can check out ES6 Ruan Yifeng, who once again presents the advantages and usage scenarios of the portal

callback function It is a closure

The callback function is a simple use of closure, which means that it can access the variables defined in its outer layer.

The beauty of callback functions

• DRY to avoid duplication of code.

• Can abstract common logic.

• Business logic separation (it's so beautiful ^-^ ^-^)

• Improve code maintainability and readability.

• Enhance code readability.

• Separate dedicated functions.

The great thing about js callback function is that other traditional languages ​​do not have it. It can realize the separation of business logic, which is equivalent to exposing an interface to the outside world. This is very similar to the separation of front and back ends. API interface design concept in the architecture

There is no 'silver bullet' in this world, and there is no one solution that can solve everything. Since js is born for asynchronous, callback functions are used most often and are also the most suitable. The problem is asynchronous programming. However, extensive use will make the programmer's code redundant, with a large number of unreadable lines, and the experience is extremely poor. It is simply a joyful thing. People have never stopped pursuing their own comfort.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement sliding puzzle verification code in JS

vuejs中v -Detailed explanation of using if and v-show

Detailed explanation of the steps to implement red-black tree using JS

The above is the detailed content of Detailed analysis of javascript callback functions (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!