...

Javascript: oggetti, prototipi ed ereditarietà

[fusion_builder_container hundred_percent=”no” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” overlay_color=”” video_preview_image=”” border_size=”” border_color=”” border_style=”solid” padding_top=”” padding_bottom=”” padding_left=”” padding_right=””][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” border_position=”all” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” center_content=”no” last=”no” min_height=”” hover_type=”none” link=””][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=””]

Come costruire ed ereditare oggetti in Javascript sfruttando i prototipi

In generale, il metodo più rapido per definire oggetti in Javascript è inserire proprietà e metodi direttamente nel costruttore.

Ad esempio, la seguente funzione A() definisce due proprietà e due metodi:

function A() { //costruttore
   this.p1 = 0; //proprietà 1
   this.p2 = ''; //proprietà 2
   this.m1 = function() {
      //metodo 1
   };
   this.m2 = function() {
      //metodo 2
   };
}

La sintassi per creare ed utilizzare l’oggetto definito sopra è la seguente:

var a = new A(); //creazione dell'oggetto
a.p1 = 99; //assegnazione della proprietà p1
a.m2(); //chiamata al metodo m2()

Un approccio alternativo è quello di utilizzare i prototipi per definire le proprietà ed i metodi degli oggetti. Di seguito sono elencate tre varianti di codice Javascript per definire lo stesso oggetto di prima, da preferite a seconda del contesto (e magari anche dei gusti personali…):

Variante 1
Parte dell’oggetto viene definita nel costruttore, e parte nel prototipo

function A() {
   this.p1 = 0;
   this.p2 = '';
}
A.prototype = {
   m1: function() {
      //...
   }
   ,m2: function() {
      //...
   }
};

Variante 2
Proprietà e metodi vengono definiti nel prototipo

function A() {
}
A.prototype = {
    p1: 0
   ,p2: ''
   ,m1: function() {
      //...
   }
   ,m2: function() {
      //...
   }
}

Variante 3
Come la variante 2, ma i metodi vengono definiti con una sintassi differente

function A() {
}
A.prototype = {
    p1: 0
   ,p2: ''
};
A.prototype.m1 = function() {
      //...
};
A.prototype.m2 = function() {
      //...
};

Eredità degli oggetti in Javascript
Vediamo infine un esempio per definire un oggetto derivato dal precedente, sempre utilizzando i prototipi.
Attenzione che, usando la variante 1, tutto ciò che è definito all’interno del costruttore (nell’esempio sopra le proprietà p1 e p2 ) non viene ereditato perché non appartiene al prototipo.

function B()
{
    this.__proto__.__proto__ = A.prototype; //eredita il prototipo da A
}
B.prototype = {
    _p3: '' //valore di default di p3
    ,get p3()
    {
        return 'p3 is ' + this._p3;
    }
    ,set p3(value)
    {
        this._p3 = value.toLowerCase();
    }
}

Nel prototipo di B sono state aggiunte le keyword get e set per definire le funzioni che vengono chiamate quando si assegna o si legge il valore della proprietà p3.

Sintassi:

var b = new B();
b.m1();  // chiamata del metodo m1 definito in A
b.p3 = "PIPPO";
alert(b.p3); // output: p3 is pippo

Nota: questi esempi sono stati verificati in Droidscript.

[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

 SOSidee.com srl P.IVA 01636640896 • REA VI-331314 • Capitale sociale 10.000€ i.v. PEC sosidee.com@pec.net SDI M5UXCR1

Contattaci

La Web Agency opera a Vicenza, Treviso e Padova

Il nostro indirizzo:

Via Mugna 33/C

36027 Rosà (VI)

sito ecommerce web agency

Richiedi un preventivo

Analisi gratis

Richiedi la tua analisi gratuita