2013-03-19 9 views
9

Ich würde gerne wissen, was ist der Unterschied zwischen überschreiben Methoden mit Prototypen und ohne Prototypen. Bedenken Sie:Overriding Methoden in Javascript

Beispiel 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(); 

Beispiel 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(); 

Ich fühle mich beide Beispiele die gleiche Wirkung erzeugen, die die Dog Klasse überschreibt die Methode eat des Animal Klasse. Oder passiert etwas anderes?

+2

Sie sollten 'this' Schlüsselwort verwenden, wenn Sie die Eigenschaften eines Objekts in seinem Konstruktor definieren. – ShuklaSannidhya

+0

@Sann Entschuldigung verpasste das Schlüsselwort this. Beantwortete die Frage jetzt. – codingsplash

+7

Es ist fast immer eine gute Idee, Methoden auf den Prototyp zu setzen, da sie dann unter allen Instanzen geteilt werden. Wenn Sie sie in Ihren Konstruktor einfügen, werden sie über alle Instanzen hinweg kopiert, wodurch mehr Speicher belegt wird. – Rik

Antwort

10

In der ersten Methode erhält jede der Animal Instanz eine eigene Implementierung von sleep und eat Methoden.

Während im zweiten Modell alle Instanzen die gleiche Instanz der Methoden sleep und eat teilen.

Das zweite Modell ist besser, da wir die Methoden teilen können.

5

Wie Arun im ersten Beispiel erwähnt, erstellen Sie sleep und eat Funktionen für jede neue Instanz. Im zweiten Beispiel gibt es nur eine sleep und eat Funktion, die unter allen Instanzen geteilt wird.

In diesem Fall ist die zweite Methode besser, aber es ist gut zu wissen, wann die erste Methode zu verwenden ist und wann die zweite Methode verwendet werden soll. Ein wenig Theorie zuerst:

Hinweis: Es gibt vier Arten von Variablen in JavaScript - private, public, shared und static.

Private Variablen sind außerhalb der Funktion, in der sie definiert sind, nicht zugänglich. Zum Beispiel:

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

öffentliche Variablen werden auf das this Objekt innerhalb einer Funktion definiert. Zum Beispiel:

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

Umgebungsvariablen werden auf den prototype der Funktion geteilt. Zum Beispiel:

function f() {} 

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

Statische Variablen sind Eigenschaften der Funktion selbst. Zum Beispiel:

function f() {} 

f.x; // this is a static variable 

Meistens ist es am besten, die Methoden einer Konstruktorfunktion als gemeinsam genutzte Verfahren, da alle Instanzen des Konstruktor teilen, sie zu erklären. Wenn Ihre Methode jedoch auf eine private Variable zugreifen muss, muss sie selbst als öffentliche Methode deklariert werden.

Hinweis: Dies ist meine eigene Nomenklatur. Nicht viele JavaScript-Programmierer halten sich daran.Andere scheinen Douglas Crockford Nomenklatur zu folgen: http://javascript.crockford.com/private.html

Um mehr über prototypische Vererbung in JavaScript lesen Sie die folgende Antwort: https://stackoverflow.com/a/8096017/783743

0

In Ihrem ersten Beispiel jede neue Dog Instanz wird über eine eigene eat Verfahren und im zweiten Beispiel Es wird nur eine eat Methode auf Dog.prototype geben, die zwischen allen zukünftigen Instanzen von Dog wie Arun erwähnt wird.

Dies ist der einzige "tricky" Unterschied zwischen diesen beiden. Aber es ist immer besser, Methoden auf dem zu definieren, um hohen Speicherverbrauch und Lecks zu vermeiden.

0

Die Methoden im ersten Beispiel sind in der Objektinstanz definiert.

Sie den Dog Prototyp sind Einstellung zu einer neuen Animal Instanz, so Dog wird sleep und eat Funktionen von Animal erben. Dann sind Sie DEFINITION (NICHT VORRANGIGES) eat Methode in Dog Konstruktor als Instanz Methode, und dies wird HIDE die geerbte eat Methode in Dog Instanzen.

Betrachten Sie das folgende Beispiel:

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

Der obige Code wird in erstem Beispiel animal eating mit Ihrem Code alarmiert.

Und alarmiert Dog eating mit dem Code in der zweiten.