2010-01-25 9 views
5

Ich frage mich, wie man Klassenvererbung in JavaScript simuliert. Ich weiß, dass Klasse nicht auf JavaScript zutrifft, die Art, wie wir verwenden, ist Funktionen zum Erstellen von Objekten und Vererbung durch Prototyp-Objekt.Klassenvererbung in Javascript

Zum Beispiel, wie Sie diese Struktur in JavaScript umwandeln:

public class Mankind { 
    public string name; 
    public string lastname; 
} 

public class Person: Mankind { 
    public void Run(string fromWhat) { 
     //write the run logic 
    } 
} 

Was das Äquivalent dieses Stück Code in JavaScript ist.

Edit:

ich auch einen anderen Link gefunden haben, wo Douglas Crockford verschiedene Vererbungsmodelle wie CMS erklärt hat: Classical Inheritance in JavaScript.

Hoffe es hilft anderen auch.

Antwort

9

Es gibt viele Möglichkeiten, in JavaScript Vererbung und Verhalten Wiederverwendung Implementierung, vielleicht die Art und Weise, die mehr Ähnlichkeit mit Ihrem klassenbasierten OOP Beispiel ist die pseudo- wäre klassische Erbe:

function Mankind (name, lastname) { 
    this.name = name; 
    this.lastname = lastname; 
} 

function Person (name, lastname) { 
    this.name = name; 
    this.lastname = lastname; 

    this.run = function() { 
    // run logic 
    }; 
} 
Person.prototype = new Mankind(); 
Person.prototype.walk = function() { 
    // walk logic 
}; 

der Unterschied zwischen run und walk ist, dass die erste auf jeder o existieren bject-Instanz von Person, und die zweite Methode, walk, wird nur in Person.prototype existieren und wird über die Prototyp-Kette zugegriffen werden.

In diesem Muster, das Sie ein wenig Code-Duplizierung zu sehen, müssen wir die Logik, um die Felder auch auf dem geerbten Konstruktor initialisieren, die ein anderes Muster dies vermeidet, ist die Anwendung Constructor Funktion:

function Mankind (name, lastname) { 
    this.name = name; 
    this.lastname = lastname; 
} 

function Person (name, lastname) { 
    Mankind.apply(this, arguments); 
    this.run = function() { 
    // run logic 
    }; 
} 

Mehr Info:

+0

Danke, Sie sind sehr großzügig wie immer :) – Tarik

+0

Gern geschehen, Aaron, wenn Sie irgendwelche Zweifel haben, zögern Sie nicht, zu kommentieren! – CMS

0
(function(){ 
function Mankind() { 
    this.name = "joe"; 
} 
function Person(){ 
    this.Run = function(fromWhat){ 
     alert(this.name + ' runs from ' + fromWhat + '!'); 
    } 
} 
Person.prototype = new Mankind; 

var dude = new Person; 
dude.Run('bear'); 
})() 

Anstatt statische Datenstruktur (Klasse-Typ) Definitionen der Verwendung von JavaScript verwendet Funktionen dynamisch Datenstruktur Prototypen zu bauen. Das ist ein großer Schritt, denn es erlaubt Ihnen, eine Struktur aufzubauen, während Sie genügend Kontext sammeln, um zu wissen, was Sie wirklich brauchen. Die Prototyp-Kette ist ebenfalls dynamisch, was ein weiterer großer Sprung ist und ich fange gerade an, meinen Kopf darum zu wickeln.

Statt mehr Wörter, überprüfen Sie die folgende Quelle Luke:

(function(){ 
// prototype chaining example 
function f1(){this.foo = "foo"} 
function f2(){this.bar = "bar"} 
function f3(){this.bat = "bat"} 
f2.prototype = new f1(); 
f3.prototype = new f2(); 
var a = new f1; 
var b = new f2; 
var c = new f3; 
// state is inherited 
var member_list = [ 
a.foo, // "foo" 
a.bar, // undefined 
a.bat, // undefined 
b.foo, // "foo" 
b.bar, // "bar" 
b.bat, // undefined 
c.foo, // "foo" 
c.bar, // "bar" 
c.bat // "bat" 
]; 
// prototypes are chained 
var instanceof_list = [ 
a instanceof f1, // true 
a instanceof f2, // false 
a instanceof f3, // false 
b instanceof f1, // true 
b instanceof f2, // true 
b instanceof f3, // false 
c instanceof f1, // true 
c instanceof f2, // true 
c instanceof f3 // true 
]; 

// try to break chain 
function f4(){this.fu = "fu"} 
f2.prototype = new f4; 

// state is preserved 
var member_list2 = [ 
a.foo, // "foo" 
a.bar, // undefined 
a.bat, // undefined 
b.foo, // "foo" 
b.bar, // "bar" 
b.bat, // undefined 
c.foo, // "foo" 
c.bar, // "bar" 
c.bat // "bat" 
]; 
// chain not broken, but link is removed 
var instanceof_list2 = [ 
a instanceof f1, // true 
a instanceof f2, // false 
a instanceof f3, // false 
b instanceof f1, // true 
b instanceof f2, // false 
b instanceof f3, // false 
c instanceof f1, // true 
c instanceof f2, // false 
c instanceof f3 // true 
]; 
// no new link is added 
var instanceof_list3 = [ 
a instanceof f4, // false 
b instanceof f4, // false 
c instanceof f4 // false 
]; 
debugger  
})() 
Verwandte Themen