Heim > Web-Frontend > js-Tutorial > Studie zu verketteten Aufrufen in JavaScript

Studie zu verketteten Aufrufen in JavaScript

高洛峰
Freigeben: 2016-11-25 10:54:36
Original
997 Leute haben es durchsucht

Methodenkette eignet sich im Allgemeinen für kontinuierliche Operationen an einem Objekt (konzentriert in einer Codezeile). Dadurch kann die Codemenge bis zu einem gewissen Grad reduziert werden, der Nachteil besteht jedoch darin, dass sie den Rückgabewert der Funktion belegt.

1. Objektkette: Der Methodenkörper gibt die Objektinstanz selbst zurück (dies)

view sourceprint?01 function ClassA(){

02 this.prop1 = null;

03 this.prop2 = null;

04 this.prop3 = null; = {

07 method1 : function(p1){

08 this.prop1 = p1

09 return this;

10 },

11 method2 : function(p2){

12 this.prop2 = p2;

13 return this;

14 },

15 method3 : function(p3){

16 this.prop3 = p3;

17 return this;

18 }

19 }

Funktion/Klasse ClassA ist definiert. Es gibt drei Attribute/Felder prop1, prop2 und prop3 und die drei Methoden method1, method2 und method3 legen prop1, prop2 und prop3 fest.

Der Aufruf lautet wie folgt:

view sourceprint?1 var obj = new ClassA();


2 obj.method1(1).method2(2).method(3) ; // obj -> prop1=1,prop2=2,prop3=3

Sie können sehen, dass obj dreimal hintereinander ausgeführt wurde Auf diese Weise definiert, wird die Anrufkette fortgesetzt.

Der Nachteil dieser Methode besteht darin, dass die Kettenmethode eindeutig an einen Objekttyp (ClaaaA) gebunden ist. Um Kettenoperationen auf diese Weise zu implementieren, muss diese bei jeder Definition einer Klasse in ihrem Methodenkörper zurückgegeben werden . Der zweite Weg kann dieses Problem lösen.


2. Funktionskette: Nachdem das Objekt übergeben wurde, gibt jeder Aufruf die Funktion selbst zurück

view sourceprint?01 /**

02 * vereinfachte Kettenversion

03 * @param {Object} obj

04*/

05 Funktionskette(obj){

06 return function(){

07 var Self = arguments.callee; Self.obj = obj; if(arguments .length==0){

09 return Self.obj;

10 }

11 Self.obj[arguments[0]].apply(Self .obj, [].slice.call(arguments,1));

12 return Self

13 }

14 }

15

16 //Definierte Funktion/Klasse ClassB

17 function ClassB(){

18 this.prop1 = null;

19 this.prop2 = null ;

20 this.prop3 = null;

21 }

22 ClassB.prototype = {

23 method1 : function(p1){

24 this.prop1 = p1;

25 },

26 method2: function(p2){

27 this.prop2 = p2;

28 },

29 method3 : function(p3){

30 this.prop3 = p3;

31 }

32 🎜>

Beachten Sie, dass dies nicht mehr in Methode1, Methode2 und Methode3 von KlasseB zurückgegeben wird.

Der Aufruf lautet wie folgt:

view sourceprint?1 var obj = new ClassB();

2 chain(obj)(method1,4)(method2,5)(method3 ,6) ; // obj -> prop1=4,prop2=5,prop3=6

Die erste Methode gibt nach drei Aufrufen das Objekt selbst zurück, hier wird ein leeres „()“ verwendet um es abzurufen Object

view sourceprint?1 // result -> prop1=4,prop2=5,prop3=6

2 var result = chain(obj)(method1,4) (method2, 5)(method3,6)();

Wenn Sie eine Klasse auf diese Weise schreiben, ist es nicht erforderlich, diese im Methodenkörper zurückzugeben, und Kettenaufrufe können an jedes Objekt erfolgen.


Zwei Aufrufmethoden:

view sourceprint?01 obj

02 .method1(arg1)

03 .method2(arg2)

04 .method3(arg3)

05 ...

06

07 chain(obj)

08 (method1,arg1)

09 (Methode2,Arg2)

10 (Methode3,Arg3)

11 ...

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage