The inheritance method in JS--Introduction and practice of combinatorial inheritance

Combinatorial inheritance is a combination of primitive chain inheritance and constructor inheritance, which draws on their own little bit and complements each other's weaknesses, and is a widely used JavaScript inheritance model. The following respectively from the primitive chain inheritance, constructor inheritance, respectively, and finally introduce the combination of the two---combination inheritance.

Prototype chain: Use a prototype to let one reference type inherit another property and method of a reference type

Each constructor has a prototype object, and the prototype object contains a pointer to the constructor, and the instance contains an internal pointer to the prototype object.

To implement the basic pattern of the primitive chain:

function supertype () {    this.property =true;} SuperType.prototype.getSuperValue = function () {    returnthis.property;} Function subtype) {    this.subproperty =false;} Subtype.prototype = new Supertype ();     Implements the Inheritance SuperTypeSubType.prototype.getSubValue = function () {    returnthis.subproperty;} var instance = new subtype (); alert (Instance.getsupervalue ());

The final result: intance points to Subtype's prototype, and subtype's prototype points to Supertype's prototype, supertype inherits the object

The default prototype for all functions is an instance of object

Problem: A problem with a reference type value is generated

For example, if you create an instance of a subclass, if you modify the properties of the subclass instance, you will be affected when you create the other subclasses, and the code is as follows:

function supertype () {    this.colors =["Red", "Blue", "green"];} Function subtype () {}subtype.prototype = new supertype (); var Instance1 = new subtype (); Instance1.colors.push ("Black"); alert (instance1.colors);  Red, blue, green, blackvar instance2 = new subtype (); alert (instance2.colors);   Red, blue, green, black    

The above results indicate that the property values of other instances will be affected

Second, borrowing a constructor: calling a superclass constructor inside a subtype constructor

function supertype () {    this.colors =["Red", "Blue", "green"];} Function subtype{} (   Supertype.call (this);     Inherited the supertype. By calling Supertype's constructor, borrow its construction structure}var Instance1 = new subtype (); Instance1.colors.push ("Black"); alert (intance1.colors)     ; Red,blue,green,blackvar Instance2 = new subtype (); alert (instance2.colors);   Red,blue,green

You can use this method to pass parameters to a superclass constructor in a subclass constructor, as follows:

function Supertype (name) {    this.name = name;} Function subtype () {Supertype.call (this, "Nicholas");        Pass in parameters, using this parameter to initialize Namethis.age = 29 in the parent constructor;} var instance = new subtype (); alert (instance.name);   Nicholasalert (instance.age);   29

Problem: not easy to reuse

Three, combined inheritance: the use of prototype chain to implement the prototype properties and methods of inheritance, and by borrowing the constructor to implement the inheritance of the instance properties

Example code:

function Supertype (name) {this.name = Name;this.colors = ["Red", "Blue", "green"];} SuperType.prototype.sayName = function () {   //defines a method that can also be used with    alert (this.name) in an inherited subclass;} Function subtype (name, age) {Supertype.call (this, name);    Inherit part of Supertype, this refers to Subtype,this.age = age;    Own newly defined attribute age can also be assigned}subtype.prototype = new Supertype ();     With prototype inheritance, you can use the method of the parent class (see prototype chain inheritance) SubType.prototype.sayAge = function () {   //define a new method specific to Subtype    alert (this.age);} var Instance1 = new Subtype ("Martin", Ten), Instance1.colors.push ("Black"); alert (instance1.colors)  ; Red,blue,green,blackinstance1.sayname ();   Martininstance1.sayage ();  10var Instance2 = new Subtype ("Greg"); alert (instance2.colors);   Red,blue,greeninstance2.sayname ();  Greginstance2.sayage ();  27

The inheritance method in JS--Introduction and practice of combinatorial inheritance