Simple Method of Single inheritance and multi-inheritance using JavaScript

JavaScript is essentially a functional programming language. It is a descendant of Lisp. At the same time, it adds an object-oriented programming element, giving up some obscure functional language elements.

The functional programming language can implement object-oriented programming, which is unambiguous. The Curry method can simulate classes and objects. However, JavaScript provides another method to implement OOP: Prototype inheritance.

Therefore, the implementation of object-oriented programming in JavaScript is different from the general functional programming language.

This article will introduce how to implement Single-inheritance and multi-inheritance in JavaScript.

Use prototype to implement Single inheritance:
Many JavaScript libraries provide functions to achieve single inheritance. But in fact, JavaScript itself provides prototype inheritance methods. Therefore, you do not need to provide specific methods for implementation. Simply using JavaScript code, you can implement Single inheritance.

However, the prototype inheritance method provided by JavaScript is prone to mistakes. The following shows how to implement prototype inheritance in a concise and clear manner.

Assume that MyB inherits the MyA class, the Code is as follows:

Function MyA (){

If (MyA. prototype. baseClass! = Undefined ){

MyA. prototype. baseClass. call (this );

}

...... General Code

}



Function MyB (){

If (MyB. prototype. baseClass! = Undefined ){

MyB. prototype. baseClass. call (this );

}

...... General Code

}

MyB. prototype = new MyA ();

MyB. prototype. baseClass = MyB. prototype. constructor; // use baseClass to reference the constructors of the // base class.

MyB. prototype. constructor = MyB; // restores the constructor attribute of the subclass to determine the type of the object through this attribute in the future.

Var myA = new MyA ();



Var myB = new MyB ();



In the above javascript code, I added the following code to every constructor:

If (ClassName. prototype. baseClass! = Undefined ){

ClassName. prototype. baseClass. call (this );

}

This code looks for the baseClass method in the prototype. If so, call it.

In the subsequent implementation of prototype inheritance, I created the baseClass attribute for the subclass. Its value is the constructor of the base class. Therefore, as long as you write code in my way, you can ensure that the base class constructor will be executed when the subclass constructs the instance.

Now, if the MyA class inherits the Base class, you only need to add three lines of prototype inheritance code:

MyA. prototype = new Base ();

MyA. prototype. baseClass = MyA. prototype. constructor; // use baseClass to reference the constructors of the // base class.

MyA. prototype. constructor = MyA; // restores the constructor attribute of the subclass to determine the type of the object through this attribute in the future.


Without modifying the code of the MyA class, you can run the MyA class and its subclass MyB class instances correctly.

The inheritance implemented by those JavaScript libraries requires modifying base classes such as objects and functions, which may cause conflicts. There are also some methods. Each implementation inheritance must manually modify the constructor of the subclass so that the constructor can correctly call the constructor of the base class.


The method provided above solves these problems well by writing JavaScript code.

Use Mixin to implement multi-Inheritance
JavaScript itself does not provide a multi-Inheritance Mechanism, but we can use the Mixin technique to implement multi-inheritance.

The following is the Mixin assistant method I have compiled. You can dynamically add attributes to classes and objects.

1. copyClassPrototypeProperties: copy the prototype attributes of the class.
/**

* Copy all attributes of the source class prototype to the target object. The first parameter is a boolean value, indicating whether to overwrite the attributes of the target class prototype.



*/

Function copyClassPrototypeProperties (isOverride, receivingClass, givingClass ){

If (arguments. length> 3 ){

For (var I = 3; I <arguments. length; I ++ ){

ReceivingClass. prototype [arguments [I] = givingClass. prototype [arguments [I];

}

} Else if (arguments. length = 3 ){

For (var name in givingClass. prototype ){

If (isOverride ){

ReceivingClass. prototype [name] = givingClass. prototype [name];



} Else {

// Do Not Overwrite

If (! ReceivingClass. prototype [name]) {

ReceivingClass. prototype [name] = givingClass. prototype [name];

}

}
}

} Else {

Throw "Please give 3 arguments at least! ";

}
}

2. Copy the attributes of the object in copyObjectProperties.
/*

* Copy all attributes of the source object to the target object. The first parameter is a boolean value, indicating whether to overwrite the attributes of the target object.

*/

Function copyObjectProperties (isOverride, receivingObject, givingObject ){

If (arguments. length> 3 ){

For (var I = 3; I <arguments. length; I ++ ){

Jsoningobject [arguments [I] = givingObject [arguments [I];

}

} Else if (arguments. length = 3 ){

For (var name in givingObject ){

If (isOverride ){

Jsoningobject [name] = givingObject [name];



} Else {

// Do Not Overwrite

If (! Ingingobject [name]) {

Jsoningobject [name] = givingObject [name];

}

}
}

} Else {

Throw "Please give 3 arguments at least! ";
}
}

3. Copy properties to an object
/*

* Copy the attribute to the target object. The attribute can contain any number of attributes and can be an array.



*/

Function copyProperties (target ){

For (var I = 1; I <arguments. length; I ++ ){

If (arguments [I]. constructor = Array ){

CopyArrayProperties (target, arguments [I]);

} Else {

For (var name in arguments [I]) {

Target [name] = arguments [I] [name];

}
}
}
}
/*

* Copying attributes in the array format to the target object should not be called directly.

*/

Function copyArrayProperties (target, arrayArg ){

For (var I = 0; I <arrayArg. length; I ++ ){
If (arrayArg [I]. constructor = Array ){
CopyArrayProperties (target, arrayArg [I]);

} Else {
For (var name in arrayArg [I]) {
Target [name] = arrayArg [I] [name];
}
}
}
}
PS: at present, I am planning to write a JavaScript library that provides many functions with simple code, including UI components.