JavaScript simulates the method of implementing inheritance

This article demonstrates an example of how JavaScript simulates implementation inheritance. Share with you for your reference. The specific analysis is as follows:

As we all know, in JavaScript you can only simulate the implementation of "classes" in OO, which means that there is no class inheritance in JavaScript. We can only simulate the implementation by adding or overwriting properties to the original object.

I'm going to define a parent class,

// The parent class 
function ParentClass() {
 this.className = "ParentClass";
 this.auth = "Auth";
 this.version = "V1.0";
 this.parentClassInfo = function () {
 return this.className + "\n" + this.auth + "\n" + this.version;
 }
}

1. prototype implementation:

// A subclass 
//1 , prototype inheritance 
function ChildClassByPrototype() {
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}
ChildClassByPrototype.prototype = new ParentClass();
var cctest1 = new ChildClassByPrototype();
cctest1.parentClassInfo();
cctest1.classInfo();

This is as simple as assigning an instance of the parent class to a subclass's prototype property, and then subclasses can use the parent's methods and properties. For example, cctest1.parentClassInfo () method in this example, JavaScript will first look for parentClassInfo() method in the instance of ChildClassByPrototype, but not in the subclass, so it will continue to look for ChildClassByPrototype.prototype property, and the value of its prototype property is an instance of ParentClass, which has parentClassInfo() method, so the search ends and the call is successful.

2. apply implementation:

//2 , apply inheritance 
function ChildClassByApply() {
 ParentClass.apply(this, new Array());
 //ParentClass.apply(this, []);
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}

apply in JavaScript can be understood as replacing B method with A method. The first parameter is the object itself of B method, and the second parameter is an array. The value in the array is the list of parameters that need to be passed to A method.

3. call + prototype implementation:

//3 , call+prototype inheritance 
function ChildClassByCall() {
 ParentClass.call(this, arguments);
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}
ChildClassByCall.prototype = new ParentClass();

The function of call and apply is similar, that is, A method is used to replace B method, but the parameters passed are not the same. The first parameter of call method is the object of B method itself, and the subsequent parameters are not wrapped by Array, so they should be directly passed in turn. Since it works pretty much the same, why do you have one more prototype assignment? This is because the call method only implements method substitution and does not copy the object properties.

Each method has its own context, for example, if the parent class has a parameter constructor:

function ParentClass(className, auth, version) {
 this.className = className;
 this.auth = auth;
 this.version = version;
 this.parentClassInfo = function () {
 return this.className + "\n" + this.auth + "\n" + this.version;
 }
}

In this case, prototype is not applicable. apply or call can be used.

function ChildClassByApply(className, auth, version) {
 ParentClass.apply(this, [className, auth, version]);
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}
function ChildClassByCall(className, auth, version) {
 ParentClass.call(this, arguments[0], arguments[1], arguments[2]);
 //ParentClass.call(this, className, auth, version);
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}
ChildClassByCall.prototype = new ParentClass();

Instantiation:

var cctest2 = new ChildClassByApply("ParentClass", "Auth", "V1.0");
var cctest3 = new ChildClassByCall("ParentClass", "Auth", "V1.0");

How do you choose between apply and call? In OO's inheritance, the subclass inherits from the parent class, so it should also be the type of the parent class. That is, ChildClassByCall and ChildClassByApply should also be of type ParentClass, but when we test 1 with "instanceof", we will find that a subclass inherited by apply is not of type ParentClass. Therefore, we recommend call + prototype to simulate implementation inheritance. It is said that Google Map API inherits in this way.

I hope this article has helped you with your javascript programming.