Klasse und Vererbung Simulationstechniken in Javascript (ECMAScript)

1- Die Klasse in Javascript

Javascript ist eigentlich eine Welt der Funktionen und der Objekte. Am Anfang wurde es einfach entwickelt und hat keinen klaren Begriff von der Klasse. Vielleicht konnten die Entwickler von  Javascript nicht denken, dass die Sprache in einem Tag so breit benutzt werden wird.
Das Objekt im  Javascript bedeutet ein Entity mit vielen Paaren  "Schlüssel/Wert", und Sie können durch das Objekt und den Schlüssel auf die Werte zugreifen.
object-example1.js
var tom =  {
  name: "Tom",
  country: "American"
};

// Access:
console.log( tom.name ); // Tom
console.log( tom.country ); // American
console.log( tom["name"] ); // Tom
console.log( tom["country"] ); // American

 
Sie können das neue Paar  "Schlüssel/Wert" zu einem vorhandenen Objekt einfügen oder ein Paar  "Schlüssel/Wert" von ihm entfernen.
object-example2.js
var tom =  {
  name: "Tom",
  country: "American"
};

// Delete property - country
delete tom["country"]; // Same as: delete tom.country;

// Add property - gender
tom["gender"] = "Male"; // Same as: tom.gender = "Male";


// Access:
console.log( tom.name ); // Tom
console.log( tom["name"] ); // Tom

console.log( tom["country"] ); // undefined
console.log( tom.country ); // undefined

console.log( tom["gender"] ); // Male
console.log( tom.gender ); // Male
Die Klasse ist ein moderner Begriff in die Sprachen wie  Java, C#,... Die Klasse ist ein Design. Die Verwendung des Design hilft Ihnen bei der schnellen Erstellung der Objekte mit den gleichen Struktur. Die erste Version vom  Javascript hat diesen Begriff nicht.
Javascript ist mehr wichtiger geworden . Deshalb braucht es das Upgrade. Die Designer von  Javascript versuchen, nach den vorhanden Begriff in Javascript den Begriff von Klassen zu simulieren. Die Syntax zur Simulation einer Klasse wird in  ES3, ES5, vorgestellt aber bis zum  ES6 haben wir eine moderne Syntax, die allen Personen befriedigt
Zum ersten, für die Einfachheit, sehen Sie eine moderne Syntax, die im  ECMAScript 6 vorgestellt wird um die Klasse  Rectangle mit 2 Properties  width (die Breite) und  height (die Höhe) zu erstellen. Diese Klasse hat das Method  getArea() ,das die Oberfläche des Rechsteck zurückzugeben
es6-class-example.js
// ECMAScript 6 class:

class Rectangle  {

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

  getArea()  {
    return this.width * this.height;
  }

}


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

var rect = new Rectangle(10, 5);

var area = rect.getArea();

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

 
Eine SubKlasse einer Klasse erstellen ist sehr einfach mit  ES6:
es6-inheritance-example.js
class Shape  {

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

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

// Subclass:
class Circle extends Shape {

    constructor(x, y, radius) {
        // Call Shape's constructor via super
        super(x, y);
        this.radius = radius;
    }

    getArea() {
      return Math.PI * this.radius * this.radius;
    }
}

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


var circle = new Circle(0, 2, 5);

console.log( circle.getArea() );

 
ES6 hat eine moderne Syntax vorgestellt um eine Klasse und die Sub-Klassen zu erstellen aber die Technik ändert eigentlich nicht. Die Syntax vom  ES6 bedeckt die verwirrenden Begriffen vom  Javascript wenn es versucht, eine Klasse zu simulieren. In dieser Unterricht diskutiere ich mit Ihnen, wie  ES3 & ES5 taten um eine Klasse und die Erbe zu simulieren.

2- Die Klasse und die Erbe im ES3

ES3 verwendet das Schlüsselwort  function um einen  "Objekt-Konstruktor" zu definieren. Sie werden ein neues Objekt erstellen wenn Sie diese Funktion mit dem Operator  new aufrufen:
// ECMAScript 3 class.

function Rectangle(width, height)  {
   this.width = width;
   this.height = height;
}

// Create an Object:
var rect = new Rectangle(10, 5);
 
Die folgende Figur stellt die Aktion, die durch das Ausführungsmaschine  Javascript durchgeführt wird, dar:
  1. Das Objekt 'rect' wird erstellt (es ist nur ein normales Objekt. Nichts ist besonder)
  2. Das Property __proto__ für das Objekt 'rect' einfügen. Das ist ein verstecktes Property.
  3. Die Variable this wird auf die Addresse vom Objekt 'rect' angezeigt werden.
  4. Das Property width für das Objekt 'rect' einfügen.
  5. Das Property height für das Objekt 'rect' einfügen.
Der Begriff  prototype wird auch im  ES3 vorgestellt. Sehen Sie was sein Zweck ist?
// ECMAScript 3 class.

function Rectangle(width, height)  {
   this.width = width;
   this.height = height;
}

Rectangle.prototype.bgColor = "red";
Rectangle.prototype.borderColor = "blue";

// Create an Object:
var rect = new Rectangle(10, 5);



console.log(rect); // Rectangle { width: 10, height: 5 }
console.log(rect.__proto__); // Rectangle { bgColor: 'red',borderColor: 'blue' }

console.log(rect.__proto__.bgColor); // red
console.log(rect.__proto__.borderColor); // blue

// (Read the explanation**)
console.log(rect.bgColor); // red
console.log(rect.borderColor); // blue

 
Was passiert wenn das Ausführungsmaschine Javascript die Expression  myObject.myProperty begegnet?
  • Die Anwort ist: Ob es prüft, dass das Objekt myObject das Property myProperty hat oder nicht. Wenn ja, grifft es auf das Property zu. Umgekehrt grifft es auf  myObject.__proto__.myProperty ​​​​​​​zu.
es3-proto-example3.js
var rect =  {
   __proto__ : { bgColor : "red", borderColor : "blue" },
   width: 10,
   height: 5
}


console.log(rect.width); // 10

console.log(rect.__proto__.bgColor); // red


console.log(rect.bgColor); // red

 

new AFunction(args) vs AFunction.call(anObj, args)

Die Erbe
Für  ES3 können Sie  eine Klasse simulieren, die in die unterschiedlichen Wege eine andere Klasse erbt. Natürlich ist es nicht so einfach wie Sie im ES6 machen und es ist den Entwickler ziemlich schwer zu verständlich.
Für die Einfachheit gebe ich ein Beispiel über die Erbe und analyse den Operationsgrundsatz des Ausführungsmaschine  Javascript in dieser Situation.
  1. Die Klasse Animal hat 2 Property name & gender.
  2. ​​​​​​​​​Die Klasse Cat erbt aus der Klasse Animal. Sie hat ein Property color.
es3-inheritance-example1.js
function Animal(n, g) {
    this.name = n;
    this.gender = g;
}


function Cat(n, g, c) {
    Animal.call(this, n, g);
    this.color = c;
}


var tom = new Cat("Male", "Tom", "Black");

// Cat { gender: 'Male', name: 'Tom', color: 'Black' }
console.log(tom);

Die Erbe und die Rolle vom prototype (ES3)

es3-inheritance-example2.js

// Class: Animal
function Animal(n, g) {
    this.name = n;
    this.gender = g;
}

Animal.prototype.sleep = function()  {
    console.log("Animal sleeping..");
}

Animal.prototype.move = function()  {
    console.log("Animal moving..");
}

// Class: Cat
function Cat(n, g, c) {
    Animal.call(this, n, g); // IMPORTANT!!
    this.color = c;
}

// IMPORTANT!!
var TempFunc = function() {}; // Temporary class.
TempFunc.prototype = Animal.prototype;
Cat.prototype = new TempFunc();
// ------------------


Cat.prototype.cry = function()  {
    console.log("Meo meo");
}

// Override 'move' method of Animal.
Cat.prototype.move = function() {
    console.log("Cat moving..");
}

var tom = new Cat("Male", "Tom", "Black");

// Cat { gender: 'Male', name: 'Tom', color: 'Black' }
console.log(tom);

tom.move(); // Cat moving..
tom.sleep(); // Animal sleeping..
tom.cry(); // Meo meo
 

3- Die Klasse und die Erbe im  ES5

Object.create(srcObject)

Das Method  Object.create(srcObject) erstellt ein neues Objekt  newObject, inzwischen  newObject.__proto__ ist die Kopie vom  srcObject.
method-object-create-example.js
var john = {
  name: "John",
  gender: "Male"
};

var other = Object.create(john);


console.log(other.__proto__); // { name: 'John', gender: 'Male' }
 

Die Erbe (ES3 + Object.create)

Die Verwendung des Method  Object.create(srcObject) vom  ES5 hilft Ihnen bei der mehr einfach Simulation der Klasse und der Erbe im Vergleichvon   ES3.
es5-inheritance-example1.js
// Class: Animal
function Animal(n, g) {
    this.name = n;
    this.gender = g;
}

Animal.prototype.sleep = function()  {
    console.log("Animal sleeping..");
}

Animal.prototype.move = function()  {
    console.log("Animal moving..");
}

// Class: Cat
function Cat(n, g, c) {
    Animal.call(this, n, g); // IMPORTANT!!
    this.color = c;
}

Cat.prototype = Object.create(Animal.prototype); // IMPORTANT!!

Cat.prototype.cry = function()  {
    console.log("Meo meo");
}

// Override 'move' method of Animal.
Cat.prototype.move = function() {
    console.log("Cat moving..");
}

var tom = new Cat("Male", "Tom", "Black");

// Cat { gender: 'Male', name: 'Tom', color: 'Black' }
console.log(tom);

tom.move(); // Cat moving..
tom.sleep(); // Animal sleeping..
tom.cry(); // Meo meo