Was wird verwendet, um die Vererbung in es6 zu implementieren?

In es6 werden die Schlüsselwörter „class“ und „extends“ verwendet, um die Vererbung zu implementieren. Das Schlüsselwort „class“ wurde in ES6 eingeführt, um eine Klasse zu deklarieren, und die Klasse (class) kann über das Schlüsselwort „extends“ geerbt werden, sodass die Unterklasse die Eigenschaften und Methoden der übergeordneten Klasse erben kann. Die Syntax lautet „Name der übergeordneten Klasse {..“ .} Der Name der Unterklasse der Klasse erweitert den Namen der übergeordneten Klasse {...};".

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

In es6 können das Schlüsselwort „class“ und das Schlüsselwort „extends“ verwendet werden, um die Vererbung zu implementieren.

Vererbung der ES6-Klasse

1 Einführung

Die Klasse kann eine Vererbung über das Schlüsselwort „extens“ erreichen, sodass Unterklassen die Eigenschaften und Methoden der übergeordneten Klasse erben können. Dies ist viel klarer und bequemer als die Implementierung der Vererbung durch ES5 durch Modifizieren der Prototypenkette.

//父类
class Point {
 ...
}
//子类
class ColorPoint extends Point {
	constructor(x, y, color) {
		super(x, y);
		this.color = color;
	}
	toString() {
		return this.color + '' + super.toString(); // 调用父类的toString方法
	}
}

Im obigen Code erscheint das Schlüsselwort super sowohl in der Konstruktormethode als auch in der toString-Methode. Super stellt hier den Konstruktor der übergeordneten Klasse dar, der zum Erstellen eines neuen Instanzobjekts der übergeordneten Klasse verwendet wird.

ES6 schreibt vor, dass Unterklassen super() in der Konstruktormethode aufrufen müssen, andernfalls wird ein Fehler gemeldet. Dies liegt daran, dass das eigene Objekt dieser Unterklasse zuerst durch den Konstruktor der übergeordneten Klasse geformt werden muss, um dieselben Instanzattribute wie die übergeordnete Klasse zu erhalten . und Methoden, und fügen Sie dann die eigenen Instanzeigenschaften und -methoden der Unterklasse hinzu.

Warum muss der Konstruktor einer Unterklasse super() aufrufen?

Dies liegt daran, dass im Vererbungsmechanismus von ES5 zuerst ein Instanzobjekt einer unabhängigen Unterklasse erstellt wird und dann die Methoden der übergeordneten Klasse zu diesem Objekt hinzugefügt werden, dh „Instanz zuerst, Vererbung zuletzt“; Der Vererbungsmechanismus besteht darin, zunächst die Attribute und Methoden der übergeordneten Klasse einem leeren Objekt hinzuzufügen und das Objekt dann als Instanz der Unterklasse zu verwenden, dh „Vererbung zuerst, Instanz zuletzt“.

Das bedeutet, dass jedes Mal, wenn eine neue Unterklasseninstanz erstellt wird, zuerst der Konstruktor der übergeordneten Klasse ausgeführt werden muss.

class Foo {
	constructor() {
		console.log(1);
	}
}

class Bar extends Foo {
	constructor() {
		super();
		console.log(2);
	}
}

const bar = new Bar(); // 1 2

Wenn im obigen Code die Unterklassenleiste eine neue Instanz erstellt, werden 1 und 2 ausgegeben. Das ist die Faktorklassenkonstruktion Wenn die Funktion super() aufruft, wird der Konstruktor der übergeordneten Klasse einmal ausgeführt. Dieses Schlüsselwort kann nur nach dem Aufruf von super im Konstruktor einer Unterklasse verwendet werden, andernfalls wird ein Fehler gemeldet. Dies liegt daran, dass beim Aufbau einer Unterklasseninstanz zunächst die Vererbung der übergeordneten Klasse abgeschlossen werden muss. Nur die Supermethode kann es der Unterklasseninstanz ermöglichen, die übergeordnete Klasse zu erben.

class Point {
	constructor(x, y) {
		this.x = x;
		this.y = y;
	}
}

