JavaScript simulation methods to implement inheritance_javascript skills

The example in this article describes the method of JavaScript simulation to implement inheritance. Share it with everyone for your reference. The specific analysis is as follows:

We all know that JavaScript can only simulate and implement "classes" in OO, which means that there is no inheritance of classes in JavaScript. We can only simulate the implementation by adding or rewriting attributes in the original object.

First define a 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:

//子类
//1、prototype继承
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 method is very simple, just assign the instance of the parent class to the prototype attribute of the subclass, and then the subclass can use the methods and attributes of the father. Here we actually use the feature of searching upward in the prototype chain, such as the cctest1.parentClassInfo() method in this example. JavaScript will first search for the parentClassInfo() method in the instance of ChildClassByPrototype. There is no method in the subclass, so it continues to search for ChildClassByPrototype. prototype property, and the value of its prototype property is an instance of ParentClass, which has the parentClassInfo() method, so the search ends and the call is successful.

2. Apply implementation:

//2、apply继承
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 method B with method A. The first parameter is the object of method B itself, and the second parameter is an array. The values ​​in the array are the parameters that need to be passed to method A. List, if the parameter is empty, that is, no parameters are passed, it can be passed through new Array(), [].

3. Call prototype implementation:

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

Call and apply have similar functions, that is, they both replace method B with method A, but the parameters passed are different. The first parameter of the call method is the object of method B itself, and subsequent parameters do not need to be wrapped in Array and need to be directly Delivered in sequence. Since the functions are almost the same, why is there an additional sentence of prototype assignment? This is because the call method only implements method replacement and does not copy object attributes.

Each method has its applicable environment, for example, if the parent class has a parameterized 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, and 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 to choose between apply and call? In OO 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 ParentClass type, but if we use "instanceof" to detect them, we will find that the subclasses inherited through apply are not of ParentClass type. Therefore, we recommend using call prototype to simulate inheritance. It is said that the inheritance of Google Map API uses this method.

I hope this article will be helpful to everyone’s JavaScript programming design.