[Erledigt] "Klassen" und sinvolle Vererbung

phpdummi · 27.01.2009, 17:14

Hallo,

ich beschäftige mich seit ein paar Tagen etwas mit JavaScript und bin nun beim Thema Vererbung etwas verwirrt.
Wie kann ich ohne große Umwege elegant vererben?
Zurzeit gehe ich beim erzeugen von Objekten bzw. der Erstellung von "Klassen" 2 verschiedene Wege:

Variante 1) Leeres Objekt über den Prototyp erweitern

Code:

Animal = {}
Animal = Animal.prototype =
{
    species: "animal",
    
    category: function()
    {
        console.info(this.species);
    }
}

Variante 2) "Gefülltes" Objekt über den Prototyp für jede Funktion einzeln erweitern

Code:

function Car()
{
    this.wheels = 4;
}

Car.prototype.drive = function(speed, direction)
{
    var sTest = "the car drives "+direction+" with "+speed+" km/h and it's "+this.wheels+" wheels!";
    console.log(sTest);
}

Im direkten Vergleich finde ich Variante 1 besser. Weniger Tipparbeit und alles schön eingerückt in der Objektnotation untereinander.

Möchte ich nun jedoch von einem Prototypen erben, muss ich auf Variante 2 zurückgreifen:

Code:

// inherit from Car
futureCar.prototype = Car.prototype;

// add new function to futureCar
futureCar.prototype.test = function()
{
    console.info("test", true);
}

Das finde ich ziemlich doof, zumal ich keine Eigenschaften von "gefüllten" Objekten übernehmen kann - die müssen im Prototyp definiert werden.

Wie geht ihr vor? Wie kann man schön erweitern ohne unnötig viel tippen zu müssen?

David · 27.01.2009, 17:23

Schau Dir mal Prototypal Inheritance an

phpdummi · 27.01.2009, 18:02

Danke für den Link, so wirklich begriffen hab ich es allerdings nicht.
Wie kann nun ein Prototyp von einem Anderen dessen Eigenschaften und Methoden erben und danach erweitert werden?

David · 27.01.2009, 18:34

Mit der object(o) Funktion zum Beispiel

Code:

<html>
  <head>
    <script>
      function object(o) {
        function F() {}
        F.prototype = o;
        return new F();
      }
      
      function foo() {
        var p = {
          x: 123,
          y: 456,
          bar: function() {
            alert("x=" + this.x + ", y="+this.y);
          }
        }
        
        var c = object(p);
        c.y = 890;
        c.bar();
      }
    </script>
  </head>
  <body>
    <button onclick="foo()">click</button>
  </body>
</html>

phpdummi · 27.01.2009, 19:35

Also erbt nicht wie beim Klassensystem erst ein Prototyp von einem anderen und dann werden konkrete Objekte erzeugt, sondern man erzeugt ein konkretes Objekt (von einem Prototypen) und erweitert dann das neue Objekt.
Das hatte ich auch verstanden, nur wollte ich eben, wie beim Klassensystem, Prototypen voneinander ableiten und dann anschließend die konkreten Objekte erzeugen.
Quasi die PHP-Denke auf JavaScript übertragen. aber das geht wohl nicht ...

Edit: Ich habe aber immer noch eine Frage:
Selbst wenn ich nun konkrete Objekte vorliegen habe, möchte ich diese ja immer noch um neue Methoden erweitern.
Wie mach ich das nun möglichst elegant?

Edit2: Und wie erbt ein weiteres Objekt von einem konkreten, das erweitert wurde?

David · 27.01.2009, 20:02

Du kannst die Funktionen einfach hinzufügen.

Code:

<html>
  <head>
    <script type="">
      function object(o) {
        function F() {}
        F.prototype = o;
        return new F();
      }
      
      function foo() {
        var p = {
          x: 123,
          y: 456,
          bar: function() {
            alert("x=" + this.x + ", y="+this.y);
          }
        }
        
        var c = object(p);
        c.y = 890;
      
        c.function1 = function(x) { alert("f1 " + x + this.y) }
        p.function2 = function(x) { alert("f2 " + x + this.y) }
        
        c.function1('#');
        c.function2('#');
      }
    </script>
  </head>
  <body>
    <button onclick="foo()">click</button>
  </body>
</html>

nikosch · 27.01.2009, 20:07

Mist, ich hatte da vor kurzem ne gute Quelle und hab sie verbummelt.

Edit: Vielleicht taugt das was: http://mckoss.com/jscript/object.htm

phpdummi · 27.01.2009, 20:15

Danke David, spart mir Tipparbeit und es funktioniert wunderbar!

Edit: Danke nikosch, werde ich mir mal durchlesen.

David · 28.01.2009, 04:01

Douglas Crockford: "The JavaScript Programming Language" Teil 1 bis 4

Douglas Crockford: "Advanced JavaScript" Teil 1 bis 3

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Singleton Model oder Vererbung ?	MollocH	PHP-Fortgeschrittene	2	10.02.2009 20:32
[Erledigt] Klassen und Funktionen	wetteronkel	PHP Tipps 2008	11	11.06.2008 13:32
Klassen und externe Funktionen ?	ssm	PHP-Fortgeschrittene	17	18.07.2007 11:59
Klassen sinnvoll nutzen, Grundlegendes	nikosch	PHP-Fortgeschrittene	1	30.09.2006 22:08
Fragen zu Klassen	Kein Genie	PHP Tipps 2006	3	08.05.2006 11:25
Sessions an includete Klassen übergeben	Dr_Enquinox	PHP Tipps 2006	4	29.04.2006 10:25
Vererbung von Klassen und Performance	ggfan	PHP Tipps 2006	5	05.03.2006 12:00
mit html klassen definieren und in php ausgeben		PHP-Fortgeschrittene	4	16.01.2006 10:31
Klassen und OOP Problem		PHP-Fortgeschrittene	3	08.09.2005 10:37
klassen und methoden anderer klassen in methoden....		PHP Tipps 2005	17	25.05.2005 09:46
[Erledigt] Klassen und Vererbung		PHP-Fortgeschrittene	3	19.04.2005 11:50
Klassen		PHP Tipps 2005	5	09.04.2005 18:51
Klassen in Klassen verwenden		PHP Tipps 2005	5	23.02.2005 14:08
Klassen?!		PHP Tipps 2004	14	03.06.2004 17:33

