Methods in JavaScript (method chaining) introduce _javascript tips

Source: Internet
Author: User

When looking for how to design a JavaScript API, I found the method chaining this thing, the chain of methods, it seems to be very powerful and interesting, and this is what we used to see in the past.

Javascript Method Chaining

On Wikipedia, there's this explanation:

Copy Code code as follows:

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

Take the translation tool to translate a bit:

Copy Code code as follows:

The method chain, also known as the named parameter method, is the universal syntax for calling multiple methods in an object-oriented programming language. Each method returns an object that allows the phone to be connected together in a single declaration. Links are grammatical sugars that omit the need for intermediate variables. The method chain is also known as the train Wreck. The methods that occur successively in the same row are locked in an increase in the number of methods that are usually added to the line.

Method chaining use

The most common use of visual inspection for a method chain is jquery.

Copy Code code as follows:

Chaining
$ ("#person"). Slidedown (' slow ')
. addclass (' grouped ')
. css (' margin-left ', ' 11px ');

We can call this in this usage. jquery relies heavily on links. This makes it very easy to invoke the same selection of several methods. This also makes the code clearer and prevents the execution of the same selection several times (improve performance). When there is no chain of methods, it is the following.
Copy Code code as follows:

var p = $ (' #person ');
P.slidedown (' slow ');
P.addclass (' grouped ');
P.css (' Margin-left ', ' 11px ');

Looks like the builder in the design pattern, but the p here is the method, not the class.

Javascript Method Chain Example

When we talked about JavaScript higher-order functions, we spoke of print (' Hello ') (' World '), and the result of that usage might turn out to be this way.

Copy Code code as follows:

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 was the last time I wrote a chained call. Looks like a weak explosion.
Copy Code code as follows:

var func = (function () {
return{
Add:function () {
Console.log (' 1 ');
return{
Result:function () {
Console.log (' 2 ');
}
}
}
}
})();

Func.add (). result ();


You should actually have a return this in every function, so you have:
Copy Code code as follows:

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 make the last two sentences
Copy Code code as follows:

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

Become
Copy Code code as follows:

New Func (). Add (). result ();

Other

Finally as a small comparison of a confounded place:

Method Chaining VS Prototype chaining

The prototype chain and the method chain are similar in some ways, and the different places may be

1. Prototype chain is required by prototype
2. The method chain is the method

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.