Javascript_javascript 기술의 메소드 체이닝 소개

Javascript API를 디자인하는 방법을 찾다가 메소드 체이닝(Method Chaining)을 발견했습니다. 메소드 체이닝은 매우 강력하고 흥미로워 보이며 과거에도 자주 보았던 것입니다. .

Javascript 메소드 체이닝

위키피디아에 이런 설명이 있습니다.

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

명명된 매개 변수 관용구라고도 알려진 메서드 체이닝은 객체 지향 프로그래밍 언어에서 여러 메서드 호출을 호출하는 일반적인 구문입니다. 각 메서드는 개체를 반환하므로 호출이 단일 문으로 함께 연결될 수 있습니다. 체이닝은 구문상의 설탕입니다. 중간 변수의 필요성 메소드 체인은 줄 바꿈이 종종 추가됨에도 불구하고 더 많은 메소드가 함께 연결됨에 따라 발생하는 동일한 줄에 차례로 오는 메소드 수가 증가하기 때문에 열차 사고라고도 합니다. 방법.

번역 도구를 사용하여 번역하세요:

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

명명된 매개 변수 메서드라고도 하는 메서드 체이닝은 객체 지향 프로그래밍 언어에서 여러 메서드를 호출하기 위한 일반적인 구문입니다. 각 메서드는 개체를 반환하므로 호출을 단일 선언으로 함께 연결할 수 있습니다. 링크는 구문 설탕이므로 중간 변수가 필요하지 않습니다. 메서드 체이닝은 일반적으로 메서드 사이에 줄 바꿈이 추가되더라도 둘 이상의 메서드가 잠겨 있기 때문에 동일한 줄에 차례로 오는 메서드의 수가 증가하기 때문에 열차 사고라고도 합니다.

을 사용한 메소드 체이닝

육안으로 살펴보면 아마도 jQuery가 가장 많이 사용되는 메소드 체인일 것입니다.

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

//체이닝
$("#person").slideDown('느리게')
.addClass('그룹화됨')
.css('margin-left', '11px');

우리는 이것을 이와 같은 사용법으로 부를 수 있습니다. jQuery는 링크에 크게 의존합니다. 이렇게 하면 동일한 선택기의 여러 메서드를 쉽게 호출할 수 있습니다. 이는 또한 코드를 더 깔끔하게 만들고 동일한 선택을 여러 번 실행하는 것을 방지합니다(성능 향상). 메소드 체인이 없는 경우 다음과 같습니다

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

var p = $('#사람');
p.slideDown('느린');
p.addClass('그룹화');
p.css('margin-left', '11px');

디자인 패턴의 빌더와 매우 유사해 보이지만 차이점은 여기서 p가 클래스가 아닌 메소드라는 점입니다.

자바스크립트 메소드 체인 예시

앞서 Javascript 고차 함수에 대해 이야기할 때 print('Hello')('World')에 대해 이야기했는데, 이 사용법의 결과는 다음과 같을 수 있습니다.

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

함수 f(i){
반환 함수(e){
나 =e;
반환함수(e){
나 =e;
반환함수(e){
경고(i e);
};
};
};
};
f(1)(2)(3)(4) //10

이건 인터넷에서 본 예시인데 체인콜을 쓴 것도 이번이 마지막이었습니다. 매우 약해 보입니다.

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

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. 메소드 체인은 메소드를 사용합니다