Rough exploration of the JavaScript inheritance mode and javascript inheritance

Rough exploration of the JavaScript inheritance mode and javascript inheritance

In the real sense, Javascript is not an object-oriented language and does not provide traditional inheritance methods, but it provides a prototype inheritance method, use the prototype Attributes provided by Alibaba Cloud to implement inheritance. Javascript prototype inheritance is a theme that has been ruined, but I have never fully understood this problem, today, I spent some time reading several methods about prototype implementation inheritance in Javascript mode. Next I will talk about some simple inheritance methods in Javascript. If you have different opinions, welcome and suggestions.

The most basic prototype chain inheritance will not be repeated here, mainly about other inheritance modes.

1. inherit from Constructors

Function Father (name) {this. name = name;} function Son (name) {Father. call (this, name); // call the super-Type constructor this in the Child type. age = 15;} var me = new Son ("Su ");

Benefit: You can pass the name attribute in the parameter for the child type.

Disadvantages: 1. methods are defined in constructors and cannot be reused. 2. The methods defined in the hyper-type prototype are invisible to child types.

2. Combined inheritance (Integrated prototype chain and constructor)

// Super-Type constructor function Father (name) {this. name = name; this. famMember = [];} // prototype of the super-Type constructor Father. prototype. sayName = function () {alert (this. name) ;}// subtype constructor function Son (name, age) {Father. call (this, name); // constructor method this. age = age;} Son. prototype = new Father (); // rewrite the child-type prototype object Son. prototype. constructor = Son; // rewrite the constructor attribute to point to the child type Son. prototype. sayAge = function () {alert (this. age);} // rewrite the prototype object and add the method var me = new Son ("Su", 15); me. famMember. push ("dad", "mom"); // sub-type can call the method var he = new Son ("Li", 14) in the super-Type constructor; alert (he. famMember); // []

Benefit: Different subclasses can have their own attributes or use the same method.

Disadvantage: This method requires two super-Type constructor calls. Attribute methods with the same name will be overwritten once.

3. Original Type inheritance (similar to Object. create ())

Function object (o) {function F () {} F. prototype = o; return new F () ;}var obj ={}; // input the obj object as the prototype of the new object. Var me = object (obj );

To use this method to inherit from a prototype object, an object must be used as the prototype object. Therefore, all the property methods that inherit its subtype are shared.

ES5 standardizes the original type inheritance by adding the Object. creatr () method.

4. Parasitic inheritance (you can set the original type inheritance of the private method)

Function object (o) {function F () {} F. prototype = o; return new F () ;}var obj ={}; // input the obj object as the prototype of the new object. Function creObj (o) {var clone = object (obj); clone. sayHi = function () {alert ("Hi") ;}; return clone;} var me = creObj (obj );

Benefit: This method makes up for the defect that the original type inherits only public property methods, so that the child type can have private property methods.

5. Parasitic combined inheritance

Function inherit (father, son) {var pro = Object (father. prototype); // create a copy of the super-type prototype object pro. constructor = son; son. prototype = pro; // use a copy as a prototype object of the Child type}

This method is used to compensate for the problem of overwriting attribute methods in combination inheritance.

Use code instead of Son. prototype = new Father (); In combination inheritance. In this way, you only need to call the parent Type constructor once to avoid unnecessary attribute methods and keep the prototype chain unchanged. This is an ideal method for inheriting the reference type.

We will give you a rough introduction to the js inheritance mode. I believe it will be helpful to you. For more information, please stay tuned to the website of.

Articles you may be interested in:

• The most common inheritance modes in javascript
• Functional inheritance mode from javascript: the good parts
• Basic explanation of JavaScript inheritance (prototype chain, borrow constructor, hybrid mode, original type inheritance, parasitic inheritance, and parasitic combined inheritance)
• Learning JavaScript design patterns: class inheritance"
• Summary of six modes inherited by javascript
• Learning JavaScript design patterns (inheritance)