Klassen und Objekte in ECMAScript

1- Ihre erste Klasse

ECMAScript 5 hat kein expliziter Begriff über die Klasse , stattdessen simuliert es eine Klasse nach den 2 Begriffe function & prototype. Denn  ES5 wurd im Jahr 2011 eingeführt. Bisher ist seine Syntax sehr populär. Allerdings können wir  nicht bestreiten, dass die Erstellung einer Klasse in den solche Weg dem Programmer schwer zu verstehen ist. Inzwischen haben die Klasse wie  Java, C#,.. den mehr moderne Weg zur Erstellung einer Klasse. Die Version  ES6 im 2015 löst rechzeitig dieses Problem. Sie gibt eine moderne Version um eine Klasse zu definieren.

Unter habe ich einen Rechteck  ( Rectangle). Er hat 2 wichtigen   property . Das sind width (die Breite) und height (die Höhe). Wie werden eine Klasse mit den Name vom Rectangle definieren um sie mit der Syntax ES6 zu stimulieren
Eine Hauptfile  rectangle.js erstellen
rectangle.js
// Define a class.
class Rectangle  {

    // Ein Constructor hat 2 Parameter.
    // (die werden benutzt um das Objekt zu erstellen)
    // this.width zeigt nach property  width der Klasse.
    constructor (width = 5 , height = 10)  {
        this.width = width;
        this.height = height;
    }

    // Das Method ist benutzt um die Oberfläche des Rechsteck zu rechnen.
    getArea() {
        var area = this.width * this.height
        return area
    }

}

// Ein Objekt der Klasse Rectangle durch Constructor erstellen.
var rect = new Rectangle(3, 5);

console.log("Height "+ rect.height);
console.log("Width "+ rect.width);

// Das Method aufrufen
let area = rect.getArea();
console.log("Area "+ area );
Das Beispiel durchführen

Was passiert wenn Sie ein Objekt aus constructor der Klasse erstellen?

Wenn Sie   Constructor der Klasse aufrufen, wird ein Objekt erstellt und die   property des Objekt werden die Wert aus die Parameter angewiesen.
Im ECMAScript hat jede Klasse maximal einen constructor . So wie die Funktion können die Parameter vom constructor die Default-Wert haben. Deshalb können Sie das Objekt nach den unterschiedlichen Wege.
// width = 3, height = 5
let rect = new Rectangle(3, 5);

// width = 15, height = 10 (Default)
let rect2 = new Rectangle(15);

// width = 5 (Default), height = 50
let rect3 = new Rectangle(undefined, 50);


// width = 5 (Default), height = 10 (Default)
let rect4 = new Rectangle();
 

2- Getter & Setter

Vor der Definition über Getter & Setter analysieren wir eine Situation:

Angenommen, wir haben eine Klasse Person, die Klasse hat ein property name.

Class Person
class Person  {

    constructor(name) {
      this.name = name;
    }
}
Und Sie können ohne Problem in property des Objekt zugreifen oder die neue Wert  anweisen.
// Create an object
let person = new Person("Tom");

// Access to property name.
console.log( person.name); // Tom

// Assign new value to property name.
person.name = "Jerry"; // !!!

console.log( person.name ); // Jerry
Der freie Zugang zu einem property und die Änderung seines Wert aus außen ist wirklich gefährlich. Manchmal möchten Sie ein Property haben aber außerhalb der Klasse können Sie nicht zugreifen oder die neue Wert nicht anweisen. Getter/Setter erlaubt Sie, ein solches property zu erstellen.
Der Schlüsselwort get steht vor einem Method ohne den Parameter der Klasse , das bei der Erstellung eines property mit dem gleichen Name des Method hilft. Dieses Method wird aufgeruft jedes Mal, wenn das Programm zum property zugrifft.
getter-example1.js
class Person  {

    constructor (name)  {
       // property: __name
       this.__name = name;
    }

    // Getter of property name
    get name()  {
       console.log("Call getter of property 'name'!!");
       return this.__name;
    }

}

