Home > Web Front-end > JS Tutorial > Three ways to implement inheritance in JavaScript_js object-oriented

Three ways to implement inheritance in JavaScript_js object-oriented

WBOY
Release: 2016-05-16 18:44:20
Original
1183 people have browsed it
1. Prototype chain inheritance
In terms of prototype chain inheritance, JavaScript is similar to languages ​​such as Java and C#, and only allows single parent class inheritance. The basic way of prototype inheritance is as follows:
Copy code The code is as follows:

function Parent(){ }
function Child(){}
Child.prototype = new Parent();

The prototype attribute of the Child object points to the instance of the parent object Parent, so that the Child object instance can pass The prototype chain accesses the properties, methods, etc. defined by the parent object's construction.
The structure links the parent object through the prototype chain. Does this mean that the inheritance of the object is completed? The answer is no. For example:
Copy code The 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 an instance of Child, the original object construction information of the instance child has been lost at this time. The method to make up for this defect is as follows:
Copy code The 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 above code snippet "Child.prototype.constructor = Child", through Explicitly specify the prototype of the object constructor Child, forcing all Child object instances to be constructed as Child.
2. Use the apply and call methods
Because the apply and call methods of the JavaScript built-in Function object change the context of "this" in the object construction, so that the specific object instance has The defined properties and methods.
Using apply and call inheritance is particularly common when operating DOM objects on HTML pages in actual development. For example:
Copy code The code is as follows:

 
apply, call inheritance

 

Through the ext method defined by apply or call, the this context inside the ext method is represented as a DOM object "
apply,call inheritance
".
It is worth noting that when using apply or call, the code segment defined by the object construction will be directly executed, such as:
Copy code The code is as follows:

 

3. Inheritance between object instances
The polymorphism of JavaScript objects allows instances to dynamically add attributes and methods. This feature creates another inheritance method in JavaScript-inheritance between object instances. For example:
Copy code The 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 above code, in the inter-instance inheritance of objects, the parent object Person defines the common attributes name and age of "people", and the child object nathena defines its own private attribute "sex". The function of the function inlineExtends is to copy the common attributes of the "person" defined in the parent object Person to the child object nathena.
The statement that needs special attention is "if (so[i])". This statement ensures that the original members of the child object are not overwritten by members of the same name in the parent object, which violates the object-oriented relationship between parent and child objects. The principle of inheritance - child objects can override and overload the properties or methods of the parent object, and the parent object can only hide its own properties or methods from the child object.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template