Implementation of JavaScript Inheritance Mechanism (to be continued) _ js object-oriented

Source: Internet
Author: User
The implementation of the JavaScript Inheritance Mechanism will be supplemented later. 1. Object impersonating
Principle: The constructor uses the this keyword to assign values to all attributes and methods (that is, the constructor method of class Declaration ).
Because the constructor is just a function, you can make the constructor of ClassA A ClassB method and then call it. ClassB receives the attributes and methods defined in the ClassA constructor.
For example:
The following methods define ClassA and ClassB:

The Code is as follows:


Function ClassA (sColor ){
This. color = sColor;
This. sayColor = function (){
Alert (this. color );
};
}

Function ClassB (sColor ){
}


This keyword references the object Currently created by the constructor.
However, in China, this indicates the object to which this method belongs. This principle uses ClassA as a general function to establish an inheritance mechanism, rather than as the number of constructed rows.
The following uses the constructor ClassB to implement the Inheritance Mechanism:

The Code is as follows:


Function ClassB (sColor ){
This. newMethod = ClassA;
This. newMethod (sColor );
Delete this. newMethod;
}


In this Code, the ClassA assigns the newMethod (remember that the function name is just a pointer to it ). Call this method and pass it the sColor parameter of the ClassB constructor. The last line of code deletes the reference to ClassA, so that it cannot be called later.
All new attributes and new methods must be defined after the code line of the new method is deleted. Otherwise, the attributes and methods of the superclass may be overwritten:

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:

The Code is as follows:


Var objA = new ClassA ("red ");
Var objB = new ClassB ("blue", "Nicolas ");
ObjA. sayColor (); // outputs "red"
ObjB. sayColor (); // outputs "blue"
ObjB. sayName (); // outputs "Nicolas"


For example, if there are two classes ClassX and ClassY and ClassZ want to inherit these two classes, you can use the following code:

The Code is as follows:


Function ClassZ (){
This. newMethod = ClassX;
This. newMethod ();
Delete this. newMethod;

This. newMethod = ClassY;
This. newMethod ();
Delete this. newMethod;
}


There is a drawback here. If ClassX and ClassY have attributes or methods of the same name, ClassY has a high priority because it inherits from the back. In addition to this small problem, it is easy to use object impersonate multiple inheritance mechanisms.
Due to the popularity of this inheritance method, the third edition of ECMAScript adds two new methods for Function objects, namely call () and apply ().
2. call () method
The call () method is the most similar to the classic object impersonating method. Its first parameter is used as the object of this. Other parameters are directly passed to the function itself. For example:

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 attribute of object obj is equal to "red ". When calling the call () method, the first parameter is obj, meaning
The value of this keyword in the sayColor () function should be given to obj. The second and third parameters are strings. They match The prefix and suffix parameters in The sayColor () function, and finally generate The message "The color is red, a very nice color indeed ."
To use this method together with the object impersonating method of the Inheritance Mechanism, you only need to replace the values, calls, and deletion codes of the first three rows:

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 a unique parameter for both classes.
3. apply () method
The apply () method has two parameters: the object used as this and the parameters and arrays to be passed to the function. For example:

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 is the same as the previous example, but now the apply () method is called. When the apply () method is called, the first parameter is still obj, indicating that the value of this keyword in sayColor () should be given to obj. The second parameter is an array composed of two strings, which matches the prefix and suffix parameters of sayColor. The generated message is still
"The Color is red, a nice color indeed ."
This method is also used to replace the code for assigning values to, calling, and deleting new methods in the first three rows:

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 this. The second parameter is an array with only one color value. You can pass the entire arguments object of ClassB to the apply () method as the second parameter:

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 be passed only when the Parameter order in the superclass is exactly the same as that in the subclass. If not, you must create a separate array and place the parameters in the correct order. You can also use the call () method.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.