Examples of inheritance in javascript: javascript instances

Examples of inheritance in javascript: javascript instances

Examples of inheritance in javascript

Reading directory

• Prototype chain inheritance
• Borrow Constructor
• Combination inheritance
• Parasitic combined inheritance
• Postscript

There are two methods of inheritance:Interface inheritance and implementation inheritance. Interface inheritance only inherits the method signature, while implementation inheritance inherits the actual method.

Because the function does not have a signature, interface inheritance cannot be implemented in ECMAScript. ECMAScript only supports implementation inheritance, and the Implementation inheritance mainly relies on the prototype chain.

The following describes the inheritance of several js types:

Prototype chain inheritance

The essence of prototype chain inheritance implementation is to override the prototype object and replace it with a new type instance. The Code is as follows:

Function SuperType () {this. property = true;} SuperType. prototype. getSuperValue = function () {return this. property ;}; function SubType () {this. subproperty = false;} // inherits the SuperTypeSubType. prototype = new SuperType (); SubType. prototype. getSubValue = function () {return this. subproperty;}; var instance = new SubType (); console. log (instance. getSuperValue (); // true

We can see that the instance calls the parent getSuperVlue () method to implement inheritance.

The inheritance of the prototype chain has the following problems:

1. When the prototype that contains the reference type value is changed, all references of the prototype are changed.
2. When creating a child-type instance, there is no way to pass parameters to the super-Type constructor without affecting all object instances.
   

The sample code is as follows:

function SuperType1() {  this.colors = ['red', 'blue', 'green'];}function SubType1() {}SubType1.prototype = new SuperType1();var instance1 = new SubType1();instance1.colors.push('black');console.log(instance1.colors); // [ 'red', 'blue', 'green', 'black' ]var instance2 = new SubType1();console.log(instance2.colors); // [ 'red', 'blue', 'green', 'black' ]

It can be found that the colors attributes of instance1 and instance2 are shared, which leads to a problem. It can also be seen that when a new method is used, is not passed to the parent level.

Borrow Constructor

The principle is to call a super-Type constructor within a sub-Type constructor, because the function is only an object that executes code in a specific environment, so that you can obtain the parent-level methods and attributes.

The Code is as follows:

Function SuperType (name) {this. name = name;} function SubType (name) {// inherits the SuperType and the SuperType parameter is also passed. call (this, name); // instance property this. age = 29;} var instance = new SubType ('bob'); console. log (instance. name); // Bobconsole. log (instance. age); // 29

It can be seen that calling constructor inheritance solves the problem of passing parameters to the parent type, but calling constructor also has its own problems:

1. Methods are in constructor, and function reuse is absent.
2. The methods defined in a prototype are invisible to child types.
   

The first problem is obvious. The explanation for the second problem is that the method in the prototype of the parent class is invisible to the subclass because only the lift function is executed and no new object is created.

Combination inheritance

Because prototype chain inheritance and borrow constructor inheritance have defects, they are generally not used independently in practice.

Combination inheritance is an inheritance method generated by leveraging the advantages of both.

The principle is to use the prototype chain to inherit the prototype attributes and methods, and use constructors to inherit the instance attributes.

The Code is as follows:

Function SuperType (name) {this. name = name; this. colors = ['red', 'Blue ', 'green'];} SuperType. prototype. sayName = function () {console. log (this. name) ;}; function SubType (name, age) {// inherits the SuperType attribute. call (this, name); this. age = age;} // Inheritance Method SubType. prototype = new SuperType (); SubType. prototype. constructor = SubType; SubType. prototype. sayAge = function () {console. log (this. age) ;}; var instance1 = new SubType ('nicholas ', 29); instance1.colors. push ('black'); console. log (instance1.colors); // ['red', 'Blue ', 'green', 'black'] instance1.sayName (); // niklasinstance1.sayage (); // 29var instance2 = new SubType ('greg ', 27); console. log (instance2.colors); // ['red', 'blue', 'green'] instance2.sayName (); // Greginstance2.sayAge (); // 27

The combination inheritance can solve the problems brought about by the above two inheritance methods, but the combination inheritance also has its own small problem, that is, it will call two super-Type constructor, through analysis, we can know that the first time the sub-type prototype is created, and the other time is within the sub-Type constructor.

Parasitic combined inheritance

The principle of parasitic combined inheritance is to inherit attributes by borrowing constructor and inherit methods by means of prototype chain Mixing, the basic idea is that you do not need to call a super-Type constructor to specify the sub-type prototype. What we need is a copy of the super-type prototype.

The Code is as follows:

Function object (o) {function F () {} F. prototype = o; return new F;} function inheritPrototype (subType, superType) {var prototype = object (superType. prototype); prototype. constructor = subType; subType. prototype = prototype;} function SuperType (name) {this. name = name; this. colors = ['red', 'Blue ', 'green'];} SuperType. prototype. sayName = function () {console. log (this. name) ;}; function SubType (name, age) {SuperType. call (this, name); this. age = age;} // key to inheritance inheritPrototype (SubType, SuperType); SubType. prototype. sayAge = function () {console. log (this. age) ;}; var instance = new SubType ('tianya ', 23); instance. sayName (); instance. sayAge ();

The parasitic combined inheritance only executes the super type once when calling the constructor, solving the small problem of the combination inheritance.

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!