How to simulate inheritance using JavaScript _ javascript skills

This article mainly introduces how to simulate inheritance in JavaScript. The example analyzes the operation and simulation inheritance techniques of javascript classes, which has some reference value, for more information about how to simulate the inheritance of JavaScript, see the example in this article. Share it with you for your reference. The specific analysis is as follows:

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

First define a parent class,

// 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:

// Subclass // 1. prototype inherits 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 simple. you only need to assign the parent class instance to the prototype attribute of the subclass, and then the subclass can use the parent method and attribute. Here we actually use the features of the prototype chain-up lookup. for example, the cctest1.parentClassInfo () method in this example, JavaScript will first find whether the parentClassInfo () method exists in the ChildClassByPrototype instance, does not exist in the subclass, so you can continue to find ChildClassByPrototype. prototype attribute, and its prototype attribute value is an instance of ParentClass. this instance has the parentClassInfo () method, so the search is complete and the call is successful.

II. apply implementation:

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

The apply in JavaScript can be understood as replacing Method B with Method A. The first parameter is the object of Method B, and the second parameter is an array, the value in the Array is the list of parameters that need to be passed to Method A. If the parameter is null, that is, no parameter is passed, it can be passed through new Array () and.

III. call + prototype implementation:

// 3. call + prototype inherits 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 call and apply functions are similar, that is, they both use method A to replace Method B, but the passed parameters are different. The first parameter of the call method is the object of Method B, subsequent parameters do not need Array packaging and must be passed in sequence. Since the role is similar, why is there an additional prototype assignment? This is because the call method only replaces the method and does not replicate the object attributes.

Each method has its own applicable environment. for example, if the parent class has a constructor with parameters:

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. you can use apply or call;

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 can I choose between apply and call? In the inheritance of OO, 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 the ParentClass type. However, if we use "instanceof", we will find that the subclass inherited by "apply" is not of the ParentClass type. Therefore, we recommend that you use call + prototype to simulate inheritance. It is said that Google Map API is inherited in this way.

I hope this article will help you design javascript programs.