Implementation of JavaScript inheritance

Although JavaScript is an object-oriented language, its inheritance mechanism is different from the traditional object-oriented language and is based on the prototype inheritance mechanism, but under this mechanism, inheritance still has some different implementation methods.

Method one: Class-Type Inheritance

The so-called class-type inheritance refers to the imitation of traditional object-oriented language inheritance, both inherited and inherited are "classes", the code is as follows:

First define a parent class (or superclass):

function Person (name) {        this.name=name;    }    Person.prototype.getName=function () {        returnthis. name;    };

The property of the parent class person is defined in the constructor, which guarantees that the name property of the child class inheriting it does not share this property with it, but instead belongs to the subclass, and the GetName method is attached to the prototype to allow multiple instances of the subclass inheriting it to share this method body, which saves memory. (for multiple instances, each new instance will ensure that the GetName method of these instances refers to the same memory space, not the separate space).

Define an inheritance method, extend, as follows:

function Extend (subclass,superclass) {        var f=function () {};        F.prototype=superclass.prototype;        Subclass.prototype=new  F ();        SubClass.prototype.constructor=subclass;        Subclass.superclass=superclass.prototype;         if (superclass.prototype.constructor==Object.prototype.constructor) {            superClass.prototype.constructor =superclass;        }    }

In this method, first create a new class F, let its prototype as a prototype of the parent class, and let the child class prototype point to an instance of the class F, so as to achieve the purpose of inheriting the parent class, while the prototype of the subclass has been modified, so the modified prototype of the constructor property point to the subclass, Let it have a constructor and, at the same time, attach a superclass property to the subclass, which can call the parent class, thus establishing a relationship between the child class and the parent class.

Define a subclass author to inherit the parent class person, as follows:

function Author (name,books) {       Author.superClass.constructor.call (this, name);        this. book=books;   }   Extend (Author,person);    Author.prototype.getBooks=function () {        returnthis. Book;    }

Here the constructor of the parent class is called through its superclass property in the constructor of the subclass, and the call method is used to transform this point of the method invocation, so that the subclass author also owns (inherits) the property of the parent class, and the subclass has its own property book, Therefore, the parameter books is assigned to the property book in the constructor to achieve the purpose of construction. Use the Extend function to inherit the properties and methods on the parent's person prototype (actually inheriting only the method, because we previously just attached the method to the prototype, and the property was defined in the constructor). At the same time, author has its own method Getbooks, which is attached to the corresponding prototype, and achieves the purpose of further expansion on the basis of inheritance.

This inheritance is obviously a similar to the traditional object-oriented language of class inheritance, the advantage is accustomed to the traditional object-oriented concept of the programmer is easy to understand, the disadvantage is that the process is cumbersome, memory consumption is slightly larger, because the subclass also has its own constructors and prototypes, and the subclass and the parent class properties are completely isolated, Even though the two values are the same, they cannot share the same memory.

Method Two: Prototype inheritance

A parent class is defined first, and it is not deliberately modeled by using constructors, but rather by defining an object directly in the form of an object literal, which is the parent class

var person={      name:'default name',      getname:function () {            Returnthis. Name;      }  ;

As with the first method, the object has an attribute name and a method getname.

A clone method is then defined to implement the subclass's inheritance of the parent class, as follows:

function Clone (obj) {         function F () {}         f.prototype=obj;          return New F ();     }

The Clone method creates a new object that points the prototype of the object to the parent class, the parameter obj, and returns the object.

The last subclass inherits the parent class through the Clone function, as follows:

var 　　author=Clone (person);　　 Author.book=['javascript']; Author.showbook=returnthis. Book;}

This defines a subclass, inherits the parent class person through the clone function, expands a property book, and a Method Showbook, where the subclass also owns the property name, but it is the same as the name value of the parent class, so there is no overwrite, and if not, you can use the

Author.name= ' new name '; Override this property to get a new Name property value for the subclass.

This prototype inheritance is simpler and more natural than class inheritance, and if the attributes of the child class and the parent property are the same, and can be modified without modification, the two are actually sharing the same memory space, such as the Name property above, and the disadvantage is that it is difficult for programmers accustomed to traditional object-oriented programming to understand, If both are to be chosen, it is undoubtedly a better way.

Since JavaScript uses a prototype-based approach to inheritance, and each object's prototype can only point to an instance of a particular class (which cannot point to multiple instances), how do you implement multiple inheritance (that is, you have a class that has multiple classes of methods and properties, and you do not define these methods and properties yourself internally)?

A way to Mixin class is given in JavaScript design mode:

First, a class is defined to save some commonly used methods and properties, which can be added to any other class by extension, so that the class is added to have some methods and properties of the class, if you define more than one class, and add to a class, then the class is indirectly implemented "multiple inheritance", Based on this idea, the implementation is as follows:

Meta-class Definitions:

 var  mixin=function () {}; Mixin.prototype  ={serialize:function () { var  output=[];  for  (Key in  this  ) {Output.push (key  + " Span style= "color: #800000;" >:   +this   return  output.join ( " ,   " ); }    }

The meta-class has a serialize method for traversing itself, outputting its own properties and property values, and returning them as strings, separated by commas.

Defines an extension method that enables a class to be augmented with a property or method of a meta-class, as follows:

function augment (receivingclass,givingclass) {if(arguments[2]){            for(varI=2, len=arguments.length;i<len;i++) {Receivingclass.prototype[arguments[i]]=Givingclass.prototype[arguments[i]]; }       }       Else       {            for(MethodNameinchGivingclass.prototype) {               if(!Receivingclass.prototype[methodname]) {Receivingclass.prototype[methodname]=Givingclass.prototype[methodname]; }           }       }  }

The method defaults to two parameters, the first parameter is to accept the expanded class, the second argument is the class of the class (to augment the other class), but also can have other parameters, if it is greater than two parameters, the following parameters are methods or property names, to indicate that the extended class only want to inherit the specified property or method of the meta-class, Otherwise, the default inherits all the properties and methods of the class, in which the first if branch is used to inherit the specified properties and methods, and the Else branch is the case where all properties and methods are inherited by default. The essence of the method is to extend (add) the properties and methods on the prototype of the meta-class to the prototype of the expanded class, so that it has the properties and methods of the meta-class.

Finally, multiple inheritance is implemented using the Enrich method

  augment (author,mixin);      var New Author ('js', ['javascript Design Patterns']);     Alert (Author.serialize ());

This defines a class of author, which inherits from the person parent class, and also has the methods and properties of the Mixin class, and if you prefer, you can define n-ary classes to augment the class, and it can inherit the properties and methods of other classes that you define, so that multiple inheritance is achieved, and finally, The results of the author Serialize method are as follows:

You will find that the class has the properties and methods of the person class, the author class, the Mixin class, where the properties and methods of person and mixin are inherited, and in fact, it implements multiple inheritance.

Implementation of JavaScript inheritance