Javascript Object-Oriented Programming basics: Inheritance

We can see how straightforward the concept inherited here is. "Copy prototype of a class to another class". Good, Code is cheap, and check the Code:

Function class1 (){}
Function class2 (){}
Class2.prototype = class1.prototype;
Class2.moreProperty1 = "class 2 additional string ";
Class2.moreMethod1 = function () {alert ("class 2 additional method ");}
/*
In this way, class2 has the same prototype as class1. without considering constructors, the two classes are equivalent.
Then, two additional methods were assigned to class2 through prototype. Therefore, class2 is based on class1.
Added attributes and methods to implement class inheritance.
*/

Function test (){
Var obj = new class2 ();
// JavaScript provides the instanceof operator to determine whether an object is an instance of a class.
Alert (obj instanceof class2); // true
Alert (obj instanceof class1 );//?
}

Is the result of running the code expected? On the surface, the above implementation is completely feasible. js can correctly understand and implement this inheritance relationship. obj is an instance of both class1 and class2, but in essence it is not (the purpose of our learning is to know it, but also to know it ). This understanding of js is actually based on a very simple strategy. Look at the following code, first use prototype to make class2 inherit from class1, and then repeatedly define the method in class2:

// Define class1
Function class1 (){
// Constructor
}
// Define the class1 Member
Class1.prototype = {
M1: function () {// method 1
Alert ("class1 method1 ");
}
}
// Define class2
Function class2 (){
// Constructor
}
// Let class2 inherit from class1
Class2.prototype = class1.prototype;

// Repeat the method defined for class2
Class2.prototype. method = function (){
Alert ("whose method2? Class1 or class2 ");
}
// Create two class instances
Var obj1 = new class1 ();
Var obj2 = new class2 ();

Function test (){
// Call the method methods of the two objects respectively
Obj1.method ();
Obj2.method ();
}

From the code execution results, the results of the method running in class1 and 2 are the same.

It can be seen that when the prototype of class2 is changed, the prototype of class1 also changes. Even if the prototype of class2. Therefore, class1 and class2 are only two classes with different constructors. They maintain the same member definition. Speaking of this, I believe that the readers have discovered the secret: the prototype of class1 and class2 are identical and reference the same object. In fact, we can see from this assignment statement:
// Let class2 inherit from class1
Class2.prototype = class1.prototype;
In js, except for the basic data types (numbers, strings, Boolean types, etc.), all values and function parameters are passed by reference instead of values. Therefore, the preceding statement only allows the prototype object of class2 to reference the prototype of class1, resulting in consistent class member definitions. We can also see the execution mechanism of the instanceof operator, which is to judge whether an object is a prototype instance, because the obj1 and obj2 correspond to the same prototype, therefore, the instanceof results are the same. It can be seen that using prototype reference copy to implement inheritance is not a correct method. However, when the requirements are not strict, it is also a reasonable method. The only constraint is that the coverage definition of Class Members is not allowed (this is actually a reflection of js flexibility ). In fact, we can use the reflection mechanism and prototype to implement the correct class inheritance of js:

Function class1 (){
// Constructor
}
Class1.prototype = {
Method: function (){
Alert ("method1 ");
},
Method2: function (){
Alert ("method2 ");
}
}
Function class2 (){
// Constructor
}

// Let class2 inherit from class1
For (var p in class1.prototype ){
Class2.prototype [p] = class1.prototype [p]; // use the reflection mechanism and prototype to implement inheritance
}

// Override the method defined in class1
Class2.prototype. method = function (){
Alert ("class2 new method1 ");
}

// Create two class instances
Var obj1 = new class1 ();
Var obj2 = new class2 ();

Function test (){
// Call the method methods of the two objects respectively
Obj1.method ();
Obj2.method ();
// Call the method2 method of the two objects respectively
Obj1.method2 ();
Obj2.method2 ();
}

From the running results, we can see that the repeated methods defined in obj2 already overwrite the inherited method, and the method2 method is not affected. In addition, the method in obj1 still maintains the original definition. In this way, the inheritance of classes with the correct meaning is realized. To facilitate development, you can add a common method for each class to implement class inheritance:

// Add a static method for the class. inherit indicates that the method inherits from a class.
Function. prototype. inherit = function (baseClass ){
For (var p in baseClass. prototype ){
This. prototype [p] = baseClass. prototype [p];
}
}

Function class1 (){
// Constructor
}
Class1.prototype = {
Method: function (){
Alert ("method1 ");
},
Method2: function (){
Alert ("method2 ");
}
}
Function class2 (){
// Constructor
}

// Let class2 inherit from class1
// For (var p in class1.prototype ){
// Class2.prototype [p] = class1.prototype [p]; // use the reflection mechanism and prototype to implement inheritance
//}

Class2.inherit (class1); // equivalent to the for loop commented out above

// Override the method defined in class1
Class2.prototype. method = function (){
Alert ("class2 new method1 ");
}

// Create two class instances
Var obj1 = new class1 ();
Var obj2 = new class2 ();

Function test (){
// Call the method methods of the two objects respectively
Obj1.method ();
Obj2.method ();
// Call the method2 method of the two objects respectively
Obj1.method2 ();
Obj2.method2 ();
}

The above Code makes the logic clearer and easier to understand. One disadvantage of inheritance implemented through this method is that when adding class member definitions in class2, prototype cannot be directly assigned, but its attributes can only be assigned. For example, it cannot be:
Class2.prototype = {
// Member Definition
}
But it can only be:
Class2.prototype. propertyName = someValue;
Class2.prototype. methodName = function (){
// Statement
}

It can be seen that the implementation of inheritance is still at the cost of code readability. Is there "not only the base class can be directly assigned to the property with an object, but it can also be implemented in the derived class to make the code logic clearer, is it also a js inheritance method that better reflects the characteristics of object-oriented languages? What an attractive saying is in quotation marks? continue learning.