Dom Notes (13): How JavaScript is inherited

In Java, C + +, C # and other OO languages, two kinds of inheritance are supported: interface inheritance and implementation inheritance. The interface inheritance system inherits the method signature, and the implementation inherits the actual methods and properties. In Scmascript, because the function is not signed, interface inheritance cannot be implemented, only implementation inheritance is supported.

The implementation of inheritance relies primarily on the prototype chain.

First, the prototype chain

A prototype chain is a method that uses a prototype to allow one reference type to inherit another reference type, in the DOM Note (12): In the prototype object, the relationship between the constructor, the instance, and the prototype is described:

Each constructor has a prototype object, and the prototype object contains a pointer to the constructor, and each instance contains an internal pointer to the prototype object. What happens if you use a prototype object as an instance of another constructor?

function Supertype () {this . Property = true ;}    Supertype.prototype.getsupervalue=function  () { return  this . property;}; function  Subtype () {this . Subproperty = false ;} //inherits Supertype  Subtype.prototype = new  supertype (); Subtype.prototype.getsubvalue=function  () { this . Subproperty;}; var  instance = 

In the DOM note (11): The basic understanding and creation of JavaScript objects is mentioned, and the object type is the root element of all objects.  So, subtype also inherits object, with a pointer pointing to the prototype of object. Now, their relationship has become this:

When instance calls Getsupervalue (), a search is performed:1) in the instance, 2) not found in the instance, In the Subtype.prototype search; 3) in the Subtype.prototype can not find, in Supertype.prototype find . When it is found, stop the search and return the result value. However, when instance calls ToString (), it will always search for the end-object.prototype of the prototype chain.

According to the prototype chain, it is important to note thatInstance.constructor no longer points to subtype, but instead points to supertype.

Ii. Summary of Prototype succession

1. Determine the relationship between prototypes and instances

In the DOM Note (12): The isPrototypeOf () method is mentioned in the prototype object, and the existence of this relationship can also be established with instanceof.

//Both returns True alert (instance instanceof Object), alert (instance instanceof supertype); alert (instance instanceof subtype); Alert ( Object.prototype.isPrototypeOf (instance)); Alert (SuperType.prototype.isPrototypeOf (instance)); Alert ( SubType.prototype.isPrototypeOf (instance));

2. When you define properties and methods in a subclass that have the same name as the parent class, the corresponding properties and methods in the parent class are masked.

function Supertype () {this . Property = true ;}    Supertype.prototype.getsupervalue=function  () { return  this . property;}; function  Subtype () {this . Property = false ;    //properties with the same name}//inherit supertype  subtype.prototype = new  Supertype (); Subtype.prototype.getsubvalue=function  () { this . property;}; var  instance = 

3, the prototype chain implementation of inheritance, you can not use object literals to create a prototype method, to prevent rewriting the prototype chain.

functionSupertype () { This. property =true;} Supertype.prototype.getsupervalue=function(){return  This. property;};functionSubtype () { This. Subproperty =false;}//Inherit supertypeSubtype.prototype =NewSupertype ();//Use a literal to add a new method, resulting in an invalid rowsubtype.prototype={Getsubvalue:function()    {return  This. Subproperty; }};varInstance =NewSubtype (); alert (Instance.getsupervalue ()); error:undefined isNot a function

4. There are two problems with the prototype inheritance: 1) The prototype property of the reference type is shared by all instances, and 2) when the prototype inherits, the arguments cannot be passed to the constructor of the parent class through an instance of the subclass.

function supertype () {    this. Colors = ["Red","Blue","white"];} function Subtype () {}//Inherit supertypenew supertype (); var New Subtype (); Instance1.colors.push ("Black"); alert (instance1.colors)  ; //red,blue,white,black var New Subtype (); alert (instance2.colors);  Red,blue,white,black

Instance1 and Instance2 share the Colors array property (reference type).

Iii. Other ways of inheriting

1. Borrowing the constructor function

With prototype inheritance, the prototype properties of the reference type are shared by all instances. However, borrowing constructors avoids this problem and can pass arguments to the constructor of the parent class with apply () and call ():

