Detailed explanation of the steps to implement JS method overloading using the cache call chain

This time I will bring you a detailed explanation of the steps to use the cache call chain to implement JS method overloading, and use the cache call chain to implement JS method overloadingWhat are the precautions, the following are Let’s take a look at practical cases.

1. What is method overloading

Method overloading refers to defining multiple methods with the same name in a class, but each method is required to have different parameter types or parameters. number.
In short: method overloading means repeated method names and different loading parameters.

Please turn left for details: Method Overloading/Baidu Encyclopedia
So how does js implement this? ? ?

2. How to implement js?

First of alljavascriptThere is no concept of overloaded functions/methods, but js provides a method parameter arguments, and the length of the method parameters can be obtained through the length attribute of this parameter. o~ By the way, what we implemented today is only overloading according to the parameter length, not the parameter type~~·length,
As for downloading, once the method parameter length is available, a more common switch writing method appears ：

var seven={
  dosomething:function(){
    switch(arguments.length){
      case 0:
        console.log(arguments.length);
        //dosomething
        break;
      case 1:
        console.log(arguments.length);
        //dosomething
        break;
       case 2:
        //dosomething
        console.log(arguments.length);
        break;
    }
  }
}

3. Optimization

wow~If there are 10 methods, 10 branches will be needed~And it is very difficult to maintain~because each method body is under a case , or propose it separately and write it as a function~
But these are bad~not easy to maintain, and the quality is not high enough~So how should we elegantly implement the processing of the same method name with different parameters?

This is where the apply method is used.

Let’s write a addMethod method for seven.

var seven = {
  addMethod: function (fname, func) {
    var old = this[fname];
    this[fname] = function () {
      if (arguments.length == func.length) {
        return func.apply(this,arguments);
      }
      if (typeof old == 'function') {
        return old.apply(this, arguments);
      }
    }
  }
};

The modified seven is as above, and then before The switch you write can be done like this:

seven.addMethod('dosomething', function (x) {
  console.log(arguments.length);
   //dosomething
});
seven.addMethod('dosomething', function (x,y) {
  console.log(arguments.length);
   //dosomething
});
seven.addMethod('dosomething', function (x,y,z) {
  console.log(arguments.length);
   //dosomething
});

If we want to add a method, we only need to call the addMethod method. Don’t you think it is simpler and clearer?
The principle of this code is actually very simple. It is to cache the old method, and then apply chain calls in sequence according to the parameter length until a method with the same length as the current parameter is found ~ and then called.

func and old are very likely to confuse the newbies. In fact, this is not the case. The features of the JavaScript language are cleverly used here. This old is saved every time. They are all references to the last method, and they are brand new every time, while the old old maintains a reference. What is this? Closure~.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use Vux in a Vue project

How to use slots in Vue to distribute parent components

The above is the detailed content of Detailed explanation of the steps to implement JS method overloading using the cache call chain. For more information, please follow other related articles on the PHP Chinese website!