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

Source: Internet
Author: User
First, the cause
That day to Prototype.js opened to see, only to see a few lines on the full head fog, the reason is not very familiar with the object-oriented JS, so Baidu +google a handful, finally count small have harvest, write this commemorative ^_^.
Prototype.js Code Fragment
Copy Code code as follows:

var Class = {
Create:function () {
return function () {
This.initialize.apply (this, arguments);
}
}
}
Class uses the following method
var A = Class.create ();
A. prototype={
Initialize:function (v) {
this. Value=v;
}
Showvalue:function () {
alert (this.value);
}
}
var a = new A (' helloword! ');
A. Showvalue ()//Popup dialog box helloword!

L What is initialize?
l What does the Apply method do?
L arguments variable?
L Why does new a follow the Initialize method?
Find the Answer:
Second, JS object-oriented
What is initialize?
is just a variable that represents a method that uses the constructor of a class.
Its specific functions rely on JS object-oriented support, then JS object-oriented What is the appearance of that? What is the same and different from Java?
Look at the code:
Copy Code code as follows:

var ClassName = function (v) {
This.value=v;
This.getvalue=function () {
return this.value;
}
This.setvalue=function (v) {
This.value=v;
}
}

So what is the difference between the functions and classes in JS?
In fact, ClassName is a function that constructs an object as a constructor when it appears behind new.
Such as
Copy Code code as follows:

var objectName1 = new ClassName ("a");//Get an Object

Where objectName1 is the object that is obtained after the execution of the ClassName constructor, and in the ClassName function, this refers to the object that is constructed after new, so objectName1 is followed by a property and two methods. You can call them by doing this:
Copy Code code as follows:

Objectname1.setvalue (' Hello ');
Alert (Objectname1.getvalue ());//dialog box Hello
alert (objectname1.value);//dialog box Hello

So
Copy Code code as follows:

var objectName2 = ClassName ("b");//Get an Object

So what does ObjectName2 get? Obviously the return value of the method, where classname only serves as a normal function (although the first letter is capitalized). But there was no return value in the previously written classname, so objectName2 would be undifinded then "B" to whom? This does not produce an object, but simply executes the method, so this "B" assignment is given to the object window that invokes this method, and the evidence is as follows:
var objectName2 = ClassName ("b");//Get an Object
alert (window.value);//dialog box B
So all functions in JS are the same, but the purpose may be different (as a construction object or a process).
Now it's time to go back to the subject. Initialize what?
Copy Code code as follows:

var Class = {
Create:function () {
return function () {
This.initialize.apply (this, arguments);
}
}
}
var A = Class.create ();

This code constructs a function that is copied to a, which is
Copy Code code as follows:

function () {
This.initialize.apply (this, arguments);
}

And the following method is used to do the constructor. When the constructor is used to construct the object, the initialize variable of the constructed object is executed with the Apply () method, followed by the use of the Apply (), and continue to say initialize. This will contact the initialize when initializing the object (how to contact it depends on the apply).
So
Copy Code code as follows:

a.prototype={
Initialize:function (v) {
this. Value=v;
}
Showvalue:function () {
alert (this.value);
}
}

What does it mean?
Prototype is the meaning of "archetype". A is a function (), then A. Prototype, a variable in a function, is actually an object. This object has what method, then the object that function produces has what method, so
var a = new A (' helloword! ');
A. Showvalue ()//Popup dialog box helloword!
So a object also has a initialize method, and not only that, every object that has a construct has a initialize method, and in the preceding section, the constructor is called, and the constructor allows the initialize to invoke the Apply method. So in new A (' helloword! ') When initialize go back and call the Apply method. This is the invocation of an initialization method.
third, call () and apply ()
The following begins the study of apply (), looking for several materials on the Internet, and combining their own research, understand the call () and apply () function. Functions are basically the same, function (). Call (object,{},{} ...) or function (). Apply (object,[...]) The function is object invoke here Funciton (), the difference is that the call parameter from the second start is passed to the Funciton, can be listed in sequence with "," separated. The apply has only two parameters, and the second is an array that stores all the arguments passed to the function.
This.initialize.apply (this, arguments);
What is the meaning?
The first this here refers to the object that is generated after invoking the constructor with new, that is, the previous a, then the second this, of course, should refer to the same object. That's the phrase this (i.e. a) calls the Initialize method, the argument is the arguments object (an array object of the parameter), so when the constructor executes, object a executes the Initialize method to initialize, and so the word "initialize "The meaning is right on.
So how do the parameters of the Initialize method pass in?
Iv. Arguments Objects
This piece of code can explain everything:
Copy Code code 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), an object is displayed, indicating that arguments is a target. Then they will play 1, 2, 3 in turn. Description arguments is the real parameter group that invokes the function.
Copy Code code as follows:

var Class = {
Create:function () {
return function () {
This.initialize.apply (this, arguments);
}
}
}

Arguments is the real parameter group of the constructor returned by create, then the
var a = new A (' helloword! ');
The time ' helloword! ' Is the real argument group (although there is only one string) passed to the method apply and then passed as a parameter to the initialization function initialize when the Initialize is invoked.

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.