Three methods to implement inheritance in JavaScript

1. prototype chain inheritance
In terms of prototype chain inheritance, JavaScript is similar to java, c #, and other languages. It only allows single parent class inheritance. The basic method of prototype inheritance is as follows:
Copy codeThe Code is as follows:
Function Parent (){}
Function Child (){}
Child. prototype = new Parent ();

The prototype attribute of the object Child directs to the instance of the Parent object Parent, so that the Child object instance can access the attributes and methods defined by the Parent object construction through the prototype chain.
Construct a parent-level object linked through the prototype chain. Does it mean that the inheritance of the object is completed? The answer is no. For example:
Copy codeThe Code is as follows:
Function Parent (){}
Function Child (){}
Child. prototype = new Parent ();
Var child = new Child ();
Alert (child. constructor); // function Parent (){}
Alert (child instanceof Child); // true

Although child can still be used as a Child instance, the original object construction information of the child instance has been lost. The method to compensate for this defect is as follows:
Copy codeThe Code is as follows:
Function Parent (){}
Function Child (){}
Child. prototype = new Parent ();
Child. prototype. constructor = Child;
Var child = new Child ();
Alert (child. constructor); // function Parent (){}
Alert (child instanceof Child); // true

As shown in the code snippet "Child. prototype. constructor = Child", the Child prototype is constructed by explicitly specifying the object, and all Child object instances are constructed as Child.
Ii. Use the apply and call Methods
Because the apply and call methods of Function objects built in JavaScript change the context environment of "this" in the object structure, the specific object instance has the attributes and methods defined in the object structure.
The use of apply and call inheritance is particularly common when operating DOM objects on HTML pages in actual development. For example:
Copy codeThe Code is as follows:
<Div id = "extend"> apply, call inherited </div>
<Script language = "javascript">
Function ext ()
{
This. onclick = function () {alert (this. innerHTML )}
}
Ext. apply (document. getElementById ("extend "));
Ext. call (document. getElementById ("extend "));
</Script>

Use the ext method defined by apply or call to make this context inside the ext method represent the DOM object "<div id =" extend "> apply, call inheritance </div> ".
It is worth noting that when using apply and call, the object will be directly executed to construct the defined code segment, such:
Copy codeThe Code is as follows:
<Script language = "javascript">
Function testExec ()
{
Alert ("Run! ");
}
TestExec. call (null); // The execute dialog box is displayed.
TestExec. apply (null); // The execute dialog box is displayed.
</Script>

Iii. inheritance between object instances
The JavaScript Object polymorphism allows instances to dynamically add attributes and methods. This feature creates another Inheritance Method in JavaScript-inheritance between object instances. For example:
Copy codeThe Code is as follows:
Var Person = {name: "nathena", age: "26 "};
Var nathena = {sex: "male "};
(Function inlineExtends (so, po)
{
For (var I in po)
{
If (so [I]) // if so also has this Member
Continue;
So [I] = po [I];
}
}) (Nathena, Person );
Alert (nathena. name); // return nathana

As shown in the code above, in the inheritance between instances of objects, the parent object Persong defines the common attributes of "persons", such as name and age, the sub-object nathena defines its own private property "sex ". The inlineExtends function is used to copy the common attributes of a Person defined in the parent object "Person" for the sub-object nathena.
Note that the statement "if (so [I])" ensures that the original members of the sub-object are not overwritten by members with the same name in the parent object, in contrast to the principle of inheritance between parent and child objects in an object-oriented system, sub-objects can overwrite and reload attributes or methods of parent objects. Parent objects can only hide their own attributes or methods.