Summary of self and this usage in javascript_javascript skills-JS Tutorial-php.cn

Summary of self and this usage in javascript_javascript skills

WBOY

Release： 2016-05-16 17:01:15

Original

1187 people have browsed it

1. Cause
I used prototype.js that day, so I opened it and took a look. I was confused after just reading a few lines. The reason was that I was not very familiar with the object-oriented nature of js, so I searched on Baidu and Google After a while, I finally gained a little bit, so I write this to commemorate it ^_^.
prototype.js code snippet

The code is as follows:
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
// Class is used 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();//Pop up the dialog box helloWord!

l What is initialize?
l What does the apply method do?
What about the arguments variable?
l Why is the initialize method executed after new A?
Find the answer:

2. Object-oriented Js
What is initialize?
It is just a variable, representing a method, and its purpose is the constructor of a class.
Its specific functions are supported by the object-oriented nature of js. So what does the object-oriented nature of js look like? What are the similarities and differences with java?
Look at the code:

The code is as follows:

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 is the difference between functions and classes in JS?
In fact, it is the same. ClassName is a function. When it appears after new, it is used as a constructor to construct the object.
as

The code is as follows:
var objectName1 = new ClassName("a");//Get an object

Among them, objectName1 is the object obtained after executing the ClassName constructor, and this in the ClassName function refers to the object constructed after new, so objectName1 will have one attribute and two methods. They can be called like this:

The code is as follows:
objectName1.setValue(''hello'');
alert(objectName1.getValue());//Dialog hello
alert(objectName1.value);//Dialogue box hello

Then

The code is as follows:
var objectName2 = ClassName("b");//Get an object

What does objectName2 get in this way? Obviously it is the return value of the method. Here ClassName is just used as an ordinary function (although the first letter is capitalized). But there is no return value in the previously written ClassName, so objectName2 will be undifinded. So who is "b" assigned to? An object is not generated here, but this method is simply executed, so this "b" is assigned to the object window that calls this method. The evidence is as follows:
var objectName2 = ClassName("b");//get An object
alert(window.value); //Dialog b
So all functions in JS are the same, but their uses may be different (used to construct objects or execute a process).
It’s time to return to the topic. What does initialize do?

The code is as follows:

Copy code The code is as follows:

var Class = { 
 create: function() { 
                                                                                                                                              ();

This code constructs a function and copies it to A. This function is 

The code is as follows:

Copy code

The code is as follows:function() { this.initialize.apply(this , arguments); }

And this latter method is used as a constructor. When using this constructor to construct an object, the initialize variable of the constructed object will execute the apply() method. The purpose of apply() will be discussed later, and we will continue to talk about initialize. In this way, initialize will be contacted when initializing the object (how to contact depends on apply).
Then

The code is as follows:

Copy codeThe code is as follows:

A.prototype={ 
 initialize:function(v){ 
 this .value=v; 
 } 
 showValue:function(){ 
 alert(this.value); 
 } 
}

mean?
Prototype means "prototype". A is a function(), then A. prototype is a variable in the function, which is actually an object. Whatever methods this object has, then the objects generated by the function will have those methods, so
var a = new A('helloWord!');
a. showValue();//Pop up the dialog box helloWord!
So object a will also have an initialize method. Not only that, every object constructed by A will have an initialize method. As mentioned before, the constructor will be called during construction, and initialize will be called in the constructor. Call the apply method, so initialize goes back to call the apply method when new A('helloWord!'). This is to call an initialization method.

3. call() and apply() Let’s start to study apply(). I found some information on the Internet and combined it with my own research to understand call() and apply( ) function. The functions are basically the same. The function of function().call(object,{},{}...) or function().apply (object,[...]) is that the object object calls the funciton() here. The difference is The call parameters are passed to funciton starting from the second one, and can be listed in sequence separated by ",". Apply only has two parameters. The second one is an array that stores all the parameters passed to the function.
this.initialize.apply(this , arguments); What does
mean?
The first this here refers to the object generated after calling the constructor with new, which is the previous a, so of course the second this should also refer to the same object. Then this sentence is that this (that is, a) calls the initialize method, and the parameter is the arguments object (array object of parameters), so when the constructor is executed, the object a will execute the initialize method to initialize, so that it is consistent with the word " initialize" means the right thing.
So how are the parameters for executing the initialize method passed in?

4. Arguments object
This code can explain everything:

The code is as follows:

Copy codeThe code is as follows:

function test(){ 
 alert(typeof arguments); 
 for(var i=0; i alert(arguments[i]); 
 } 
} 
test ("1","2","3"); 
test("a","b");

After execution alert(typeof arguments); will display object and description arguments are objects. Then 1, 2, and 3 will be played in sequence. Description arguments is the actual parameter group of the calling function.
The code is as follows:

Copy code The code is as follows:

var Class = { 
 create: function() { 
                                                                                                                                        arguments is the actual parameter group of the constructor returned by create, then when 
var a = new A('helloWord!'); 
 'helloWord!' is the actual parameter group (although there is only one string), Passed to the method apply, and then passed as a parameter to the initialization function initialize when calling initialize. 