Klassen und Objekte in JavaScript

Ihre erste Klasse
Getter & Setter
Static Field
Das static Method
Der Operator zum Vergleich des Objekt
Erbschaft und Polymorphimus

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.

Die neue Syntax ECMAScript 6 hilft dem Programmer bei der Verringerung der Komplizität in die Erstellung einer Klasse und in die Erstellung einer Sub-Klasse. In die technische Seite gibt es keinen Unterschied im Vergleich von der vorherigen Version.
Klasse und Vererbung Simulationstechniken in JavaScript

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

Height 5
Width 3
Area 15

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

Output:

Height 5
Width 3
Invalid width -100
Height 5
Width 3
Height 5
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);

Output:

Distance between 2 points: 14.142135623730951

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

r1 === r2 ? false
r1 === r3 ? true
r1 !== r2 ? true
r1 !== r3 ? false

6. Erbschaft und Polymorphimus

Vererbung und Polymorphismus in JavaScript