Method chains in Javascript (Method Chaining) are introduced

  • 2020-05-16 06:20:01
  • OfStack

While looking for how to design an Javascript API, we found this thing, Method Chaining, which seems very powerful and interesting, and this is something we used to see a lot.

Javascript Method Chaining

Here's what it says on wikipedia:


Method chaining, also known as named parameter idiom, is a common syntax for invoking multiple method calls in object-oriented programming languages. Each method returns an object, allowing the calls to be chained together in a single statement.Chaining is syntactic sugar which eliminates the need for intermediate variables. A method chain is also known as a train wreck due to the increase in the number of methods that come one after another in the same line that occurs as more methods are chained togethe even though line breaks are often added between methods.

Took the translation tool to translate 1:


Method chains, also known as named parameter methods, are a common syntax for calling multiple methods in object-oriented programming languages. every 1 Method return 1 Object that allows the phone to connect to 1 On, 1 A single 1 In the statement. Links are syntactic sugar, eliminating the need for intermediate variables. Method chains are also known as train wrecks due to the same methods that came to pass 1 Methods above the line are locked even as the number of newlines is usually added between methods increases.

Method Chaining use

The most commonly used visual method chain is jQuery.


// chaining
$("#person").slideDown('slow')
   .addClass('grouped')
   .css('margin-left', '11px');

We can call this in this way. jQuery relies heavily on links. This makes it easy to call several methods the same choice. This also makes the code cleaner and prevents the same selection from being performed several times (improving performance). When there's no method chain, it looks like this

var p = $('#person');
p.slideDown('slow');
p.addClass('grouped');
p.css('margin-left', '11px');

It looks a lot like builder in the design pattern, except that p here is a method, not a class.

Javascript method chain example

When we talked about Javascript higher order functions, we talked about print('Hello')('World'), and this usage might end up looking like this.


function f(i){
  return function(e){
    i+=e;
    return function(e){
      i+=e;
      return function(e){
        alert(i+e);
      };
    };
  };
};
f(1)(2)(3)(4); //10

This is an example on the web, but it's also what I did the last time I wrote a chain call. It looks too weak.

var func = (function() {
    return{
        add: function () {
            console.log('1');
            return{
                result: function () {
                    console.log('2');
                }
            }
        }
    }
})(); func.add().result();

There should actually be an return this for each function, so you have:

Func = (function() {
    this.add = function(){
        console.log('1');
        return this;
    };
    this.result = function(){
        console.log('2');
        return this;
    };
    return this;
}); var func = new Func();
func.add().result();

Of course we can also put the last two sentences

var func = new Func();
func.add().result();

become

new Func().add().result();

other

Finally, as a small comparison of a confusing place:

Method Chaining VS prototype Chaining

The prototype chain is similar to the method chain in some ways, perhaps with a difference

1. Prototype chain is required to use prototypes
2. Method chain is used method


Related articles: