codestory

Klasse und Vererbung Simulationstechniken in ECMAScript

View more Tutorials:

Folge uns auf unserer fanpage, um jedes Mal benachrichtigt zu werden, wenn es neue Artikel gibt. Facebook

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: "USA"
};

// Access:
console.log( tom.name ); // Tom
console.log( tom.country ); // USA
console.log( tom["name"] ); // Tom
console.log( tom["country"] ); // USA
 
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: "USA"
};

// 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

View more Tutorials:

Vielleicht bist du interessiert

Das sind die Online-Courses außer der Website o7planning, die wir empfehlen. Sie können umsonst sein oder Discount haben.