Javascript Object (parte I)

Sabato 6 Gennaio, 2007

Se si ha bisogno di istanziare più oggetti di una classe, un metodo è quello di definire la classe tramite lo pseudo-costruttore function().

JavaScript:
  1. // class definition
  2. function CmyClass(param1,param2) {
  3.     this.myProperty = param1;
  4.     this.myAdding = param1+param2;
  5.     //
  6.     this.myMethod = function(param1) {
  7.          alert( "add: "+this.myAdding+" - Param: "+param1);
  8.     }
  9. }
  10. //
  11. var obj1 = new CmyClass(10,20);
  12. var obj2 = new CmyClass(20,40);
  13. //
  14. obj1.myMethod("Hi from obj1");
  15. //
  16. obj2.myMethod("Hi from obj2");

Definita la classe - con tanto di parametri iniziali - posso creare n istanze del mio oggetto, personalizzandole durante la creazione con la keyword new.
Posso anche inserire una chiamata ad un metodo durante la fase di inizializzazione dell'oggetto, stando solo attento ad inserirlo per ultimo - vedi riga 14:

JavaScript:
  1. // class definition
  2. function CmyClass(param1,param2) {
  3.     this.myProperty = param1;
  4.     this.myAdding = param1+param2;
  5.     //
  6.     this.myMethod = function(param1) {
  7.          alert( "Result: "+this.myResult );
  8.     }
  9.     //
  10.     this._init = function() {
  11.         this.myResult = this.myProperty*100;
  12.     }
  13.  
  14.     this._init();
  15.  
  16. }
  17. //
  18. var obj1 = new CmyClass(10,20);
  19. var obj2 = new CmyClass(20,40);
  20. //
  21. obj1.myMethod("Hi from obj1");
  22. //
  23. obj2.myMethod("Hi from obj2");

Un modo sbagliato sarebbe - vedi riga 6:

JavaScript:
  1. // class definition
  2. function CmyClass(param1,param2) {
  3.     this.myProperty = param1;
  4.     this.myAdding = param1+param2;
  5.  
  6.     this._init();
  7.  
  8.     //
  9.     this.myMethod = function(param1) {
  10.          alert( "Result: "+this.myResult );
  11.     }
  12.     //
  13.     this._init = function() {
  14.         this.myResult = this.myProperty*100;
  15.     }
  16.  
  17.  
  18. }
  19. //
  20. var obj1 = new CmyClass(10,20);
  21. var obj2 = new CmyClass(20,40);
  22. //
  23. obj1.myMethod("Hi from obj1");
  24. //
  25. obj2.myMethod("Hi from obj2");

Un'altro modo per creare un oggetto al volo (on-fly) è quello di dichiarare una variabile/funzione, mono uso:

JavaScript:
  1. var myObject = {
  2.     myProperty: 10,
  3.    
  4.     myMethod: function() {
  5.         alert("Hi from "+this.myProperty);
  6.     }
  7. };
  8.  
  9. myObject.myMethod();

Questa tecnica è comoda quando si vuole creare una sola istranza di un oggetto, e trattarlo come tale. Questa viene spesso usata nei recenti framework Ajax, come prototype e derivati. A partire da questa, infatti, non è possibile istanziare un nuovo oggetto, in quanto la classe è andata persa.

Si può poi ricorrere all'uso di prototype per estendere una classe, anche vuota. Ad esempio:

JavaScript:
  1. function CmyClass() {}
  2.  
  3. CmyClass.prototype = {
  4.     myProperty: 10,
  5.    
  6.     myMethod: function() {
  7.         alert( "Hi from " + this.myProperty);
  8.     }
  9. }
  10.  
  11. var obj = new CmyClass();
  12.  
  13. obj.myMethod();

Oppure:

JavaScript:
  1. function CmyClass() {
  2.     this.myOldProperty = 1000;
  3.     }
  4.  
  5. CmyClass.prototype = {
  6.     myProperty: 10,
  7.    
  8.     myMethod: function() {
  9.         alert( "Hi from " + this.myProperty);
  10.         alert( "Hi from " + this.myOldProperty);
  11.     }
  12. }
  13.  
  14. var obj = new CmyClass();
  15.  
  16. obj.myMethod();

Post correlati