JavaScript is essentially a functional programming language, a descendant of Lisp, and adds elements of object-oriented programming, giving up some of the elements of a functional language that are difficult to understand.
The functional programming language can realize object-oriented programming, this is no doubt, Curry method can realize to the class and object simulation. But JavaScript provides another way to implement OOP: prototype inheritance.
Therefore, JavaScript implementation of object-oriented programming and general functional programming language is still different.
In this article I will give you a description of how JavaScript implements single inheritance and multiple inheritance.
To implement a single inheritance with a prototype:
There are a number of JavaScript libraries that provide functions to help implement single inheritance. In practice, however, JavaScript itself provides a way to prototype inheritance. Therefore, there is no need to provide a specific method to implement, simply using JavaScript code can implement single inheritance.
However, JavaScript provides a prototype inheritance method that makes it easy to make mistakes, and I'll show you how to implement prototype inheritance succinctly and clearly.
Suppose Myb inherits the Mya class, then 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;//uses the constructor function of the BaseClass reference//base class.
The constructor property of the myb.prototype.constructor=myb;//recovery subclass is used for future use of this property to convict///break the type of object.
var mya=new myA ();
var myb=new myB ();
In the JavaScript code above, I've added such a piece of code to each constructor:
if (classname.prototype.baseclass!==undefined) {
ClassName.prototype.baseClass.call (this);
}
This code looks for the BaseClass method in the prototype and, if so, calls it.
In the subsequent implementation of the prototype inheritance, I created the BaseClass property for the subclass, whose value is the constructor of the base class. Therefore, as long as you follow my way to write code, you can guarantee that the constructor of the base class is executed when the subclass constructs the instance.
Now, if the Mya class inherits the base class again, you just need to add 3 lines of prototype inheritance code:
Mya.prototype=new Base ();
Mya.prototype.baseclass= mya.prototype.constructor;//uses the constructor function of the BaseClass reference//base class.
The constructor property of the mya.prototype.constructor= mya;//recovery subclass is used for future types of the object with this attribute.
There is no need to modify the code for the Mya class itself, and instances of the Mya class and its subclasses MYB classes can be correctly executed.
Those JavaScript library implementation inheritance, need to modify object,function and other base classes, easy to cause conflict. There are also methods, every time you implement inheritance, that you must manually modify the constructor of the subclass so that the constructor can call the constructor of the base class correctly.
The method provided above solves these problems by writing JavaScript code.
Implement multiple inheritance with mixin (mixed)
JavaScript itself does not provide multiple inheritance mechanisms, but we can use mixin (mixed) technique to achieve multiple inheritance effects.
Here's the Mixin helper method I wrote to dynamically add properties to classes and objects.
1,copyclassprototypeproperties The prototype properties of a replicated class
/**
* Copy all attributes on the source class prototype to the target object, and the first argument is a Boolean value that indicates whether to overwrite the properties of the target class's 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,copyobjectproperties The properties of a replicated object
/*
* Copy all properties of the source object to the target object, and the first argument is a Boolean value that indicates whether to overwrite the properties of the target object
*/
function Copyobjectproperties (isoverride,receivingobject,givingobject) {
if (arguments.length>3) {
for (Var i=3;i<arguments.length;i++) {
Receivingobject[arguments[i]]=givingobject[arguments[i]];
}
}else if (arguments.length==3) {
for (var name in Givingobject) {
if (isoverride) {
Receivingobject[name]=givingobject[name];
}else{
Do not overwrite
if (!receivingobject[name]) {
Receivingobject[name]=givingobject[name];
}
}
}
}else{
Throw "Please give 3 arguments at least!";
}
}
3,copyproperties Copy Properties to Object
/*
* Copy attributes to the target object, attributes can have any number of them, 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];
}
}
}
}
/*
* Copy the array format attributes to the target object, the user should not call this method 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: Right now I'm going to write a JavaScript library that provides a lot of functionality, including UI components, with simple code.
