Klassen in Javascript

[moonwalker99]

Ich habe gelesen, dass bei Javascript Klassen und besonders die Vererbung nicht so funktionieren, wie man es von OO Programmiersprachen kennt. Wenn das so ist, wozu gibt es dann überhaupt Klassen, was kann man damit in Javascript überhaupt machen? Klassen erleichtern bei größeren Aufgaben die Arbeit.

Außerdem habe ich festgestellt, dass eine einfache Vererbung nur dann klappt, wenn beide Klassen in der selben Datei liegen. Wäre es nicht besser, wenn jede Klasse eine eigene Datei wäre? So wie man es von anderen Sprachen kennt.

Vielleicht kennt sich jemand aus und kann mich aufklären.

 

[Drexel]

JavaScript setzt auf Prototyping: https://www.freecodecamp.org/news/how-javascript-implements-oop/

https://de.m.wikipedia.org/wiki/Prototyping_(Softwareentwicklung)

 

[michi174]

Das ist so nicht richtig. Du kannst Klassen verwenden und auch vererben.
Auch Codesplitting funktioniert. Du muss also nicht mehrere Klassen pro Datei haben.

Allerdings musst du dazu Module verwenden und diese importieren, was man aber auch von anderen Programmiersprachen kennt (PHP mit include zB).

Hier eine Datei, bei der ich die Vererbung in JS verwende - https://github.com/michi174/dashboard/blob/master/public/js/view/renderer/handlebars.js

 

[mibbio]

JavaScript setzt auf Prototyping

Seit ECMAScript 6 (auch ECMAScript 2015 genannt) gibt es auch Klassen und Code mit Klassen wird eigentlich auch von jedem gängigen Browser unterstützt. Klassen verstecken zwar nur mehr oder weniger das Prototyping, aber so kann man halt verständlicheren Code schreiben, weil das tatsächliche Prototyping im Hintergrund passiert.

 

[moonwalker99]

Klassen verstecken zwar nur mehr oder weniger das Prototyping, aber so kann man halt verständlicheren Code schreiben, weil das tatsächliche Prototyping im Hintergrund passiert.

Fazit: Klassen in Javascript sind nur eine Hülle, die eigentlich keinen funktionellen Mehrwert bietet, richtig?

Wo ist der Unterschied, ob ich eine js-Datei mit vielen Funktionen habe oder all diese Funktionen in eine "Klasse" einbette? Eine Klasse sollte schon etwas mehr können.

 

[mibbio]

Klassen in JS bringen schon weitestgehend alles von den Features mit, die man aus anderen Sprachen kennt. Das meiste wird intern nur eben über Prototyping geregelt. Außerdem bringen Klassen mehr Übersicht in den Code, wengier Schreibarbeit und man braucht sich von anderen Sprachen nicht umgewöhnen. Sowas wie Vererbung und Klassenhierarchien per Hand mit Prototyping nachbauen dürfte sicherlich auch kein Spaß sein und nicht gerade zur Übersichtlichkeit beitragen.

 

[moonwalker99]

Hab jetzt herausgefunden, wie die Vererbung in JS funktioniert:

Tier.js:
module.exports = class Tier {
    sagWas() {
    console.log("bin ein Tier!");
    }
}

Hund.js:
const Tier =  require('./Tier.js')
class Hund extends Tier {
    sagWas() {
    console.log("bin ein Hund!");
    }
}

hund = new Hund();
hund.sagWas();

Wenn man mit node.js die Klasse Hund startet, dann wird die überschriebene Methode aufgerufen. Wobei der Code außerhalb der Unterklasse auch nicht wirklich elegant ist. Aber damit lässt es sich immerhin arbeiten.

 

[netzgestaltung]

Ich würde dir schon raten prototyping näher anzusehen. es ist DIE große stärke von JS, die den anderen Sprachen abgeht ;-)

Grundsätzlich ist dein Beispiel nicht ideal weil die nur genau die eine funktion überschreibst, also gar nichts der Elternklasse nutzt. Und der Unterschied ist das du nicht im Konstruktor die Parent-Klasse aufrufen kannst.

Das neue Modulepattern das du oben geschrieben hast muß je nach Umgebung (Node.js) anders interpretiert werden oder noch kompiliert (Composer). Die Javaifierung von JS quasi.

hier mal eine Alternative von https://javascript.info/prototype-inheritance#4djoe38uih

let Tier = {
  sagWas: function() {
    console.log("bin ein Tier!");
  }
};

let Hund = {
  sagWas: function() {
    console.log("bin ein Hund!");
  },
  __proto__: Tier
};

Tier.sagWas();
Hund.sagWas();

Hier gehts zu der alten Schreibweise, also so wie ich es gewohnt wäre, wenn ich nicht immer wieder je nach Situation schaue was der beste weg für die jeweilige Aufgabe ist: https://iqcode.com/code/javascript/javascript-prototype-inheritance-example

let Tier = function(name, energy) {
  this.name = name;
  this.energy = energy;
  this.sagWas = function() {
    console.log("bin ein Tier!");
  };
};

Tier.prototype.eat = function (amount) {
  console.log(this.name + ' is eating.');
  this.energy += amount;
};

let Hund = function(name, energy, breed) {
  Tier.call(this, name, energy);
  this.breed = breed;
};

Hund.prototype = Object.create(Tier.prototype);

Hund.prototype.sagWas = function () {
  console.log('bin ein Hund!');
  this.energy -= 0.1;
};

let vogel = new Tier('glocke', 50);
vogel.sagWas();
console.log(vogel.energy);

let wolfi = new Hund('wolfi', 150, 'Labrador');
wolfi.sagWas();
console.log(wolfi.energy);

 

[moonwalker99]

class Vehicle {
    speed;

    constructor(speed) {
        this.speed = speed;
    }

    getSpeed() {
        console.log(speed);
    }
}

vehicle = new Vehicle(100)
vehicle.getSpeed();

Darf ich fragen, was hier falsch sein soll? In Zeile 9 ist die Variable speed nicht bekannt, obwohl ich sie in der Klasse oben definiert habe.

 

[KitKat::new()]

console.log(this.speed);

 

[moonwalker99]

Danke. Kann es sein, dass man selbst definierte Methoden ebenfalls mit this aufrufen muss?

 

[netzgestaltung]

auch interessant und das was du da baust schaut schon fast so ähnlich aus ist das "revealing module" pattern mit dem du private variablen/methoden und eine public API realisieren kannst. Instanzierbar ist das natürlich auch: https://vegibit.com/javascript-revealing-module-pattern/

hier gibts auch noch ein schönes Beispiel wie alles zusammenkommt:
https://www.stevefenton.co.uk/2013/12/JavaScript-Prototype-Vs-Revealing-Module-Pattern/

deine codestruktur ist so generisch(var x = {} würde ich objekten vorbehalten) das ich ehrlich gesagt am ersten blick nicht erkennen kann welchen scope this hier hat, aber grundsätzlich ja. daher einfach durchtesten in der konsole