2013-03-19 12 views
9

Vorrei sapere qual è la differenza tra i metodi di sovrascrittura con prototipi e senza prototipi. Considerate:Metodi di sovrascrittura in Javascript

Esempio 1:

function Animal() { 
    this.sleep = function() { 
     alert("animal sleeping"); 
    }; 

    this.eat = function() { 
     alert("animal eating"); 
    }; 
} 

function Dog() { 
    this.eat = function() { 
     alert("Dog eating"); 
    }; 
} 

Dog.prototype = new Animal; 

var dog = new Dog; 

dog.eat(); 

Esempio 2:

function Animal() { } 

function Dog() { } 

Animal.prototype.sleep = function() { 
    alert("animal sleeping"); 
}; 

Animal.prototype.eat = function() { 
    alert("animal eating"); 
}; 

Dog.prototype = new Animal; 

Dog.prototype.eat = function() { 
    alert("Dog eating"); 
}; 

var dog = new Dog; 

dog.eat(); 

mi sento entrambi gli esempi producono lo stesso effetto che la classe Dog è l'override del metodo mangiare il Animal classe. O c'è qualcosa di diverso che succede?

+2

Si dovrebbe usare la parola chiave 'this' quando si definiscono le proprietà di un oggetto nel suo costruttore. – ShuklaSannidhya

+0

@Sann mi dispiace aver perso questa parola chiave. Modificato la domanda ora. – codingsplash

+7

È quasi sempre una buona idea mettere i metodi sul prototipo come se fossero condivisi tra tutte le istanze. Inserendoli nel tuo costruttore li copia in tutte le istanze e questo consuma più memoria. – Rik

risposta

10

Nel primo metodo ciascuna istanza Animal avrà la propria implementazione dei metodi sleep e eat.

Mentre nel secondo modello Tutte le istanze condivideranno la stessa istanza dei metodi sleep e eat.

Il secondo modello è migliore poiché è possibile condividere i metodi.

5

Come Arun menzionato nel primo esempio, si creano le funzioni sleep e eat per ogni nuova istanza. Nel secondo esempio c'è solo una funzione sleep e eat condivisa tra tutte le istanze.

In questo caso il secondo metodo è migliore, ma è opportuno sapere quando utilizzare il primo metodo e quando utilizzare il secondo. Un po 'di teoria prima:

Nota: Ci sono quattro tipi di variabili in JavaScript - private, public, shared e static.

Le variabili private non sono accessibili al di fuori della funzione in cui sono definite. Ad esempio:

function f() { 
    var x; // this is a private variable 
} 

variabili pubbliche sono definite sull'oggetto this all'interno di una funzione. Per esempio:

function f() { 
    this.x; // this is a public variable 
} 

variabili condivise sono condivise sul prototype della funzione. Ad esempio:

function f() {} 

f.prototype.x; // this is a shared variable 

Le variabili statiche sono proprietà della funzione stessa. Per esempio:

function f() {} 

f.x; // this is a static variable 

Il più delle volte è meglio dichiarare i metodi di una funzione di costruzione di metodi condivisi da tutte le istanze della quota di costruttore di loro. Tuttavia, se il metodo deve accedere a una variabile privata, deve essere dichiarato come metodo pubblico stesso.

Nota: Questa è la mia nomenclatura. Non molti programmatori JavaScript aderiscono ad esso.Altri sembrano seguire la nomenclatura di Douglas Crockford: http://javascript.crockford.com/private.html

Per sapere di più su ereditarietà prototipale in JavaScript di leggere la seguente risposta: https://stackoverflow.com/a/8096017/783743

0

Nel vostro primo esempio ogni nuova Dog istanza avrà il proprio metodo eat e nel secondo esempio ci sarà un solo metodo eat su Dog.prototype, che sarà condiviso tra tutte le future istanze di Dog come menzionato da Arun.

Questa è l'unica "ingannevole" differenza tra questi due. Tuttavia, è sempre meglio definire i metodi su prototype per evitare un consumo di memoria elevato e perdite.

0

I metodi nel primo esempio sono definiti nell'istanza dell'oggetto.

Si sta impostando il prototipo Dog ad una nuova Animal esempio, in tal modo Dog erediterà sleep e eat funzioni da Animal. Poi si sta definendo (NON PREVALENTE ) eat metodo Dog costruttore come un metodo di istanza, e questo sarà HIDE il ereditato eat metodo Dog casi.

consideri il seguente esempio:

function LittleDog() { } 
LittleDog.prototype = Object.create(Dog.prototype); 
(new LittleDog()).eat(); 

Il codice di cui sopra avviserà animal eating con il codice in primo esempio.

E avviserà Dog eating con il codice nel secondo.

Problemi correlati