// ------------ TEST -----------------

let person = new Person("Tom");

// Access to property 'name' ==> Call getter
console.log( person.name); // Tom

// Assign new value to property name.
person.name = "Jerry"; // Not Working!!!!

// Access to property 'name' ==> Call getter
console.log( person.name); // Tom
 
Der Schlüsselwort set steht vor einem Method mit einem Parameter der Klasse, das bei der Erstellung eines property mit dem gleichen Name des Method hilft. Dieses Method wird aufgeruft jedes Mal, wenn das Programm die neue Wert für property anweist.
setter-example1.js
class Person  {

    constructor (name)  {
       // property: __name
       this.__name = name;
    }

    // Setter of property name
    set name(newName)  {
       console.log("Call setter of property 'name'!!");
       this.__name = newName;
    }

    // A method
    showInfo()  {
       console.log("Person: " + this.__name);
    }
}

// ------------ TEST -----------------

let person = new Person("Tom");

// Can not access to property 'name'
console.log( person.name); // undefined

// Set new value to property 'name' ==> Call setter
person.name = "Jerry";

person.showInfo(); // Person: Tom
Zum Beispiel: Ein property mit den beiden Getter & Setter:​​​​​​​:
getter-setter-example.js
class Rectangle  {

    constructor (width = 5 , height = 10)  {
        this.__width = width;
        this.height = height;
    }

    // Getter of property 'width'
    get width()  {
      return this.__width;
    }

    // Setter of property 'width'
    set width(newWidth)  {
      if(newWidth > 0) {
          this.__width = newWidth;
      } else {
          console.log("Invalid width " + newWidth);
      }
    }

}

// ------------ TEST ------------------


var rect = new Rectangle(3, 5);

console.log("Height "+ rect.height); // Height: 5
console.log("Width "+ rect.width); // Width: 3

rect.width = -100;

console.log("Height "+ rect.height); // Height: 5
console.log("Width "+ rect.width); // Width: 3


rect.width = 100;

