Inheritance? What is inheritance?

Everything in your father’s name is yours. That is, a subclass can have everything its parent class has. And subclasses can extend methods on themselves.

So? What does inheritance look like?

1. Prototype chain inheritance

2. Classical inheritance (constructor inheritance)

3. Combinatorial inheritance (as the name implies: a combination of archetypal chain inheritance and classical inheritance)

4. Parasitic inheritance

5. Combined parasitic inheritance

First, let’s talk about prototype chain inheritance

The prototype of a subclass becomes an instance of the parent class

/ / create a superclass constructor function Super (value) {enclosing SuperValue = value} / / Super to the parent class to add a method. The prototype. GetSupervalue = function () { Function Sub(value) {this.Subvalue = value} // Subclass prototype to inherit sub. prototype = new Super () / / add a method to subclass Sub. Prototype. GetSubvalue = function () {return enclosing Subvalue} const Sub = new Sub (123). console.log(sub.getSupervalue()); //undefined console.log(sub.getSubvalue()); / / 123Copy the code

Note that subclass methods must be added after the subclass inherits the parent class. If the order is reversed, then all the methods added by the subclass are useless (because the subclass’s prototype has become the parent class’s prototype).

1. Superclass methods can be reused

Disadvantages:

1.1. All of the parent classesReference propertiesIs shared by all subclasses, and if you change the reference properties of one subclass, the other subclasses will be affected

The following code execution results

function Parent() { this.isShow = true this.info = { name: "yhd", age: 18, }; } Parent.prototype.getInfo = function() { console.log(this.info); console.log(this.isShow); // true } function Child() {}; Child.prototype = new Parent(); let Child1 = new Child(); Gender = "male "; child1.info.gender =" male "; Child1.getInfo(); // {name: "yhd", age: 18, gender: "male "} let child2 = new Child(); child2.getInfo(); // {name: "yhd", age: 18, gender: "male "} child2.isShow = false console.log(child2.isshow); // falseCopy the code

2. Subclasses cannot pass arguments to the parent class constructor when creating an instance

Classic inherit

Call the parent constructor in the subclass constructor, use apply or call, change the direction of the parent constructor, and let the subclass generate the properties and methods defined in the parent constructor

/ / create the superclass constructor function Super () {enclosing SuperArray = [1, 2, 3, Function Sub() {super.call (this)} function Sub() {super.call (this)} const app = new Sub() app.SuperArray.push(5) console.log(app.SuperArray); / / [1, 2, 3, 4, 5]Copy the code

Advantages:

  1. Arguments can be passed to the parent class in the subclass constructor
  2. Reference properties of the parent class are not shared
function Parent(name) { this.info = { name: name }; } function Child(name) {parent.call (this, name); This. age = 18} let child1 = new Child("yhd"); console.log(child1.info.name); // "yhd" console.log(child1.age); // 18 let child2 = new Child("wxb"); console.log(child2.info.name); // "wxb" console.log(child2.age); / / 18Copy the code

Disadvantages:

1. Class methods are declared in constructors and cannot be reused

/ / create the superclass constructor function Super () {enclosing SuperArray = [1, 2, 3, Function Sub() {super.call (this)} function Sub() {super.call (this)} Const app =new Sub() const app1=new Sub() console.log(app.k==app1.k)// Two methods are not the same method false console.log(app1.k) app.SuperArray.push(5) console.log(app.SuperArray); / / [1, 2, 3, 4, 5]Copy the code

2. Cannot access methods on the parent class prototype

/ / create the superclass constructor function Super () {enclosing SuperArray = [1, 2, 3, 4]} // add the prototype. super.prototype. getSuper=function(){console.log(' I am the prototype. ')} // create a subclass constructor and change this reference with call or apply Const app = new Sub() {super.call (this)} const app = new Sub() app.getsuper () Error app.superarray. push(5) console.log(app.superarray); / / [1, 2, 3, 4, 5]Copy the code

Implementation of composite inheritance

Function Super(age) {this.Superage = [12, 15, 14, Super.prototype.sayage = function() {return this.age}; Function Sub(age,name) {super.call (this,age) this.name=name} sub.prototype = new Super() Sub.prototype.sayname=function(){return this.name} sub.prototype. construct = Sub const app = new Sub(19,' ZJX ') app.superage.push (12) console.log(app.superage) //[12,15,14,18,12] console.log(app.sayage()) //19 Console. log(app.sayname()) // ZJX const app1 = new Sub(20,' KKK ') console.log(app1.superage) Console.log (app1.sayage()) //20 console.log(app1.sayname()) // KKKCopy the code

Advantages: Advantages of both stereotype chain inheritance and classical inheritance have disadvantages: the superclass constructor is called twice

Implementation of parasitic inheritance

Core: On the basis of the original type inheritance, enhance the object, return the constructor

function createAnother(original){ var clone=Object.create(original); SayHi = function(){// Somehow enhance the object alert("hi"); // Create a new object by calling object(). }; return clone; // Return this object}Copy the code

Disadvantages:

1. Function reuse cannot be realized

Var person = {name: 'ZJX, arr:,3,2,5 [1]}. Var person1 = {name: 'KKK, arr:,2,5 [1]}. var anotherPerson = createAnother(person); var anotherPerson1 = createAnother(person1); anotherPerson.sayHi(); //"hi" anotherPerson1.sayHi(); //"hi" console.log(anotherPerson.sayhi == anotherPerson1.sayhi)//falseCopy the code

Parasitic composition inheritance implementation

Combines all the advantages of inheritance above

Function Super(age){this.age=age this.color=['green','red']} Function Sub(age,name){super. call(this,age) this.name=name Sub.prototype.getname=function(){return this.name} // Modified prototype of the subclass constructor Sub. Prototype. Constructor = Sub let app = new Sub (12, 'ZJX') / / subclass instance to participate the parent class app. Color. Push () 'pink' Console. log(app.color) //green,red,pink console.log(app.getage())//12 // Note You can call the method console.log(app.getName ())// ZJX Let app1=new Sub(15,' KKK ') console.log(app1.color) //green,redCopy the code