Inheritance in JS

1. Prototype chain inheritance

principle

1. Let the prototype of the sub point to the instance of the payment

2. Make the constructor of the child point to the child again

Code demonstration

//father // function Father(x){ this.x=x } //Public attribute Father.prototype.getX=function(){ console.log('getX',this.x) } this.name="aaa" //It is also a private attribute let f=new Father(x=100) //son // function Son(x){ this.y=y } // //Directly assign the parent instance to the child prototype; Realize inheritance; Write it first, or you can't attach it to the sub // Son.prototype=new Father(x=100) //Let the constructor of the subclass point to the subclass again; Because at this time, the child's prototype points to the parent's -- proto-- Son.prototype.constructor=Son // Son.prototype.getX=function(){} let s=new Son(y=200)

characteristic

1) Unlike inheritance in other languages (other languages: a child inherits a parent class, that is, copies a parent class's properties and methods), js places the instance of the parent class on the prototype chain of the child class. When the instance of the child class wants to call these properties and methods, it is actually completed in the form of proto prototype chain search

2) . child class instances can directly modify the properties and methods of the parent class (this will affect the instances of other parent classes). The child changes, but the parent does not change

3) . the private properties and methods of the parent class will become the public properties and methods of the child class after the prototype chain inheritance is implemented (because the instantiation of the parent class is assigned to the prototype of the child)

operating mechanism

  2.call inheritance

principle

In the method of the child, execute the parent as an ordinary function, and let this in the parent point to the instance of the child, which is equivalent to setting private properties and methods for the child

Code demonstration

//Parent class function F(x){ this.x=x } F.prototype.getX=function(){} let f=new F(x=100) // //Subclass function S(y){ this.y=y //Use call to point this to the instance s that changed from window to child F.call(this,Parameters passed to parent class x) // } let s=new S(y=200)

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 prototype above the parent, so the method on the prototype in the parent cannot be called in the child)

2) . the private properties and methods of the parent class will become the private properties and methods of the child class (solving the third problem in prototype chain inheritance)

3. Combined inheritance

principle

Combine prototype chain inheritance and constructor inheritance

Code demonstration

//father // function Father(x){ this.x=x } //Public attribute Father.prototype.getX=function(){ console.log('getX',this.x) } // //son // function Son(x){ this.y=y //2.call inheritance Father.call(this,x=100) } // //1. Prototype chain inheritance // Son.prototype=new Father(x=100) // Son.prototype.constructor=Son // Son.prototype.gety=function(){} let s=new Son(y=200)

characteristic

1) . subclasses can use the private properties and methods of the parent class

2) . the private properties and methods of the parent class will also become the private properties and methods of the child class instance

3) . subclasses can inherit the properties and methods above the parent class prototype

4) . on the prototype chain of the subclass instance, or one more copy of the private properties and methods of the parent class (because the parent class is called twice)

4. Parasitic inheritance

principle

Combine the methods of prototype chain inheritance and call inheritance, create an object at the same time, and let the prototype of the object point to the prototype of the parent constructor to realize parasitic inheritance

Code demonstration

//father // function Father(x){ this.x=x } //Public attribute Father.prototype.getX=function(){ console.log('getX',this.x) } // //son // function Son(x){ this.y=y //2.call inheritance Father.call(this,x=100) } // //1. Prototype chain inheritance // Son.prototype=Object.create(Father.prototype) //Give the parent prototype to the created new object // Son.prototype.constructor=Son // Son.prototype.gety=function(){} let s=new Son(y=200)

  Implementation of Object.create()

Object.create = function(obj){ //Create a new constructor function NewObj(){} NewObj.prototype = obj; return new NewObj() }

characteristic

1) The most perfect js inheritance scheme

2) . properties and methods private to the parent class and properties and methods private to the child class instance

3) . public attributes and methods of parent class and public attributes and methods of child class instance

4) . modifying public properties and methods of a subclass instance will not affect the instance of the parent class

operating mechanism

Inheritance of ES6

Causes of occurrence

1. When parasitic inheritance is used, there is no way to redirect the constructor of the child to the child

2. When using the constructor to implement inheritance, there is no way to execute the parent function as an ordinary function

principle

Inheritance through extensions

Constructor of class subclass extends constructor of parent class
Son.prototype.__proto__=Father.prototype

Code demonstration

// Parent class class Father{ constructor(parameter){ this.x=x } getX(){} } // //Subclass class Son extends Father{ constructor(parameter){ super() //It is equivalent to Father.call(this, the parameter passed to the parent) in es5, this.y=y } getY(){} } let s=new Son(y=200) be careful: 1.If you don't write constructor,No error will be reported,Inheritance will execute normally;The browser will automatically help us create the following code constructor(...args){ super(...args) } 2.If it is written by inheritance constructor,Then you must use super To inherit the private properties and methods of the parent class,Otherwise, an error will be reported; super Must be in subclass this before(That is, before expanding your private attributes)call,put to this An error will be reported later;

characteristic

1. The private properties and methods of the parent class will become the private properties and methods of the child class

2. The public attribute of the parent class becomes the public attribute of the child

In general, inheritance in es6 is relatively simple and easy to understand, which can quickly solve our needs; The above is what I know about the inheritance in js. If you need to add something, please give me some advice!

Add new comment

0 comments