JS object-oriented, prototype, call (), apply ()

Source: Internet
Author: User

I. Cause
Prototype was used that day. javascript is so confused when you open it and check a few lines. The reason is that you are not very familiar with JS object-oriented methods, So Baidu + Google finally made a small gain, write this to commemorate ^_^.
Prototype. js Code Fragment Copy code The Code is as follows: var class = {
Create: function (){
Return function (){
This. Initialize. Apply (this, arguments );
}
}
}
// The usage of class is as follows:
VaR A = Class. Create ();
A. Prototype = {
Initialize: function (v ){
This. value = V;
}
Showvalue: function (){
Alert (this. value );
}
}
VaR A = new A ('helloword! ');
A. showvalue (); // the pop-up dialog box helloword!

L what is initialize?
L what is the apply method?
L what about the arguments variable?
L why is the initialize method executed after new?
Find the answer:
Ii. js object-oriented
What is initialize?
It is just a variable that represents a method and is used as a class constructor.
Its specific functions depend on JS object-oriented support. What does JS object-oriented look like? What is the same and different from Java?
Check the Code:Copy codeThe Code is as follows: var classname = function (v ){
This. value = V;
This. getvalue = function (){
Return this. value;
}
This. setvalue = function (v ){
This. value = V;
}
}

So what are the differences between functions and classes in JS?
Actually, it is the same. classname is a function. When it appears after new, it is used as a constructor to construct objects.
For exampleCopy codeThe Code is as follows: var objectname1 = new classname ("A"); // get an object

Here, objectname1 is the object obtained after the classname constructor is executed, and this in the classname function refers to the object constructed after the new, so after objectname1, there will be an attribute and two methods. You can call them as follows:Copy codeThe Code is as follows: objectname1.setvalue (''hello '');
Alert (objectname1.getvalue (); // dialog box hello
Alert (objectname1.value); // dialog box hello

SoCopy codeCode: var objectname2 = classname ("B"); // get an object

So what does objectname2 get? It is obviously the return value of the method. Here classname is only used as a common function (although the first letter is capitalized ). However, the previously written classname does not return a value, so objectname2 will be undifinded. So who is "B" assigned? This does not produce an object, but simply executes this method. Therefore, this "B" value is assigned to the window object that calls this method. The evidence is as follows:
VaR objectname2 = classname ("B"); // get an object
Alert (window. Value); // Dialog Box B
Therefore, all functions in JS are the same, but their usage may be different (used to construct an object or execute a process ).
Next we should return to the topic. What is initialize?Copy codeThe Code is as follows: var class = {
Create: function (){
Return function (){
This. Initialize. Apply (this, arguments );
}
}
}
VaR A = Class. Create ();

This code constructs a function and copies it to A. This function isCopy codeThe Code is as follows: function (){
This. Initialize. Apply (this, arguments );
}

In addition, this method is used for constructor. When this constructor is used to construct an object, the initialize variable of the constructed object is executed in the apply () method. The purpose of apply () is described later, and initialize is continued. In this way, the initialize will be contacted when the object is initialized (the application is required for how to contact the object ).
SoCopy codeThe Code is as follows: A. Prototype = {
Initialize: function (v ){
This. value = V;
}
Showvalue: function (){
Alert (this. value );
}
}

What does that mean?
Prototype indicates a prototype. A is a function (), so a. prototype is a variable in the function, which is actually an object. If this object has any method, then the function produces an object with any method, so
VaR A = new A ('helloword! ');
A. showvalue (); // the pop-up dialog box helloword!
Therefore, object a also has the initialize method. In addition, each object constructed by object A has an initialize method. As mentioned above, constructor will be called during construction, in the constructor, initialize will call the apply method. Therefore, in new A ('helloword! . That is, an initialization method is called.
3. Call () and apply ()
Next I started to study apply (). I found a few materials on the Internet and learned about the functions of call () and apply () based on my own research. Functions are basically the same, function (). Call (object ,{},{}......) Or function (). Apply (object, […]) The function of the object is to call the funciton () Here. The difference is that the call parameter is passed to funciton from the second one, which can be listed in sequence and separated. Apply only has two parameters, and the second is an array, which stores all parameters passed to the function.
This. Initialize. Apply (this, arguments );
What does that mean?
The first this here refers to the object generated after the new call of the constructor, that is, the previous A, then the second this should of course refer to the same object. In this case, this (that is, a) calls the initialize method. The parameter is an arguments object (the array object of the parameter). Therefore, during the execution of the constructor, object A will execute the initialize method to initialize the object, so that it matches the meaning of the word "initialize.
So how are the parameters for executing the initialize method passed in?
Iv. Arguments object
This code shows everything: Copy code The Code is as follows: function test (){
Alert (typeof arguments );
For (VAR I = 0; I <arguments. length; I ++ ){
Alert (arguments [I]);
}
}
Test ("1", "2", "3 ");
Test ("A", "B ");

After execution, alert (typeof arguments); displays the object, indicating that arguments is an object. Then 1, 2, and 3 are displayed in sequence. It indicates that arguments is an array of real parameters that call the function.Copy codeThe Code is as follows: var class = {
Create: function (){
Return function (){
This. Initialize. Apply (this, arguments );
}
}
}

Arguments is the real parameter array of the constructor returned by create.
VaR A = new A ('helloword! ');
'Helloword! 'Is the real parameter array (although there is only one string), passed to the method apply, and then passed as a parameter to the initialization function initialize when initialize is called.

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.