1 Introduction
Description: class can implement inheritance through the extends keyword, allowing subclasses to inherit the properties and methods of their father
class Fun {
constructor(x, y) {
this.x = x
this.y = y
}
talk() {
console.log("talk方法");
}
tell() {
console.log("tell方法");
}
}
class Fun1 extends Fun {
}
const obj1 = new Fun1()
obj1.talk() //talk方法Note: Fun is the parent class, and Fun1 is the subclass. It inherits all the properties and methods of Fun through the extends keyword, which is equivalent to copying the Fun class. ES6 stipulates that subclasses must call super() in the constructor method, otherwise an error will be reported. This is because the this object of the subclass must first be shaped by the constructor of the parent class.
1.1 Why do we have to call super()?
Explanation: The ES6 inheritance mechanism is to first add the properties and methods of the parent class to an empty object, and then use the object as an instance of the subclass, that is, the inheritance comes first, and the instance comes after. In the constructor of a subclass, the this keyword can only be used after calling the super() method. The construction of a subclass instance must first complete the inheritance of the parent class. Only with the super method can the subclass instance inherit the parent class.
2. Inheritance of private properties and private methods
Description: All properties and methods of the parent class will be inherited by the subclass, except for private properties and methods.
class Fun2 {
#name = "李四"
name = "王二"
#talk() {
console.log("我是私有talk方法");
}
talk() {
console.log("我是公有talk方法");
}
getMethod() {
console.log(this.#name); //李四
}
}
class Fun3 extends Fun2 {
}
class Fun4 extends Fun2 {
constructor() {
super()
// console.log(this.#name);//Private field '#name' must be declared in an enclosing class
}
}
const obj3 = new Fun3()
console.log(obj3); //Fun3Explanation: Therefore, subclasses cannot directly access these private properties and methods, but can access them indirectly through the inheritance relationship (prototype chain).
3. Inheritance of static properties and static methods
Note: Static attributes are inherited through shallow copy. If the static attribute of the parent class is an object, then the static attribute of the subclass will also point to this object, and shallow copy will only copy the address value of the object.
4. Object.getPrototypeOf method
Description: Get the parent class from the child class.
class Fun5 {
}
class Fun6 extends Fun5 {
}
console.log(Object.getPrototypeOf(Fun6) === Fun5); //trueNote: It can also be considered that Fun5 is on the prototype chain of Fun6.
5. super keyword
Explanation: The super keyword can be used as an object and a function, and the usage is different.
- Case 1 is when super is called as a function, it represents the constructor of the parent class.
- Case 2 is that suepr is used as an object. In ordinary methods, it points to the prototype object of the parent class, and in static methods, it points to the parent class.
class Fun7 {
tell() {
console.log("我是父类的Fun7方法");
}
}
class Fun8 extends Fun7 {
constructor() {
super()
super.tell() //等价于super.prototype.tell()
}
}
const obj8 = new Fun8()
obj8.tell()
// Fun8.tell()
// 我是父类的Fun7方法
// 我是父类的Fun7方法5.1 super object
Explanation: super points to the prototype object of the parent class, and all methods or properties defined on the instance of the parent class cannot be called through super.
class Fun9 {
constructor(x) {
this.x = 3
}
}
Fun9.prototype.y = 5
class Fun10 extends Fun9 {
constructor() {
super()
}
get value() {
console.log(super.x);
}
}
const obj10 = new Fun10()
obj10.value //undefined
console.log(obj10.y);//5Note: ES6 stipulates that when calling a method of a parent class through super in a normal method of a subclass, this inside the method points to the current subclass instance.
5.2 super object method assignment
Explanation: Since this points to the subclass instance, if you assign a value to a property through super, then super is this, and the assigned property will become the property of the subclass instance.
class Fun11 {
constructor() {
this.x = 1
}
}
Fun11.prototype.layerA = 10
class Fun12 extends Fun11 {
constructor() {
super()
this.x = 2
super.x = 30
}
talk() {
console.log(super.x);
}
talk1(){
console.log(super.layerA);
}
}
const obj12 = new Fun12()
console.log(obj12.x); //30
obj12.talk() //undefined
obj12.talk1() //10Note: when the super object reads the value, it finds the prototype of the parent class. When the super object assigns a value, super points to the instance object of the subclass. When the method of the parent class is called through super in the static method of the subclass, this inside the method points to the current subclass, not the instance of the subclass.
6. The prototype attribute and __proto__ attribute of the class
- The __proto__ attribute of the subclass indicates the inheritance of the constructor and always points to the parent class
- The __proto__ attribute of the prototype attribute of the subclass indicates the inheritance of the method, and always points to the prototype attribute of the parent class.
class Fun13 {
}
class Fun14 extends Fun13{
}
console.log(Fun14.__proto__===Fun13);//true
console.log(Fun14.prototype.__proto__===Fun13.prototype);//true7. The __proto__ attribute of the instance
Description: The __proto__ attribute of the __proto__ attribute of the subclass instance points to the __proto__ attribute of the parent class instance. That is to say, the prototype of the prototype of the instance object of the subclass is the prototype of the instance object of the parent class.
8. Implementation of Mixin mode
Explanation: Mixin refers to the synthesis of multiple objects into a new object. The new object has the interface of each component member. Its simplest implementation is as follows.
const arr1=[1]
const arr2=[2]
const arr3=[...arr1,...arr2]