>  기사  >  웹 프론트엔드  >  JavaScript_javascript 기술의 두 가지 유형의 체인 호출 구현 코드

JavaScript_javascript 기술의 두 가지 유형의 체인 호출 구현 코드

WBOY
WBOY원래의
2016-05-16 18:12:08955검색
1. 메소드 본문은 객체 인스턴스 자체를 반환합니다(this)
코드 복사 코드는 다음과 같습니다. 다음:

function ClassA(){
this.prop1 = null;
this.prop2 = null
this.prop3 =
ClassA.prototype = {
method1 : function(p1){
this.prop1 = p1;
return this
},
method2 : function(p2){
this. prop2 = p2;
return this;
},
method3 : function(p3){
this.prop3 =
return this; >

함수/클래스 ClassA가 정의되어 있습니다. 세 가지 속성/필드 prop1, prop2, prop3이 있고 세 가지 메서드 method1, method2, method3이 각각 prop1, prop2, prop3을 설정합니다.
체인 콜은 다음과 같습니다.



코드 복사
코드는 다음과 같습니다. var obj = new ClassA(); obj.method1(1).method2(2).method(3) // obj -> prop1=1,prop2=2,prop3=3

ClassA의 N개 메소드가 이렇게 정의되어 있는 한 obj가 3번 연속으로 연산된 것을 볼 수 있습니다.
이 메서드의 단점은 체인 메서드가 하나의 개체 유형(ClaaaA)에 고유하게 바인딩된다는 것입니다. 이러한 방식으로 체인 작업을 구현하려면 클래스가 정의될 ​​때마다 해당 메서드 본문에 이 값이 반환되어야 합니다. 두 번째 방법으로 이 문제를 해결할 수 있습니다.
2. 객체가 전달된 후 각 호출은 함수 자체를 반환합니다.



코드 복사
코드는 다음과 같습니다. /*** 체인 라이트 버전
* @param {Object} obj
*/
function chain(obj){
return function(){
var Self =args.callee ; Self.obj = obj;
if(arguments.length==0){
Return Self.obj;
}
Self.obj[arguments[0]].apply(Self.obj ,[].slice.call (인수,1));
return Self;
}
}

//정의된 함수/클래스 ClassB
function ClassB(){
this.prop1 = null;
this.prop2 = null;
this.prop3 = null
}
ClassB.prototype = {
method1: function(p1){
this.prop1 = p1 ;
},
method2 : 함수(p2){
this.prop2 = p2;
},
method3 : 함수(p3){
this .prop3 = p3;
}
}


이것은 ClassB의 method1, method2 및 method3에서 더 이상 반환되지 않습니다.

체인 콜은 다음과 같습니다.





코드 복사
코드는 다음과 같습니다 var obj = new ClassB(); chain(obj)('method1',4)('method2',5)('method3',6); // obj -> prop1=4,prop2 =5,prop3=6

첫 번째 메소드는 세 번의 호출 후에 객체 자체를 반환합니다. 여기서 빈 "()"는 객체를 검색하는 데 사용됩니다




코드 복사
코드는 다음과 같습니다. // result -> =5,prop3=6 var result = chain(obj)('method1',4)('method2',5)('method3',6)()

때 이런 방식으로 클래스를 작성하면 메서드 본문에 이를 포함할 필요가 없습니다. 이를 반환하고 모든 객체에 대한 호출을 연결할 수 있습니다.

두 가지 호출 방법을 작성 측면에서 정리하면





코드 복사.method2(arg2)
.method3(arg3)
...

chain( obj)
(method1,arg1)
(method2,arg2)
(method3,arg3)
...


마침내 Muhai 덕분에 얻었습니다. 위의 라이브러리에서 영감을 얻으세요.

/201101/yuanma/chain.rar
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.