class, object Referenzbeispiel

Referenzbeispiel zu Klassen und Objekten

Juli 2024
Das folgende Beispiel enthält die wichtigsten Codeteile, die zum Verständnis des Handlings mit Klassen und Objekten erforderlich sind. Objekte mit Klassen zu definieren ist ein relativ junges Feature, wenn auch die Prototype-Kette im Hintergrund werkelt. Für Ein- und Umsteiger von objektorientierten Programmiersprachen leicht und übersichtlich zu handhaben.
In der Dokumentation im MDN werden Bestandteile einer Klasse properties (Eigenschaften) genannt, unterschieden in fields (Felder; Klassenvariable) und methods (Methoden; Klassenfunktionen).
Das Beispiel hier ansehen.

CSS

html    { font-size: 3vw;         }
body    { background-color: #fff; }
div#out { width:min-content;      }

HTML

<h3>Class, Object - Codebeispiel</h3>
<div style="border:1pt solid red;" id="out">
</div>

JavaScript

"use strict";
/* JavaScript-Code */

const outElm = document.getElementById('out');

function drucke(parm)
{
  outElm.innerHTML += (parm + "<br>\n");
  return true;
}

class A {
  constructor(eins = 1) // Vorgabe wird von Argument überschrieben
  {
    this.eins = eins;   // Parameterwert in einem Feld speichern
    this.zwei = 2;
    this.drei = 3;
  }

  fields() // Definition einer Methode
  {
    let prop = 'Fields:';
    // this ist das eigene Objekt
    for (let wert in this) 
    {
       // alert(typeof wert); // string
       prop += wert + ',';
    }
    return prop;
  }

} // end of class A

let Aobj = new A(8);

// Felder sind numerisch, daher auch Objekte vom Typ Number
drucke("Aobj.eins:" + Aobj.eins.toString());  // 8

/* String-Number- und Number-String-Konvertierungen 
   erfolgen auch implizit, wenn eindeutig */
drucke("Aobj.zwei:" + Aobj.zwei); // 2

// Array-Schreibweise für Felder geht auch
drucke("Aobj.drei:" + Aobj['drei']); // 3

drucke(Aobj.fields()); // eins,zwei,drei,

class B extends A {
  drei = 33;        // field-Definition vorm constructor
  constructor()
  {
    super(5);       // kann nicht weggelassen werden
    this.vier = 44; // field-Definition innerhalb des constructors
  }  

  summe()
  {
    let sum = 0; let be = null;
    for (let wert in this)
    {
       sum += this[wert];
    }
    return sum;
  }
} // end of class B

let Bobj = new B() ;

drucke("Bobj.eins:" + Bobj.eins.toString()); // 5
drucke("Bobj.zwei:" + Bobj.zwei.toString()); // 2

drucke("Bobj.drei:" + Bobj.drei.toString()); // 33 
                      // B.drei überschreibt A.drei

drucke("Bobj.vier:" + Bobj.vier.toString()); // 44
drucke("Summe: " + Bobj.summe().toString()); // 84