Klassen und Objekte in ECMAScript
View more Tutorials:
Folge uns auf unserer fanpage, um jedes Mal benachrichtigt zu werden, wenn es neue Artikel gibt.
Facebook
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.
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();
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;
}
}
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!!
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
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
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
*
