Ein einfaches Verständnis der Klassen in es6 (mit Beispielen)

Dieser Artikel vermittelt Ihnen ein einfaches Verständnis der Klassen in es6 (mit Beispielen). Freunde in Not können sich darauf beziehen.

Klassenklasse

Grundlegende Konzepte, aufgezeichnet, damit Sie Ihr Verständnis später vertiefen können

Verstehen Sie, was eine Klasse ist

Was ist Unterricht? Sie könnten genauso gut einen schreiben und einen Blick auf den Prototyp von

class Demo {
    constructor() {
        this.a = 1;
        this.b = this.f;
    }
    f() {
        return this;
    }
}
Demo.prototype; //{
                //  constructor: class Demo
                //  f: ƒ f()           
                //  __proto__: Object }

Demo werfen. Sie können sehen, dass diese drei Attribute nicht überquerbar sind und es im Vergleich zur Demo-Klasse eine weitere __proto__-Prototypkette gibt. Werfen wir einen Blick auf eine neue Demo

let o = new Demo();
console.log(Object.getPrototypeOf(o));  //{
                                        //  constructor: class Demo
                                        //  f: ƒ f()           
                                        //  __proto__: Object }

Tatsächlich entspricht die Demo-Klasse dem Prototyp der Demo-Instanz

Der Konstruktor in der Klasse

Meiner Meinung nach

    constructor() {
        this.a = 1;
        this.b = this.f;
    }

Dieser Teil entspricht der Funktion des Konstruktors in es5. Im Prozess von new wird diesem ein Wert zugewiesen und dieser wird zurückgegeben, um ein Instanzobjekt zu werden.
Wenn Sie also ein Objekt zurückgeben im Konstruktor und es ist nicht gleich null, dann das Instanzobjekt Es ist der Rückgabewert, der den gleichen Effekt hat wie der es5-Konstruktor

Methode in der Klasse

    f() {
        return this;
    }

Diese Methode letztendlich gehört zur Prototypenkette des InstanzobjektsNicht durchquerbare MethodeDaher kann es auch von Instanzobjekten verwendet werden

Neuer Wissenspunkt

Die statische Methode der Klasse

bedeutet, dass die Methode nicht von der Instanz geerbt wird, sondern direkt über die Klasse aufgerufen wird

class Demo {
    constructor() {
        this.a = this;
        this.b = this.f;
    }
    static g() {
        return this;
    }
    static f() {
        return this;
    }
}
let o = new Demo(); 
//console.log(o.b());    //not a function
//console.log(o.g());     //not a function
Demo.g() === Demo;        //true

Dies zeigt in der statischen Methode auf die Klasse selbst, während this.a = this auf zeigt das Instanzobjekt selbst

Statische Methoden können von Unterklassen geerbt werden

class Foo {
  static classMethod() {
    return 'hello';
  }
}

class Bar extends Foo {
}

Bar.classMethod() // 'hello'

Statische Methoden können vom Superobjekt aufgerufen werden

class Foo {
  static classMethod() {
    return 'hello';
  }
}

class Bar extends Foo {
  static classMethod() {
    return super.classMethod() + ', too';
  }
}

Bar.classMethod() // "hello, too"

Die Klasse enthält nur statische Methoden, keine statischen Attribute

Sofortige Ausführung von Klassenausdrücken

var o =  new class {
    constructor(n) {
        this.a = n;
        this.b = this.f;
    }
    g() {
        return n;
    }
    f() {
        return this;
    }

}(1)

o.a;             // 1

Es gibt keine Variablenheraufstufung in der Klassendeklaration

new Das .target-Attribut

gibt nach new For ein Objekt zurück Beispielsweise gibt der Konstruktor f in es5 durch den neuen Aufruf nicht undefiniert zurück, sondern durch den neuen Aufruf den Konstruktor selbst

function f() {
    return new.target;
}
console.log((new f()) === f);       //true

. Geben Sie dann die Klasse selbst zurück. Dies ist das Gleiche wie bei der statischen Methode; new gibt welche Klasse

class Shape {
  constructor() {
    if (new.target === Shape) {
      throw new Error('本类不能实例化');
    }
  }
}

class Rectangle extends Shape {
  constructor(length, width) {
    super();
    // ...
  }
}

var x = new Shape();  // 报错
var y = new Rectangle(3, 4);  // 正确

zurück

Das obige ist der detaillierte Inhalt vonEin einfaches Verständnis der Klassen in es6 (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!