console.log("Height "+ rect.height); // Height: 5
console.log("Width "+ rect.width); // Width: 100
Die property mit der Präfix  2 Unterstrichen ( __ ) werden oft durch die Programmer vereinbart, außerhalb der Klassen nicht zu benutzen. Allerdings kann diese Vereinbarung gebrochen werden. Und deshalb sind diese solchen Property gefährlich..
Wenn Sie ein property wirklich privat möchten,  soll es den Name mit der Präfix hashtag ( # ) gestellt werden. Aber diese Kode kann mit der Hilfe von Babel 7 oder neuer nur laufen.
Private property
class Something {

  constructor(){

    this.#someProperty = "test";
  }

}

const instance = new Something();

console.log(instance.#someProperty); // undefined
getter-example2.js
class Person  {

    constructor (name)  {
       // Private property: #name
       this.#name = name;
    }

    // Getter of property name
    get name()  {
       console.log("Call getter of property 'name'!!");
       return this.#name;
    }

}

3- Static Field

Der Schlüsselwort static erscheint in der Anmeldung von Getter oder Setter , das bei der Definition eines static-Feldes ( static field) hilft.Sie können in static field durch den Name der Klasse zugreifen.

Die static Felder  (static field) mit der stabilen Wert (unveränderbar) werden constant static field genannt.

static-field-example1.js
class Employee {

   constructor (fullName, age)  {
     this.fullName = fullName;
     if(age < Employee.MIN_AGE || age > Employee.MAX_AGE)  {
        throw "Invalid Age " + age;
     }
     this.age = age;
   }

   // A static field: MIN_AGE
   static get MIN_AGE() {
      return 18;
   }

   // A static field: MAX_AGE
   static get MAX_AGE() {
     if(!Employee.__MAXA)  {
        Employee.__MAXA = 60;
     }
     return Employee.__MAXA;
   }

   static set MAX_AGE(newMaxAge)  {
      Employee.__MAXA = newMaxAge;
   }

}

// ---- TEST ---------

console.log("Mininum Age Allowed: " + Employee.MIN_AGE);
console.log("Maximum Age Allowed: " + Employee.MAX_AGE);

// Set new Maximum Age:
Employee.MAX_AGE = 65;

console.log("Maximum Age Allowed: " + Employee.MAX_AGE);

let baby = new Employee("Some Baby", 1); // Error!!
 

Sie haben eine andere Maßnahme um einen static Feld für die Klasse anzumelden. Allerdings werden die static Felder, die durch diese Maßnahme erstellt werden, kein Konstant ist denn ihre Wert kann ändern. Unter ist es ein Beispiel:

static-field-example2.js
class Employee {

   constructor (fullName, age)  {
     this.fullName = fullName;
     if(age < Employee.MIN_AGE || age > Employee.MAX_AGE)  {
        throw "Invalid Age " + age;
     }
     this.age = age;
   }
}

Employee.MIN_AGE = 18;
Employee.MAX_AGE = 60;

// ---- TEST ---------

console.log("Mininum Age Allowed: " + Employee.MIN_AGE);
console.log("Maximum Age Allowed: " + Employee.MAX_AGE);

// Set new Maximum Age:
Employee.MAX_AGE = 65;

console.log("Maximum Age Allowed: " + Employee.MAX_AGE);

let baby = new Employee("Some Baby", 1); // Error!!

4- Das static Method

Der Schlüsselwort static erscheint in einer Abmeldung des Method der Klasse, das Ihnen bei der Definition eines static Method hilft. Sie können das static Method durch den Name der Klasse aufrufen. Das static Method kann durch das Objekt der Klasse nicht aufrufen. Das static Method wird oft als eine Utility-Funktion der Applikation benutzt.
point.js
class Point {

  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  // Den Abstanz zwischen 2 Punkte rechnen
  static distance( point1, point2) {
    const dx = point1.x - point2.x;
    const dy = point1.y - point2.y;

    return Math.hypot(dx, dy);
  }
}

// --- TEST ---
let point1 = new Point( 5, 10);
let point2 = new Point( 15, 20);

// Distance
let d = Point.distance(point1, point2);

console.log("Distance between 2 points: " + d);

5- Der Operator zum Vergleich des Objekt

Im  ECMAScript wenn Sie ein Objekt durch den constructor erstellen, wird eine echte Enitiät in der Speicherung erstellt. Sie hat eine bestimmte Addresse. 

Ein Operator für die Zuweisung eines Objekt AA durch ein Objekt BB erstellt keine Enitität in der Speicherung mehr. Er zeigt auf die Address von AA nach der Addresse von BB 
Der Operator === wird benutzt um die Addresse, nach der die 2 Objekte zeigten zu vergleichen. Es kehrt true zurück wenn die 2 Objekte nach einer gleichen Addresse in der Speicherung zeigen. Der Operator  !== wird benutzt um die Addresse, nach der die 2 Objekte zeigten zu vergleichen. Es kehrt true zurück wenn die 2 Objekte nach den 2 unterschiedlichen Addresse zeigen. 
identify-operator-example.js
// Define a class.
class Rectangle  {
    constructor (width = 5 , height = 10)  {
        this.width = width;
        this.height = height;
    }
    getArea() {
        var area = this.width * this.height;
        return area;
    }
}

// Create object: r1
let r1 = new Rectangle( 20,  10);

// Create object: r2
let r2 = new Rectangle( 20, 10);

let r3 = r1;


let  b12  =   r1 === r2; // false
let  b13  =   r1 === r3; // true

console.log("r1 === r2 ? " + b12); // false
console.log("r1 === r3 ? " + b13); // true


var bb12  = r1 !== r2; // true
var bb13  = r1 !== r3; // false


console.log("r1 !== r2 ? " + bb12); // true
console.log("r1 !== r3 ? " + bb13); // false
Das Beispiel durchführen

6- Erbschaft und Polymorphimus

  • TODO Link!