class ColorPoint extends Point {
	constructor(x, y, color) {
		this.color = color;
		super(x, y);
		this.color = color;
	}
}"

Wenn die Unterklasse keine Konstruktormethode definiert, wird diese Methode standardmäßig hinzugefügt und super darin aufgerufen. Mit anderen Worten, unabhängig davon, ob sie explizit definiert ist oder nicht, verfügt jede Unterklasse über eine Konstruktormethode.

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}
class ColorPoint extends Point {
}

let cp = new ColorPoint(25, 8);
console.log(cp); //{x: 25, y: 8}

class ColorPoint extends Point {
  constructor(...args) {
    super(...args);
  }
}

let cp = new ColorPoint(25, 8);
console.log(cp); //{x: 25, y: 8}

2. Private Vererbung von Eigenschaften und privaten Methoden

Alle Eigenschaften und Methoden der übergeordneten Klasse werden von der Unterklasse geerbt, mit Ausnahme privater Eigenschaften und Methoden. Unterklassen können die privaten Eigenschaften der übergeordneten Klasse nicht erben, oder private Eigenschaften können nur in der Klasse verwendet werden, in der sie definiert sind.

class Foo {
  #p = 1;
  #m() {
    console.log('hello');
  }
}

class Bar extends Foo {
  constructor() {
    super();
    console.log(this.#p); // 报错
    this.#m(); // 报错
  }
}

Wenn im obigen Beispiel die Unterklasse Bar die privaten Eigenschaften oder privaten Methoden der übergeordneten Klasse Foo aufruft, wird ein Fehler gemeldet.

Wenn die übergeordnete Klasse Lese- und Schreibmethoden für private Eigenschaften definiert, kann die Unterklasse über diese Methoden private Eigenschaften lesen und schreiben.

class Foo {
  #p = 1;
  getP() {
    return this.#p;
  }
}

class Bar extends Foo {
  constructor() {
    super();
    console.log(this.getP()); // 1
  }
}

3. Vererbung statischer Eigenschaften und Methoden

Die statischen Eigenschaften und statischen Methoden der übergeordneten Klasse werden auch von der Unterklasse geerbt.

class A {
  static hello() {
    console.log('hello world');
  }
}

class B extends A {
}

B.hello()  // hello world

Im obigen Code ist hello() eine statische Methode der Klasse A und B erbt A</code >, erbt auch die statische Methode von <code>A. hello()是A类的静态方法，B继承A，也继承了A的静态方法。

注意，静态属性是通过浅拷贝实现继承的，如果继承的属性是原始数据类型，子类中操作继承的静态属性不会影响到父类，但如果继承的属性是一个对象，那么子类修改这个属性会印象到父类

class C {
	static foo = 100;
}

class D extends C {
	constructor() {
		super();
		D.foo--;
	}
}

const d = new D();
C.foo; // 100
D.foo;  // 99

class A {
	static foo = { n: 100 };
}

class B extends A {
	constructor() {
		super();
		B.foo.n--;
	}
}

const b = new B();
B.foo.n // 99
A.foo.n  // 99

4.Object.getPrototypeOf()

Object.getPrototypeOf()

Beachten Sie, dass statische Eigenschaften durch flaches Kopieren geerbt werden. Wenn die geerbten Eigenschaften ein primitiver Datentyp sind, wirkt sich die Operation der geerbten statischen Eigenschaften in der Unterklasse nicht auf die übergeordnete Klasse aus Unterklasse Das Ändern dieser Eigenschaft wird die übergeordnete Klasse beeindrucken.

class Point { /*...*/ }

class ColorPoint extends Point { /*...*/ }

Object.getPrototypeOf(ColorPoint) === Point
// true

Daher können Sie mit dieser Methode feststellen, ob eine Klasse eine andere Klasse erbt.

5. Schlüsselwort super

Das Schlüsselwort super kann als Funktion oder Objekt verwendet werden

Im ersten Fall, wenn super als Funktion aufgerufen wird, stellt es den Konstruktor der übergeordneten Klasse dar. Die Funktion des Aufrufs von super besteht darin, dieses Objekt der Unterklasse zu bilden und die Instanzattribute und Methoden der übergeordneten Klasse auf dieses Objekt zu setzen.

class A {
	constructor() {
    console.log(new.target.name);
  }
}

class B extends A {
	constructor() {
		super();
	}
}

new A(); // A
new B(); // B

Im zweiten Fall, wenn super als Objekt verwendet wird, zeigt es in gewöhnlichen Methoden auf das Prototypobjekt der übergeordneten Klasse; in statischen Methoden zeigt es auf die übergeordnete Klasse.

class A {
	p() {
    return 2;
  }
}

class B extends A {
  constructor() {
    super();
    console.log(super.p()); // 2
  }
}

let b = new B();

Im obigen Code verwendet super.p() in der Unterklasse B super als Objekt. Zu diesem Zeitpunkt zeigt super im gewöhnlichen Objekt auf A.prototype und super.p() entspricht A.prototype. .P().

Da super auf das Prototypobjekt der übergeordneten Klasse verweist, können die in der Instanz der übergeordneten Klasse definierten Methoden oder Attribute nicht über super aufgerufen werden. Wie unten gezeigt:

class A {
	constructor() {
		this.p = 2;
	}
}

class B extends A {
	get m() {
		return spuer.p;
	}
}

let b = new B();
b.m // undefined

Um dieses Problem zu lösen, können Sie die Attribute für das Prototypobjekt der übergeordneten Klasse definieren.

class A {};
A.prototype.x = 2;

class B extends A {
	constructor() {
		super();
		console.log(super.x);
	}
}

let b = new B();

ES6 legt fest, dass beim Aufrufen der Methode der übergeordneten Klasse über super die normale Methode der Unterklasse aufgerufen wird , dies innerhalb der Methode zeigt auf die aktuelle Unterklasseninstanz🎜

class A {
	constructor() {
		this.x = 1;
	}
	print() {
		console.log(this.x);
	}
}

class B extends A {
	constructor() {
		super();
		this.x = 2;
	}
	m() {
		super.print();
	}
}

let b = new B();
b.m(); // 2

上面代码中，super.print()调用的是A.prototype.print()，但是此时方法内部的this指向是子类B的实例，所以输出2。

由于this指向的是子类实例，所有如果通过super对某个属性赋值，这时super就是this，赋值的属性会变成子类实例的属性

class A {
	constructor() {
		this.x = 1;
	}
}

class B extends A {
	constructor() {
		super();
		this.x = 2;
		super.x = 3;
		console.log(super.x); //undefind
		console.log(this.x); // 3
	}
}

上面代码中，super.x赋值为3，这时等同于对this.x赋值为3。而当读取super.x 的时候，读的是A.prototype.x，所以返回undefined。

如果super作为对象，用在静态方法之中，这时super将指向父类，而不是父类的原型对象。

class Parent {
	static myMethod(msg) {
		console.log('static', msg);
	}

	myMethod(msg) {
		console.log('instance', msg);
	}
}

class Children extends Parent {
	static myMethod(msg) {
		super.myMthod(msg);
	}

	myMethod(msg) {
    super.myMethod(msg);
  }
}

Child.myMethod(1); // static 1

var child = new Child();
child.myMethod(2); // instance 2

上面代码中，super在静态方法之中指向父类，在普通方法之中指向父类的原型对象。

另外，在子类的静态方法中通过super调用父类的方法时，方法内部的this指向当前的子类，而不是子类的实例

class A {
	constructor() {
    this.x = 1;
  }
  static print() {
    console.log(this.x);
  }
}

class B extends A {
  constructor() {
    super();
    this.x = 2;
  }
  static m() {
    super.print();
  }
}

B.x = 3;
B.m() // 3

在静态方法m中，super.print指向父类的静态方法，到那时this指向的是类B，而不是B的实例。

【推荐学习：javascript高级教程】

Das obige ist der detaillierte Inhalt vonWas wird verwendet, um die Vererbung in es6 zu implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!