function supertype () {    this. Colors = ["Red","Blue","white"];} function Subtype () {    //Inherit supertype    supertype.call (this);} var New Subtype (); Instance1.colors.push ("Black"); alert (instance1.colors)  ; //red,blue,white,black var New Subtype (); alert (instance2.colors);  Red,blue,white

2. Combination Inheritance (recommended)Combinatorial inheritance is the prototype inheritance + constructor inheritance: The prototype chain implements the inheritance of the prototype properties and methods, and the constructor implements the inheritance of the instance attributes.

functionSupertype (name) { This. name=name; This. colors = ["Red","Blue","White"];} Supertype.prototype.sayname=function() {Alert ( This. name);};functionSubtype (name,age) {//Inherit the Supertype property and pass arguments to the constructor of the parent classSupertype.call ( This, name);//First Call supertype ()     This. Age=age;}//Inherit Supertype methodSubtype.prototype =NewSupertype ();//Second call to Supertype ()SubType.prototype.constructor = subtype; Subtype.prototype.sayage=function() {Alert ( This. age);};varInstance1 =NewSubtype ("Dwqs", Instance1.colors.push);"BLACK"); alert (instance1.colors);//red,blue,white,blackInstance1.sayname ();//dwqsInstance1.sayage ();//20varInstance2 =NewSubtype ("I94web"); alert (instance2.colors);//red,blue,whiteInstance2.sayname ();//i94webInstance2.sayage (); 25

to ensure that the Supertype constructor does not override the child class's prototype, it is recommended that you add the properties of the subclass after calling the parent class constructor. The disadvantage of combinatorial inheritance is that: 1) The parent class constructor is called two times in any case, 2) the subclass needs to override the attributes in the parent class, and it will contain two sets of name and colors attributes (parent class properties): One on the instance, one on the prototype 3. Prototype-Type InheritanceThis approach is to borrow prototypes and create new objects based on existing objects without having to create custom types. But you need to use one of the following functions:

function  Object(o) {    function F () {}    f.prototype=o;    return New F ();}

O is an already existing object, and the returned object has the same properties and methods as O.

var person={name: "Dwqs", colors:["Red", "blue", "white"]};var Per1 = object (person); alert (per1.name); dwqs//overrides an existing attribute Per1.name = "I94web";p er1.age = 20; New attribute alert (per1.age); 20per1.colors.push ("Black"); alert (per1.name); I94webalert (per1.colors); Red,blue,white,blackvar Per2 = object (person); alert (per2.name); dwqs//all instances share the attribute of the reference type alert (per2.colors); Red,blue,white,black

Its chaotic relationship is as follows:

Per1 and Per2 share the Colors property (reference type). In ECMAScript 5, Object.create (Obj,[props]) regulates this way: obj is an existing object, props optional, is an object with an extra property, formatted with Object.defineproperties () The second parameter is in the same format.

var person={    Name:"Dwqs",    colors:["Red","Blue", "White"]};  var per1 = object.create (person,{    age:{        value:20    }); alert (per1.age);  -

4. Parasitic inheritance

This approach is similar to prototype inheritance, as well as borrowing the object function, and then in some way internally to enhance the objects.

function Object(o) {functionF () {} f.prototype=o;return NewF ();}varperson={Name:"Dwqs", colors:["Red","Blue","White"]};functionCreateobj (obj) {varClone =Object(obj);//Enhanced ObjectClone.age = 20; Clone. hello=function() {Alert ("Hello,my is"+ This. age); };returnClone;}varPer1 = createobj (person);p er1.   Hello (); Hello,my Age is20

5. Parasitic combined inheritance

In the 2nd way, the combination of inheritance although the JavaScript clock is the most common way, but there are shortcomings, mentioned above, no longer repeat. Parasitic combined inheritance can solve these two shortcomings, the basic mode is as follows:

function  Object(o) {    function F () {}    f.prototype=o;    return New F ();} function Inheritprototype (subtype,supertype) {    varobject(supertype.prototype );  //Create Objects    Obj.constructor = subtype;                      //Enhanced Object    Subtype.prototype = obj;                        //Specify Object }

To override an example in a composite inheritance:

function Object(o) {functionF () {} f.prototype=o;return NewF ();}functionInheritprototype (Subtype,supertype) {varobj =Object(Supertype.prototype);//Create ObjectsObj.constructor = subtype;//Enhanced ObjectSubtype.prototype = obj;//Specify Object}functionSupertype (name) { This. name=name; This. colors = ["Red","Blue","White"];} Supertype.prototype.sayname=function() {Alert ( This. name);};functionSubtype (name,age) {//Inherit the Supertype property and pass arguments to the constructor of the parent classSupertype.call ( This, name); This. Age=age;} Inheritprototype (Subtype,supertype); Subtype.prototype.sayage=function() {Alert ( This. age);};varInstance1 =NewSubtype ("Dwqs", Instance1.colors.push);"BLACK"); alert (instance1.colors);//red,blue,white,blackInstance1.sayname ();//dwqsInstance1.sayage ();//20varInstance2 =NewSubtype ("I94web"); alert (instance2.colors);//red,blue,whiteInstance2.sayname ();//i94webInstance2.sayage (); 25

The supertype () constructor is called only once, and avoids creating redundant and unnecessary properties on Supertype.prototype, the prototype chain remains intact, and the instanceof and isPrototypeOf () methods can be used.

Original starting: http://www.ido321.com/1381.html

Dom Notes (13): How JavaScript is inherited