First, prototype chain inheritance
In the context of prototype chain inheritance, JavaScript is similar to languages such as Java and C #, allowing only a single parent class to inherit. The basic way to prototype inheritance is as follows:
Copy Code code as follows:
function Parent () {}
function child () {}
Child.prototype = new Parent ();
The prototype property of the object child points to an instance of parent object, so that the child object instance can access the properties, methods, etc. defined by the parent object construct through the prototype chain.
Does the construct link the parent object through the prototype chain, or does it mean that the object's inheritance has been completed? The answer is in the negative. Such as:
Copy Code code 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 the child can still be used as an instance of a child, the original object construction information for the instance child has been lost at this time. The method for remedying the defect is as follows:
Copy Code code 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 fragment "Child.prototype.constructor = Child", the construct of the child is enforced by the display of the specified object, forcing all child object instances to be constructed as child.
second, use Apply, call method
Because the Apply, call method of a function object built into JavaScript changes the context of "this" in the object construct, the specific object instance has the properties and methods defined in the object construct.
Using apply, call inheritance is especially useful when manipulating DOM objects on HTML pages in actual development. Such as:
Copy Code code as follows:
<div id= "Extend" >apply,call inheritance </div>
<script language= "JavaScript" >
function ext ()
{
This.onclick=function () {alert (this.innerhtml)}
}
Ext.apply (document.getElementById ("extend"));
Ext.call (document.getElementById ("extend"));
</script>
By using the Ext method defined by apply or call, the this context inside the Ext method is represented as the DOM object "<div id=" Extend ">apply,call inheritance </div>".
It is noteworthy that when apply and call is used, the code snippet defined by the object construct is executed directly, such as:
Copy Code code as follows:
<script language= "JavaScript" >
function Testexec ()
{
Alert ("Execute!") ");
}
Testexec.call (null);/Popup Execute dialog box
Testexec.apply (null);/Popup Execute dialog box
</script>
Iii. inheritance between object instances
The polymorphism of a JavaScript object allows an instance to dynamically add properties and methods. This feature creates another form of inheritance in JavaScript--Inheritance between object instances. Such as:
Copy Code code 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 preceding code, in inheritance between instances of an object, the parent object Persong defines the common attribute name, age, and child object Nathena defines its own private property "sex". The function inlineextends is to nathena the common attributes that are shared by the "person" defined in the parent object to the child object.
One particular statement to note is "if (So[i])", which ensures that the original members of the child object are not overwritten by members of the same name in the parent object, and violate the principle of inheritance between parent-child objects in object-oriented objects-child objects can override, overload the parent object's properties or methods, The parent object can only hide its own properties or methods against the child object.
