Describes several methods for implementing inheritance in JavaScript (recommended), and details in javascript

Describes several methods for implementing inheritance in JavaScript (recommended), and details in javascript

ECMAScript only supports implementation inheritance, and its implementation inheritance mainly relies on the prototype chain.

Prototype chain

The basic idea of prototype chain is to use prototype to let one reference type inherit the attributes and methods of another reference type. Each constructor has a prototype object. The prototype object contains a pointer to the constructor, And the instance contains a pointer to the prototype object. If we make the prototype object A equal to another type B instance, then the prototype object A will have A pointer to the prototype object B, the corresponding prototype object of B stores pointer to its constructor. If the prototype object of B is another type of instance, the above relationship is still established, so that the progressive layers constitute the chain between the instance and the prototype.

 

The relationship between the instance and the constructor and the prototype is as follows:

 

Person. constructor now points to the Parent, because Child. prototype points to the Parent prototype, and the constructor of the Parent prototype object points to the Parent.

When you access an instance attribute in Read mode, you will first search for this attribute in the instance. If this attribute is not found, the instance's prototype will continue to be searched. In the integration implemented through the prototype chain, the search process continues up along the prototype chain until the end of the prototype chain is searched.

For example, call the person. getParentValue () method, 1) Search for an instance, 2) Search for Child. prototype; 3) Search for Parent. prototype; find the getParentValue () method to stop.

1. Default prototype

The prototype chain shown in the previous example is missing. All reference types inherit the Object by default, and this inheritance is also implemented through the prototype chain. Therefore, the default prototype contains an internal pointer pointing to Object. prototype, which is the root cause for all custom types to inherit default methods such as toString () and ValueOf. In other words, Object. prototype is the end of the prototype chain.

 

2. determine the relationship between the prototype and the instance

Two methods can be used to determine the relationship between the prototype and the instance. The first is to use the instanceOf operator, and the second is to use the isPrototypeOf () method.
Returns true if the constructor used in the instance instanceOf prototype chain exists.

Console. log (person instanceOf Child); // true console. log (person instanceOf Parent); // true console. log (person instanceOf Object); // true isPrototype (), as long as it is a prototype that has appeared in the prototype chain, it can be said that it is the prototype of the Instance derived from the prototype chain, therefore, true is returned. console. log (Object. prototype. isPrototypeOf (instance); // true console. log (Parent. prototype. isPrototypeOf (instance); // true console. log (Child. prototype. isPrototypeOf (instance); // true

3. Define methods with caution

The child type sometimes needs to overwrite a method of the super type, or you need to add a method that does not exist in the super type. Note: The code for adding a method to the prototype must be placed after the statement for replacing the prototype.

When getParentValue () is called through the Child instance, the redefined method is called, but the original method is called when getParentValue () is called through the Parent instance.

Note that the two methods must be defined after the Parent instance replaces the prototype.

Note that the prototype method cannot be created using the object literal when the prototype chain is inherited, because this will overwrite the prototype chain.

 

The above code just assigned the Parent instance to the Child's prototype object, and then replaced the prototype with a literal and a word surface, the Child prototype actually contains an Object instance instead of a Parent instance. Therefore, the prototype chain we imagine is cut down. there is no association between Parent and Child.

4. prototype chain problems

The prototype chain is powerful and can be used to implement inheritance. However, there are also some problems. The main problem is that the prototype attributes containing reference type values will be shared by all instances. Therefore, we define instance attributes in the constructor. However, when prototype is used to implement inheritance, the prototype object actually becomes another type of instance. So the instance attribute originally defined in the constructor is changed to the prototype attribute.

Example:

 

The Parent constructor defines a friends attribute, which is an array (reference type value ). In this way, each instance of the Parent includes its own friends attributes. After Child inherits the Parent through the prototype chain, Child. prototype also uses the friends Attribute-as if the friends attribute was defined in Child. prototype. In this way, all Child instances will share this friends attribute, so our modifications to kid1.friends will also be reflected in kid2.friends. Obviously, this is not what we want.

Another problem with the prototype chain is that when creating a child-type instance, you cannot pass parameters to a super-Type constructor without affecting all object instances. Therefore, prototype chains are rarely used independently.

Borrow Constructor

In order to solve some problems caused by the reference type value in the prototype, the constructor technology is introduced. The basic idea of this technology is to call a super-Type constructor within the sub-Type constructor.

 

Parent. call (this) calls the Parent constructor in the environment of the newly created Child instance. Call the Parent constructor in the newly created Child instance environment. In this way, on the new Child object, the kid1 and kid2 objects here execute the object initialization code defined in the Parent () function. In this way, each Child instance will have its own copy of the friends attribute.

By using constructor, you can pass parameters to the super-Type constructor In the subtype constructor.

 

To ensure that the subtype is not overwritten by the constructor of the parent class, you can add attributes of the subtype after calling the constructor of the parent class.
Constructor problems:

The problem with the constructor mode is that methods are defined in constructor and function reuse is impossible. Therefore, the constructor mode is rarely used independently.

Combination inheritance

Combination Inheritance refers to the combination of prototype chain and borrow constructor technology to take full advantage of the two. That is, the prototype chain is used to inherit the prototype attributes and methods, and the constructor is used to inherit the instance attributes.

 

The Person constructor defines two attributes: name and friends. The prototype of Person defines a method sayName (). When the Child constructor calls the Parent constructor, it passes in the name parameter, and then defines its own property age. Then, assign the Person instance to the Child prototype, and then define the sayAge () method on the prototype (). in this way, two different Child instances have their own attributes, including the attributes of the reference type, and can use the same method.
Combined inheritance avoids the defects of the prototype chain and constructor and integrates them to become the most common inheritance mode in JavaScript. In addition, instanceOf and isPropertyOf () can also recognize objects created based on combination inheritance.

Finally, there are still several modes of JS objects and inheritance that have not been written, or I have not studied deeply yet. However, I think the application of the combination mode can be easily used first. In addition, you know why the combination mode is used.

I would like to introduce several methods of JavaScript implementation inheritance (recommended). I hope it will be helpful to you!

Articles you may be interested in:

• Three methods to implement inheritance in JavaScript
• Example of JavaScript inheritance mode
• Javascript learning notes (9) prototype in javascript and Inheritance of prototype chains
• How to Use the constructor + prototype link hybrid mode based on the Inheritance Mechanism of JavaScript
• Two inheritance methods of js
• Use the call method to implement js inheritance
• We recommend that you use JavaScript to implement the best inheritance method.
• Three methods of inheritance and examples in JavaScript