1. Prototype succession
Features: let the prototype of the child class point to the instance of the parent class;
- Put the instance of the parent class on the prototype chain of the child class. When the child class instance wants to call these properties and methods, it is actually based on__ proto__ The prototype is completed in the form of chain search
- Child class instances can directly modify the methods on the parent class (which will affect other parent class instances)
- The private properties and methods in the parent class will become the public properties and methods of the child class after the prototype chain inheritance is implemented
//Parent class constructor
function Parent(x){
this.x = x;
}
//Parent class prototype
Parent.prototype.getX = function (){
console.log("getX",this.x)
}
//Subclass constructor
function Child(y){
this.y = y;
}
Child.prototype = new Parent(100);
Child.prototype.constructor = Child;
Child.prototype.getY = function (){
console.log("getY",this.y)
}
//Subclass instance
let c1 = new Child(200);
console.log(c1)
- Prototype chain diagram:

2. call inheritance
Features: borrowing constructor (call) inheritance
- In the Child method, the parent constructor is executed as an ordinary function, and this in the parent constructor points to the Child instance, which is equivalent to setting private properties and methods for the Child instance
- Only the private properties and methods of the Parent class can be inherited (because the Parent is only executed once as an ordinary function, which has nothing to do with the methods and properties on the Parent prototype)
- The properties and methods private to the parent class will become the properties and methods private to the child class
//Parent class constructor
function Parent(x){
this.x = x;
this.sayHello = function (){
console.log("sayHello")
}
}
//Parent class prototype
Parent.prototype.getX = function (){
console.log("getX",this.x)
}
//Subclass constructor
function Child(y,x){
Parent.call(this,x);
// Equivalent to Parent.call(this,x)
// this.x = x;
// this.sayHello = function (){
// console.log("sayHello")
// }
this.y = y;
}
Child.prototype.getY = function (){
console.log("getY",this.y)
}
//Subclass instance
let c1 = new Child(200,100);
3. Combination inheritance
Features: combination of prototype chain inheritance and borrowing constructor inheritance
- Subclass instances can use the private properties and methods of the parent class
- The properties and methods private to the parent class will also become the properties and methods private to the child class instance
- Public properties and methods of subclass instance and parent class
- There will be an extra private attribute of the parent class on the prototype chain of the child class
//Parent class constructor
function Parent(x){
this.x = x;
this.sayHello = function (){
console.log("sayHello")
}
}
//Parent class prototype
Parent.prototype.getX = function (){
console.log("getX",this.x)
}
//Subclass constructor
function Child(y,x){
Parent.call(this,666)
this.y = y;
}
Child.prototype = new Parent(100);
Child.prototype.constructor = Child;
Child.prototype.getY = function (){
console.log("getY",this.y)
}
//Subclass instance
let c1 = new Child(200,666);
4. Parasitic combinatorial inheritance
Features: combined with prototype chain inheritance and constructor inheritance, you need to create your own prototype to realize parasitic combinatorial inheritance
- Parent class private properties and methods, child class instance private properties and methods
- The public attributes and methods of the parent class and the public attributes and methods of the child class instance
- Modifying public properties and methods of a subclass instance will not affect the instance of the parent class
//Parent class constructor
function Parent(x){
this.x = x;
this.sayHello = function (){
console.log("sayHello")
}
}
//Parent class prototype
Parent.prototype.getX = function (){
console.log("getX",this.x)
}
let p1 = new Parent(100);
//Subclass constructor
function Child(y,x){
Parent.call(this,666)
this.y = y;
}
// Child.prototype = new Parent(100);
// Child.prototype = {};
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
Child.prototype.getY = function (){
console.log("getY",this.y)
}
//Subclass instance
let c1 = new Child(200,666);
5. ES6 Class inheritance
Features: inheritance through extensions
- ES6 inheritance = = > class subclass constructor extends parent class constructor {}
- The class in ES6 cannot be directly executed as an ordinary function
- You must use the new keyword to create an instance. It cannot be executed as an ordinary function
- When using inheritance in ES6, there is no way to redirect the prototype of subclasses directly
- Child.prototype.proto = Parent.prototype;
class Parent {
constructor(x) {
this.x = x;
this.sayHello = function () {
console.log("sayHello")
}
}
getX() {
console.log("getX==>", this.x)
}
}
class Child extends Parent {
//If the constructor is not written, no error will be reported and the inheritance will be normal
//If you don't write constructor, the browser will automatically help us create the following code
// constructor(...args){
// super(...args)
// }
constructor(y) {
super(100);// Parent.call(this,100)
//Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
//If the constructor is written in the form of inheritance, you must use super to inherit the private properties and methods of the parent class, otherwise an error will be reported
this.y = y;
}
getY(){
console.log("getY==>", this.y)
}
}
let c1 = new Child(200)