27.01.2009, 17:14
phpdummi Erfahrener Benutzer Registriert seit: 06.06.2008 Beiträge: 1.631 PHP-Kenntnisse: Anfänger	[Erledigt] "Klassen" und sinvolle Vererbung Hallo, ich beschäftige mich seit ein paar Tagen etwas mit JavaScript und bin nun beim Thema Vererbung etwas verwirrt. Wie kann ich ohne große Umwege elegant vererben? Zurzeit gehe ich beim erzeugen von Objekten bzw. der Erstellung von "Klassen" 2 verschiedene Wege: Variante 1) Leeres Objekt über den Prototyp erweitern Code: Animal = {} Animal = Animal.prototype = { species: "animal", category: function() { console.info(this.species); } } Variante 2) "Gefülltes" Objekt über den Prototyp für jede Funktion einzeln erweitern Code: function Car() { this.wheels = 4; } Car.prototype.drive = function(speed, direction) { var sTest = "the car drives "+direction+" with "+speed+" km/h and it's "+this.wheels+" wheels!"; console.log(sTest); } Im direkten Vergleich finde ich Variante 1 besser. Weniger Tipparbeit und alles schön eingerückt in der Objektnotation untereinander. Möchte ich nun jedoch von einem Prototypen erben, muss ich auf Variante 2 zurückgreifen: Code: // inherit from Car futureCar.prototype = Car.prototype; // add new function to futureCar futureCar.prototype.test = function() { console.info("test", true); } Das finde ich ziemlich doof, zumal ich keine Eigenschaften von "gefüllten" Objekten übernehmen kann - die müssen im Prototyp definiert werden. Wie geht ihr vor? Wie kann man schön erweitern ohne unnötig viel tippen zu müssen? __________________ "Nobody is as smart as everybody" - Kevin Kelly — The best things in life aren't things


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

27.01.2009, 17:23
David Erfahrener Benutzer Registriert seit: 05.09.2007 Beiträge: 5.044	Schau Dir mal Prototypal Inheritance an

27.01.2009, 18:02
phpdummi Erfahrener Benutzer Registriert seit: 06.06.2008 Beiträge: 1.631 PHP-Kenntnisse: Anfänger	Danke für den Link, so wirklich begriffen hab ich es allerdings nicht. Wie kann nun ein Prototyp von einem Anderen dessen Eigenschaften und Methoden erben und danach erweitert werden? __________________ "Nobody is as smart as everybody" - Kevin Kelly — The best things in life aren't things

27.01.2009, 19:35
phpdummi Erfahrener Benutzer Registriert seit: 06.06.2008 Beiträge: 1.631 PHP-Kenntnisse: Anfänger	Also erbt nicht wie beim Klassensystem erst ein Prototyp von einem anderen und dann werden konkrete Objekte erzeugt, sondern man erzeugt ein konkretes Objekt (von einem Prototypen) und erweitert dann das neue Objekt. Das hatte ich auch verstanden, nur wollte ich eben, wie beim Klassensystem, Prototypen voneinander ableiten und dann anschließend die konkreten Objekte erzeugen. Quasi die PHP-Denke auf JavaScript übertragen. aber das geht wohl nicht ... Edit: Ich habe aber immer noch eine Frage: Selbst wenn ich nun konkrete Objekte vorliegen habe, möchte ich diese ja immer noch um neue Methoden erweitern. Wie mach ich das nun möglichst elegant? Edit2: Und wie erbt ein weiteres Objekt von einem konkreten, das erweitert wurde? __________________ "Nobody is as smart as everybody" - Kevin Kelly — The best things in life aren't things Geändert von phpdummi (27.01.2009 um 19:53 Uhr).

27.01.2009, 20:07
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Mist, ich hatte da vor kurzem ne gute Quelle und hab sie verbummelt. Edit: Vielleicht taugt das was: http://mckoss.com/jscript/object.htm __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. -- Geändert von nikosch (27.01.2009 um 20:13 Uhr).

27.01.2009, 20:15
phpdummi Erfahrener Benutzer Registriert seit: 06.06.2008 Beiträge: 1.631 PHP-Kenntnisse: Anfänger	Danke David, spart mir Tipparbeit und es funktioniert wunderbar! Edit: Danke nikosch, werde ich mir mal durchlesen. __________________ "Nobody is as smart as everybody" - Kevin Kelly — The best things in life aren't things

28.01.2009, 04:01
David Erfahrener Benutzer Registriert seit: 05.09.2007 Beiträge: 5.044	Douglas Crockford: "The JavaScript Programming Language" Teil 1 bis 4 http://video.yahoo.com/watch/111593/1710507 http://video.yahoo.com/watch/111594/1710553 http://video.yahoo.com/watch/111595/1710607 http://video.yahoo.com/watch/111596/1710658 Douglas Crockford: "Advanced JavaScript" Teil 1 bis 3 http://video.yahoo.com/watch/111585/1027823 http://video.yahoo.com/watch/111586/1027832 http://video.yahoo.com/watch/111587/1027854