Three methods and code instances in Javascript that implement inheritance

Inheritance is an important tool in implementing object-oriented programming. Although we can't overdo inheritance and make use of composition instead of inheritance, inheritance is inevitable. The inheritance mechanism in Javascript is discussed here.

There is no concept of inheritance in Javascript, but there are ways to emulate it. This inheritance actually copies one object inside another object. It is important to note that all local and host classes cannot be inherited as base classes, mainly for security reasons.

There are roughly three types of inheritance in Javascript: 1. Object impersonation; 2. 2. Prototype inheritance; A mix of the two.

One, the object impersonates

In fact, object impersonation is closely associated with the this keyword (so it is important to fully understand the Javascript this keyword :P). The constructor USES this to assign values to properties and methods, and the constructor can also be seen as a normal function, so we can make the constructor of our base class the constructor of a subclass, and then call the function inside the subclass, and the subclass will get the properties and methods of the parent class.

The principle is simple, so how do we do that? The following is a code example, the actual operation.

Object impersonates implementation method one , the most commonly used method of creating new objects:

var classA = function(name){

 this.name = name;

 this.alertName = function(){

  alert(this.name);

 }

}

 

var classB = function(name,age){

 this.myConstructor = classA;

 this.myConstructor(name);

 delete this.myConstructor;

 

 this.age = age;

 this.alertAge = function(){

  alert(this.age);

 }

}

In order to verify whether the above method is correct, you can test it yourself. I will write the test code in the following:

var objA = new classA('DK');

objA.alertName();//DK

 

var objB = new classB('DS',20);

 

objB.alertName();//DS

objB.alertAge();//20

This is what's called object impersonation, and there are two other ways of doing object impersonation, although they're not implemented the same way, but the principle is the same.

Object impersonation implementation method two , using the call method:

var classA = function(name){

 this.name = name;

 this.alertName = function(){

  alert(this.name);

 }

}

 

var classB = function(name,age){

 classA.call(this,name);

 

 this.age = age;

 this.alertAge = function(){

  alert(this.age);

 }

}

As you can see from the code, in the first method we create a new function pointer to the parent class, call the function, and then delete the pointer. Here we use the call method to run the constructor of the parent class under this object, achieving the same purpose. The opposite of the call method is the apply method.

Object impersonation implementation method three , using the apply method:

var classA = function(name){

 this.name = name;

 this.alertName = function(){

  alert(this.name);

 }

}

 

var classB = function(name,age){

 classA.apply(this,new Array(name));

 

 this.age = age;

 this.alertAge = function(){

  alert(this.age);

 }

}

As you can see, the apply method is very similar to the call method, except that the pass parameter is slightly different.

Ii. Prototype inheritance

You should know something about the prototype object, all the properties and methods on the prototype object will be passed to all the instances of the class, so when we pay all the properties and methods of the parent class to the prototype object of the subclass, we are implementing our inheritance.

The subclass wants to get all the properties and methods of the parent class, so if we pay an instance of the parent class directly to the prototype object of the subclass, wouldn't our subclass get all the objects and methods of the parent class?

Code samples serve:

var classA = function(){

 this.name = 'DK';

 this.alertName = function(){

  alert(this.name);

 }

}

 

var classB = function(name,age){

 this.name = name;

 this.age = age;

}

 

classB.prototype = new classA();

 

classB.prototype.alertAge = function(){

 alert(this.age);

}

Note that the constructor of the parent class here needs to ensure that there are no arguments. Because you can't pass =.=! Even if you have construction parameters to implement prototype inheritance

Hybrid inheritance

As the name implies, hybrid inheritance is a hybrid of the first two.

var classA = function(name){

 this.name = name;

}

 

classA.prototype.alertName = function(){

 alert(this.name);

}

 

var classB = function(name,age){

 classA.call(this,name);

 this.age = age;

}

 

classB.prototype = new classA();

 

classB.prototype.alertAge = function(){

 alert(this.age);

}

Passing parameters to the parent class by object impersonation and inheriting the public method by prototype inheritance.

Now that we've covered the three ways of inheritance, it's time to get to the problem.

You might wonder why you have object impersonation, you have prototype inheritance and you have to make a hybrid inheritance, right, that's the most important question.

1. If you actually test it, you will find that inheritance is implemented by object impersonation, and subclasses cannot access the methods on the prototype chain of the parent class.

If you implement two instances of the same subclass, you will find that all of your instances share all of the properties.

But this is definitely not appropriate. So you have a hybrid inheritance approach that keeps properties private while giving subclasses access to the parent's prototype chain.

You can try it yourself. When an object impersonates an inheritance, a subclass cannot access the parent class's protochain-method, and all instances of the protochain-inheritance subclass share all the superclass properties. I'm not going to do an example here.