JavaScript's prototype chain-based inheritance

Javascript is not an object-oriented language and does not provide traditional inheritance methods, but it provides a way of prototype inheritance, using the prototype properties it provides to achieve inheritance.

Prototype chain is the main method of inheritance in JavaScript.

The basic idea of ​​prototype chain is: use prototypes to allow one reference type to inherit the properties and methods of another reference type.

Relationship between constructors, prototypes and instances: Each constructor has a prototype object, the prototype object contains a pointer to the constructor, and the instance contains an internal pointer to the prototype object.

If the prototype object is equal to an instance of another object, the prototype object will contain a pointer to another prototype, and accordingly, the other prototype also contains a pointer to another constructor.

Basic mode of implementing prototype chain:

 function SuperType() {this.property = true;}SuperType.prototype.getSuperValue = function () {return this.property;};function SubType() {this.subproperty = false;}// Inherit SuperTypeSubType.prototype = new SuperType();SubType.prototype.getSubValue = function () {return this.subproperty;};var instance = new SubType();alert(instance.getSuperValue()); // true

SubType inherits SuperType, which is achieved by creating an instance of SuperType and assigning the instance to SubType.prototype. The essence of implementation is to rewrite the prototype object and replace it with an instance of a new type. In this way, the properties and methods that originally exist in the SuperType instance also exist in SubType.prototype. Then add a method to SubType.prototype, which adds another method based on inheriting the properties and methods of SuperType.

The instance relationship in the above example is expressed as follows:

The above does not use the prototype provided by SubType by default, but instead replace it with a new prototype; this new prototype is an instance of SuperType. There is also a pointer to the prototype that executes SuperType inside the new prototype. As a result, the instance points to the prototype of SubType, which points to the prototype of SuperType. The getValue() method is still in SuperType.prototype, but the prototype is in SubType.prototype. This is because property is an instance property, and getSuperValue() is a prototype method. Since SubType.prototype is now an instance of SuperType, property is naturally located in that instance.

Note: instance.constructor now points to SuperType, because the prototype of SubType points to another object - SuperType's prototype, and the constructor attribute of this prototype object points to SuperType.

When accessing an attribute in read mode, the instance is first searched for that attribute. If the property is not found. Then the search for the prototype of the instance will continue. When inheritance is achieved through the prototype chain, the search process can continue to move upward along the prototype chain.

Default prototype

All reference types inherit Object by default, and this inheritance is also implemented through the prototype chain. The default prototype of all functions is an instance of Object. Therefore, the default prototype will contain an internal pointer to Object.prototype. This is why custom types will inherit methods such as toString(), valueOf(), etc.

Complete prototype chain:

In the above inheritance system, SubType inherits SuperType, and SuperType inherits Object. When instance.toString() is called, the method saved in Object.prototype is actually called.

Determine the relationship between instance and prototype

There are two ways to determine the relationship between a prototype and an instance:

Use instanceof operator

 alert(instance instanceof Object); alert(instance instanceof SuperType); alert(instance instanceof SubType);

Due to the relationship between the prototype chain, all the above returns true.

Use isPrototypeOf() method

 alert(Object.prototype.isPrototypeOf(instance)); alert(SuperType.prototype.isPrototypeOf(instance)); alert(SubType.prototype.isPrototypeOf(instance)); alert(SubType.prototype.isPrototypeOf(instance));

Define the method carefully

The code to add methods to the prototype must be placed after the statement that replaces the prototype.

 function SuperType() {this.property = true;}SuperType.prototype.getSuperValue = function () {return this.property;};function SubType() {this.subproperty = false;}SuperType.prototype = new SuperType();// Add method SubType.prototype.getSubValue = function () {return this.subproperty;};// Overwrite the method SubType.prototype.getSuperValue = function () {return this.subproperty;};// Overwrite the method SubType.prototype.getSuperValue = function () {return false;};var instance = new SubType();alert(instance.getSuperValue()); // false

In the example above, it must be noted that after replacing the prototype with the instance of SuperType, then define those two methods.

In addition, when inheriting through the prototype chain, you cannot use the object literal to create a prototype method. Because doing so will rewrite the prototype chain:

 function SuperType() {this.property = true;}SuperType.prototype.getSuperValue = function () {return this.property;};function SubType() {this.subproperty = false;}// Inherit SuperTypeSubType.prototype = new SuperType();// Add a new method using literals, resulting in the previous line of code invalid SubType.prototype = {getSubValue :function() {return this.subproperty;},someOtherMethod: function () {return false;}};var instance = new SubType();alert(instance.getSuperValue()); // error

The above example assigns the instance of SuperType to the prototype, and then replaces the prototype with an object literal. The current prototype contains an instance of Object, not an instance of SuperType, and there is no relationship between SubType and SuperType.

Prototype chain problem

As mentioned earlier, the prototype attributes containing reference types are shared by all instances; this is why attributes should be defined in the constructor rather than in the prototype object.

 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", "black"var instance2 = new SubType();alert(instance2.colors); // "red", "blue", "green", "black"

In the example above, a colors property is defined in the SuperType constructor, which contains an array, and each instance of SuperType will have a colors property that contains its own array. After SubType inherits SuperType through the prototype chain, SubType.prototype becomes an instance of SuperType, so it also has its own colors attribute. However, all instances of SubType share this one colors property.

Another problem is that there is no way to pass parameters to the superclass constructor without affecting all object instances.

The above is the relevant knowledge of JavaScript based on prototype chain inheritance that the editor introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!