Prototype Chain Inheritance
Inheritance means that a child class inherits the properties and methods of the parent class
//Parent Class function A(x) { this.x = x } A.prototype.getX = function () { console.log(this.x); } //Subclass function B(y) { this.y = y } B.prototype = new A(100); B.prototype.constructor = B; B.prototype.getY = function () { console.log(this.y); } let b = new B(200); b.x = 1000 console.log(b.x);//1000 console.log(b);
Features: Prototype chain inheritance refers to subclass prototype attributes pointing to instances of the parent class. Instances that want to invoke these methods are actually based on the mechanism of finding the prototype chain.
The goal is to enable instances of subclasses to use the properties and methods of the parent class
Subclasses can override properties and methods on the parent
call Inheritance
//Parent Class function A(x) { this.x = x; this.f = function () { console.log("Ha-ha"); } } A.prototype.getX = function () { console.log(this.x); } let a = new A(100); console.log(a);//A {x: 100, f: ƒ} // Subclass function B(y, x) { this.y = y; A.call(this, x); } B.prototype.getY = function () { console.log(this.y); } let b = new B(200, 100); console.log(b)//{y: 200, x: 100, f: ƒ}
Within a subclass, use call() to call the parent method to modify this of the parent class to this of the subclass. Having the parent execute the subclass again in the subclass function also has instance properties of the parent class
Features: Private properties and methods of the parent class become private properties and methods of the child class
Subclasses can only inherit private properties of the parent class
Combinatorial Inheritance
Combining prototype chain inheritance with borrowing constructor inheritance;
//Parent Class function A(x) { this.x = x; this.f = function () { console.log("Ha-ha"); } } A.prototype.getX = function () { console.log(this.x); } //Subclass function B(y, x) { this.y = y; A.call(this, x); } B.prototype = new A(100); B.prototype.constructor = B; B.prototype.getY = function () { console.log(this.y); } let b = new B(200, 100); console.log(b);
(call inheritance)
1. Subclass instances can use properties and methods that are private to the parent class
2. Both parent private properties and methods become child instance private properties and methods
(prototype chain inheritance)
3. Subclass instances can access and use properties and methods common to the parent through the prototype chain
4. There will be a redundant parent's private properties and methods on the prototype chain of the subclass
Parasitic combinatorial inheritance
Combining prototype chain inheritance with call inheritance requires you to create an object of your own and have the prototype of this object point to the prototype of the parent constructor. Implement parasitic combinatorial inheritance
//Parent Class function A(x) { this.x = x this.say = function () { console.log('kin'); } } A.prototype.getX = function () { console.log("getX", this.x); } let a = new A(100) console.log(a);//A {x: 100, say: ƒ} // Subclass function B(y, x) { A.call(this, 666) this.y = y } B.prototype = {} B.prototype = Object.create(A.prototype) B.prototype.constructor = B B.prototype.getY = function () { console.log("getY", this.y); } let b = new B(200) console.log(b);//B {x: 666, y: 200, say: ƒ}
Features: Private attributes and methods of the parent class, become private attributes and methods of instances of subclasses.
Attributes and methods that are common to the parent class become those that are common to the child class instance.
Class es and inheritance of lass in ES6
// Parent Class class A { constructor(x) { this.x = x this.f = function () { console.log('Ha-ha'); } } a = "Zhang San" getX() { console.log(this.x); } } // Public Property A.prototype.a = "Li Si" let a = new A(100) console.log(a);//A {a: 111, x: 100, say: ƒ} // Subclass class B { constructor(y) { this.y = y A.call(this)//The constructor (class) declared by Class constructor A cannot be invoked without'new'class cannot be executed as a normal function } getY = function () { console.log(this.y); } } // Do not directly redirect subclass prototypes when using Class to construct classes console.log(B.prototype = new A(100));//A {a: 111, x: 100, say: ƒ}
ES6 has a new method for defining classes so that we don't have to create constructors manually
Features: 1. Parent private properties and methods become child private properties and methods 2. Parent public properties and methods become child public properties and methods