JavaScript inheritance based on prototype chain, javascript prototype

JavaScript inheritance based on prototype chain, javascript prototype

Javascript is not an object-oriented language and does not provide traditional inheritance methods, but it provides a prototype inheritance method that uses its own prototype attributes to implement inheritance.

Prototype chain is the main method inherited in JavaScript.

The basic idea of the prototype chain is to use the prototype to let one reference type inherit the attributes and methods of another reference type.

Constructor, prototype, and instance relationships: Each constructor has a prototype object that contains a pointer to the constructor, 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 pointing to another prototype. Correspondingly, the other prototype also contains a pointer pointing to another constructor.

The basic mode for implementing the prototype chain:

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 (); alert (instance. getSuperValue (); // true

SubType inherits the SuperType, which is implemented by creating a SuperType instance and assigning the instance to SubType. prototype. The essence of implementation is to override the prototype object and change it to a new type instance. In this way, the attributes and methods that originally existed in the SuperType instance also exist with SubType. prototype. Then add a method to SubType. prototype, which inherits the attributes and methods of SuperType and adds a method.

The instance relationship in the preceding example is as follows:

Instead of using the prototype provided by SubType by default, the prototype is changed to a new original type. This new original type is a SuperType instance. There is also a pointer to the prototype that executes the SuperType. The result is the prototype in which the instance points to the SubType, and the prototype in which the SubType points to the SuperType. The getValue () method is still in SuperType. prototype, but prototype is in SubType. prototype. This is because property is an instance property, while getSuperValue () is a prototype method. Since SubType. prototype is a SuperType instance, the property is naturally located in this instance.

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

When you access an attribute in Read mode, the attribute is first searched in the instance. If this attribute is not found. The search continues. When the prototype chain is inherited, the search process can continue up along the prototype chain.

Default prototype

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

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 called.

Determine the relationship between the instance and the prototype

You can determine the relationship between the prototype and the instance in two ways:

Use the instanceof Operator

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

Because of the relationship between the prototype chain, all the above returns true.

Use the isPrototypeOf () method

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

Define methods with caution

The code for adding a method to the prototype must be placed after the statement for replacing 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 SubType of the method in the superclass. prototype. getSuperValue = function () {return false ;}; var instance = new SubType (); alert (instance. getSuperValue (); // false

In the above example, you must note that after replacing the prototype with a SuperType instance, you can define the two methods.

In addition, you cannot use this object to create a prototype literally when implementing inheritance through the prototype chain. This will rewrite the prototype chain:

Function SuperType () {this. property = true;} SuperType. prototype. getSuperValue = function () {return this. property ;}; function SubType () {this. subproperty = false;} // inherits the SuperTypeSubType. prototype = new SuperType (); // use the literal to add a new method, resulting in the previous line of code being invalid SubType. prototype = {getSubValue: function () {return this. subproperty ;}, someOtherMethod: function () {return false ;}}; var instance = new SubType (); alert (instance. getSuperValue (); // error

In the above example, the SuperType instance is assigned to the prototype, and then the prototype is replaced with an object literal. The current prototype contains an Object instance, not a SuperType instance. There is no relation between SubType and SuperType.

Prototype chain problems

As mentioned above, the prototype Property containing reference type is shared by all instances. This is why the property is 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 preceding example, the SuperType constructor defines a colors attribute, which contains an array. Each SuperType instance has its own array of colors attributes. After the SubType inherits the SuperType through the prototype chain, the SubType. prototype becomes an instance of the SuperType, so it also has its own colors attribute. However, all SubType instances share this colors attribute.

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

The above is a small part of the knowledge about the inheritance of JavaScript Based on prototype chain. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!