Introduction to Method Chaining in Javascript_javascript skills

When I was looking for how to design a Javascript API, I discovered Method Chaining. Method chaining seems very powerful and interesting, and it is something we have often seen in the past. .

Javascript Method Chaining

There is this explanation on Wikipedia:

Copy code The code is as follows:

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.

Take a translation tool and translate it:

Copy code The code is as follows:

Method chaining, also known as named parameter method, is a common syntax for calling multiple methods in object-oriented programming languages. Each method returns an object, allowing calls to be connected together in a single declaration. Links are syntactic sugar, eliminating the need for intermediate variables. Method chaining is also known as a train wreck because the number of methods that come one after another on the same line increases as more than one method is locked in even if line breaks are usually added between methods.

Method Chaining using

According to visual inspection, jQuery is probably the most used method chain.

Copy code The code is as follows:

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

We can call this with usage like this. jQuery relies heavily on links. This makes it easy to call several methods of the same selector. This also makes the code cleaner and prevents executing the same selection several times (improving performance). When there is no method chain, it looks like the following

Copy code The code is as follows:

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

It looks very similar to the builder in the design pattern. The difference is that p here is a method instead of a class.

Javascript method chain example

When we talked about Javascript high-order functions before, we talked about print('Hello')('World'), and the result of this usage may become like this.

Copy code The code is 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 from the Internet, but it was also the last time I wrote a chain call. Looks extremely weak.

Copy code The code is as follows:

var func = (함수() {
복귀{
          추가: 함수 () {
console.log('1');
            반품{
결과: 함수 () {
console.log('2');
                }
            }
}
}
})();

func.add().result();

실제로 모든 함수에는 this 반환이 있어야 하므로 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

Func = (함수() {
This.add = function(){
console.log('1');
         이것을 돌려주세요;
};
This.result = 함수(){
console.log('2');
         이것을 돌려주세요;
};
이것을 돌려주세요;
});

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

물론 마지막 두 문장을 바꿀 수도 있습니다

코드 복사 코드는 다음과 같습니다.

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

이 되다

코드 복사 코드는 다음과 같습니다.

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

기타

마지막으로 헷갈리는 부분에 대한 약간의 비교:

메서드 체이닝 VS 프로토타입 체이닝

프로토타입 체인과 메소드 체인은 어떤 면에서는 유사하지만 차이점은 있을 수 있습니다

1. 프로토타입 체인에는 프로토타입을 사용해야 합니다
2. 메소드 체인은 메소드를 사용합니다