JavaScript implements inheritance in several ways to summarize a

Although there is inheritance in ES6, it is possible to use the extends keyword. This is not what this is about, but a few ways to implement inheritance before ES6.

(i) prototype chain

ECMAScript the prototype chain as the primary way to implement inheritance. The basic idea is to use a prototype to let one reference type inherit the properties and methods of another reference type. (Children who do not understand the prototype chain can look through my previous blog, with detailed instructions)

A basic model for realizing the prototype chain

functionsupertype () { This. prototype=true;} SuperType.prototype.getSuperValue=function(){      return  This. property;}functionsubtype () { This. subproperty=false;}//By creating an instance of supertype inherited the supertype.Subtype.prototype=Newsupertype (); SubType.prototype.getSubValue=function(){      return  This. Subproperty;}varInstance=Newsubtype (); alert (Instance.getsupervalue ()); //true

In the example above, instance points to subtype's prototype, and subtype's prototype points to Supertype's prototype. The Getsupervalue () method is still in Supertype.prototype, but the property is in Subtype.prototype. This is because prototype is an instance property, and Getsupervalue () is a prototype method.

Note: Although the prototype chain is powerful, it can be inherited, but there are two main problems. (1) A prototype property that contains a reference type value is shared by all instances, which causes the modification of one instance to affect the other instance.

(2) When you create an instance of a subtype, you cannot pass parameters to the constructor of the superclass type. Due to the existence of these two problems, the prototype chain is seldom used alone in practice.

The following example clearly illustrates the first question

functionsupertype () { This. colors=["Red", "Blue", "green"];}functionsubtype () {}//inherited the supertype.Subtype.prototype=Newsupertype ();varinstance1=Newsubtype (); Instance1.colors.push ("Black"); alert (instance1.colors); //Red,blue,green,blackvarInstance2=Newsubtype (); alert (instance2.colors); //Red,blue,green,black

(ii) Borrowing the constructor function

Use the borrowed constructor technique to solve problems in solving a prototype that contains reference type values. The basic idea of borrowing a constructor is to call a super-type constructor inside a sub-type constructor. A function is simply an object that executes code in a particular environment, so you can execute the constructor on the newly created object by using the Apply () and call () methods. The following example

functionsupertype () { This. colors=["Red", "Blue", "green"];}functionsubtype () {//Inherit supertypeSupertype.call ( This);}varinstance1=Newsubtype (); Instance1.colors.push ("Black"); alert (instance1.colors); //Red,bllue,green,blackvarInstance2=Newsubtype (); alert (instance2.colors); //Red,blue,green

In the above example, the Supertype constructor is called in the context of the newly created subtype instance by using the call () method (or the Apply () method). All object initialization code defined in the Supertype () function is executed on the new subtype object. As a result, each instance of subtype will have its own copy of the Colors property.

In relation to the prototype chain, the borrowing constructor can pass parameters to the superclass constructor in the subtype constructor. The following example

functionsupertype (name) { This. name=name;}functionsubtype () {//inherits the Supertype, and also passes the parametersSupertype.call ( This, "Mary"); //Instance Properties       This. age=22;}varInstance=Newsubtype (); alert (instance.name); //Maryalert (instance.age);// in

There are two problems with borrowing a constructor: (1) There is no way to avoid problems with the constructor pattern, which are defined in the constructor and therefore cannot be taken. (2) methods defined in a super-type prototype are not visible to the subtype. So this technique is seldom used alone.

(iii) Portfolio inheritance

Combinatorial inheritance refers to the combination of the prototype chain and the technology that borrows the constructor. The idea is to use the prototype chain to implement the inheritance of the prototype properties and methods, and to implement the inheritance of instance properties by borrowing constructors. This enables the reuse of functions by defining methods on the prototype, and ensures that each instance has its own properties. The following examples fully illustrate this point

functionsupertype (name) { This. name=name;  This. colors=["Red", "Blue", "green"];} SuperType.prototype.sayName=function() {alert ( This. name);};functionsubtype (name, age) {//Inheritance Properties Use the borrowing constructor to implement inheritance of instance propertiesSupertype.call ( This, name);  This. age=Age ;}//The inheritance method uses the prototype chain to implementSubtype.prototype=Newsupertype (); SubType.prototype.constructor=Subtype;subtype.prototype.sayage=function() {alert ( This. age);};varinstance1=NewSubtype ("Mary", 22); Instance1.colors.push ("Black"); alert (instance1.colors); //Red,blue,green,blackInstance1.sayname ();//MaryInstance1.sayage ();// AvarInstance2=NewSubtype ("Greg", 25); alert (instance2.colors); //Red,blue,greenInstance2.sayname ();//GregInstance2.sayage ();// -

In this example, two instances have their own properties, including the Colors property, and the same method.

Combining inheritance avoids the drawbacks of prototype chains and borrowing constructors, and incorporates their advantages, which is the most common inheritance pattern in JavaScript.

JavaScript implements inheritance in several ways to summarize a