Inheritance in JS

JS inheritance

1. Prototype chain inheritance

Prototype chain inheritance: let the prototype of the child class point to the instance of the parent class
characteristic:
1. Unlike inheritance in other languages, JS inheritance places 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
2. Subclass instances can directly modify methods on the parent class.
3. After the prototype chain inheritance is implemented, the private properties and methods in the parent class will become the public properties and methods of the child class

//Code display //Parent class constructor function Parent(x){ this.x=x } //Parent class prototype Parent.prototype.getX=function(){ console.log("getX",this.x) } let P1=new Parent(100) //Subclass //Subclass constructor function Child(y){ this.y=y } Child.prototype=new Parent(100) //Constructor is used to get the constructor of the object Child.prototype.constructor=Child Child.prototype.getY=function(){ console.log("getY",this.y); } //Subclass instance let C1=new Child(200)

Picture display

2. Combinatorial inheritance

Combinatorial inheritance: a method combining prototype chain inheritance and borrowing constructor inheritance
characteristic:
1. Subclass instances can use the private properties and methods of the parent class
2. The private properties and methods of the parent class become private properties and methods of the child class instance
3. Public properties and methods of subclass instance and parent class
4. There will be extra private attributes of the parent class on the prototype chain of the child class

//Parent class constructor function Parent(x){ this.x=x this.say=function(){ console.log('QQ') } } //Parent class prototype Parent.prototype.getX=function(){ console.log("getX",this.x) } let P1=new Parent(100) //Subclass //Subclass constructor function Child(y,x){ Parent.call(this,999) 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(100)

3. Parasitic combinatorial inheritance

Parasitic combinatorial inheritance: it combines prototype chain inheritance and constructor inheritance. At the same time, you need to create your own prototype to realize parasitic combinatorial inheritance
characteristic:
1. The most perfect JS inheritance solution
2. The properties and methods private to the parent class become the properties and methods private to the child class instance
3. The public attributes and methods of the parent class become the public attributes and methods of the child class instance
4. Modifying the 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.say=function(){ console.log('QQ') } } //Parent class prototype Parent.prototype.getX=function(){ console.log("getX",this.x) } let P1=new Parent(100) //Subclass //Subclass constructor function Child(y,x){ Parent.call(this,999) this.y=y } //Child.prototype=new Parent(100) 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(100) //Object.create(obj) creates an empty object and makes it empty__ proto__ Points to the first parameter passed Object.create=function(obj){ function NewObj(){} NewObj.prototype=obj return new NewObj() }

Picture display

4. Borrowing constructor inheritance

Borrowing constructor inheritance: in a subclass, use call() to call the parent method, and modify this of the parent class to this of the subclass, which is equivalent to copying an instance attribute of the parent class and putting it in the function of the subclass
or
In the Child method, execute the Parent as an ordinary function and let this in the Parent point to the Child instance, which is equivalent to setting private properties and methods for the Child instance
characteristic:
1. 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 properties and methods on the Parent prototype)
2. The private properties and methods of the parent class will become the private properties and methods of the child class

//Parent class constructor function Parent(x){ this.x=x this.say=function(){ console.log('QQ') } } //Parent class prototype Parent.prototype.getX=function(){ console.log("getX",this.x) } //Subclass //Subclass constructor function Child(y,x){ Parent.call(this,x) this.y=y } Child.prototype.getY=function(){ console.log("getY",this.y); } //Subclass instance let C1=new Child(200，100)

5. class and inheritance in ES6

class and inheritance in ES6: inheritance through extensions is much clearer and more convenient than that through modifying the prototype chain in ES5.
characteristic:
1. Rare properties and methods of the parent class will become private properties and methods of the child class

class Parent(){ constructor(x){ this.x=x } } ParentX(){ console.log(this.x) } class Child extends Parent{ constructor(y){ super(999) this.y=y } ChildY(){ console.log(this.y) } } let C=new Child(500)

Add new comment

0 comments