Home  >  Article  >  Web Front-end  >  Implementation of JavaScript inheritance mechanism (to be continued)_js object-oriented

Implementation of JavaScript inheritance mechanism (to be continued)_js object-oriented

WBOY
WBOYOriginal
2016-05-16 18:27:09863browse
1. Object impersonation
Principle: The constructor uses the this keyword to assign values ​​to all properties and methods (that is, using the constructor method of class declaration).
Because the constructor is just a function, you can make the constructor of ClassA a method of ClassB and then call it. ClassB will receive the properties and methods defined in the constructor of ClassA.
For example:
ClassA and ClassB defined in the following way:
Copy code The code is as follows:

function ClassA(sColor){
this.color=sColor;
this.sayColor=function(){
alert(this.color);
};
}

function ClassB(sColor){
}

The keyword this refers to the object currently created by the constructor.
But in this method, this points to the object it belongs to. This principle uses ClassA as a regular function to establish the inheritance mechanism, rather than as a construction line number.
The inheritance mechanism can be implemented using the constructor ClassB as follows:
Copy the code The code is as follows:

function ClassB(sColor){
this.newMethod=ClassA;
this.newMethod(sColor);
delete this.newMethod;
}

This code In, (but I think it should be "put" here) ClassA is assigned the method newMethod (remember the function name is just a pointer to it). Then call this method, passing it the parameter sColor of the constructor of ClassB. The last line of code removes the reference to ClassA so that it can no longer be called in the future.
All new properties and new methods must be defined after removing the code line of the new method. Otherwise, the relevant properties and methods of the super class may be overridden:
Copy the code The code is as follows:

function ClassB(sColor,sName){
this.newMethod=classA;
this.newMethod(sColor);
delete this.newMethod;

this.name=sName;
this.sayName=function(){
alert(this.name);
};
}

Run the following example:
Copy code The code is as follows:

var objA=new ClassA("red");
var objB=new ClassB( "blue","Nicholas");
objA.sayColor();//outputs "red"
objB.sayColor();//outputs "blue"
objB.sayName(); // outputs "Nicholas"

For example, if there are two classes ClassX and ClassY, and ClassZ wants to inherit these two classes, you can use the following code:
Copy code The code is as follows:

function ClassZ(){
this.newMethod=ClassX;
this.newMethod();
delete this.newMethod;

this.newMethod=ClassY;
this.newMethod();
delete this.newMethod;
}

here There is a drawback, if ClassX and ClassY have properties or methods with the same name, ClassY has high priority because it inherits from behind. Apart from this small problem, it is easy to implement multiple inheritance mechanisms using object impersonation.
Due to the popularity of this inheritance method, the third version of ECMAScript added two new methods to the Function object, namely call() and apply().
2. call() method
The call() method is most similar to the classic object impersonation method. Its first parameter serves as the object of this. All other parameters are passed directly to the function itself. For example:
Copy code The code is as follows:

function sayColor(sPrefix,sSuffix){
alert(sPrefix this.color sSuffix);
};
var obj=new Object();
obj.color="red";
//outputs "The color is red,a very nice color indeed."
sayColor.call(obj,"The color is ",", a very nice color indeed.")

In this example, the function sayColor() is defined outside the object, and the keyword this can be referenced even if it does not belong to any object. The color property of the object's obj is equal to "red". When calling the call() method, the first parameter is obj, indicating that the value that
should be assigned to the this keyword in the sayColor() function is obj. The second and third parameters are strings. They match the parameters prefix and suffix in the sayColor() function, and finally generate the message "The color is red, a very nice color indeed."
To use this method with the object impersonation method of the inheritance mechanism, just replace the prefix Just replace the three lines of assignment, calling and deletion code:
Copy code The code is as follows:

function ClassB(sColor,sName){
//this.newMethod=classA;
//this.newMethod(sColor);
//delete this.newMethod;
Class.call(this ,sColor);

this.name=sName;
this.sayName=function(){
alert(this.name);
};
}

Here, we want the keyword this in ClassA to be equal to the newly created ClassB object, so this is the first parameter. The second parameter sColor is the only parameter for both classes.
3.apply() method
The apply() method has two parameters, the object used as this and the parameters and array to be passed to the function. For example:
Copy code The code is as follows:

function sayColor(sPrefix,sSuffix){
alert(sPrefix this.color sSuffix);
};
var obj=new Object();
obj.color="red";

//outputs "The Color is red,a very nice color indeed."
sayColor.apply(obj,new Array("The Color is ",",a very nice color indeed."));

This example Same as the previous example, except now the apply() method is called. When calling the apply() method, the first parameter is still obj, which means that the value of this keyword in sayColor() should be given as obj. The second parameter is an array composed of two strings, matching the parameters prefix and suffix of sayColor(). The generated message is still
"The Color is red, a nice color indeed."
This method is also used to replace the first three lines of code for assigning, calling and deleting the new method:
Copy code The code is as follows:

function ClassB(sColor,sName){

//this.newMethod =classA;
//this.newMethod(sColor);
//delete this.newMethod;
ClassA.apply(this,new Array(sColor));

this.name =sName;
this.sayName=function(){
alert(this.name);
};
}

Similarly, the first parameter is still is this. The second parameter is an array with only one value, color. You can pass the entire arguments object of ClassB to the apply() method as the second parameter:
Copy code The code is as follows:

function ClassB(sColor,sName){

//this.newMethod=classA;
//this.newMethod(sColor);
//delete this.newMethod ;
ClassA.apply(this,arguments);

this.name=sName;
this.sayName=function(){
alert(this.name);
} ;
}

Of course, parameter objects can only be passed if the order of parameters in the superclass is exactly the same as the order of parameters in the subclass. If not, you'll have to create a separate array with the parameters in the correct order. In addition, you can also use the call() method.
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn