This and arguments

This is an important concept in object-oriented language. In large languages such as Java and C #, this is fixed to the current object at runtime. However, in Javascript, due to the dynamic nature of JavaScript (interpretation and execution, there are also simple pre-compilation processes), the point of this is determined at runtime. This feature brings us confusion while also bringing programming freedom and flexibility. Combined with the apply (CALL) method, JS can become exceptionally powerful.

2. This variable
In JavaScript, this usually points to the function we are executing, or to the object to which the function belongs (runtime ). When we define the function dosomething () in the page, its owner is the page, or the window object (or Global Object) in JavaScript ). For an onclick attribute, it is owned by the HTML element to which it belongs. This should point to this HTML element.

2.1 this variation in several common scenarios

Function example
Function dosomething ()
{
Alert (this. Navigator); // appcodename
This. value = "I am from the object constructor ";
This. style. backgroundcolor = "#000000 ";
}
1. When (a) is directly called as a common function, this points to the window object.

2. (B) when triggered as a control event

1) inline event registration. Write the event directly in HTMLCode(<Element

Onclick = "dosomething ()">). This points to the window object.

2) traditional event registration (DHTML mode ).
Such as element. onclick = dosomething; this points to the element object.

3) <element onclick = "dosomething (this)"> as a parameter, you can point

3. When (c) is used as an object, this points to the current object. Shape: New dosomething ();
4. (d) when the apply or call method is used, this points to the passed object.

Shape: var OBJ ={}; dosomething. Apply (OBJ, new array ("nothing"); // thisobj
2.2 this points to analysis

1 Scenario.
In the case of direct calling, the owner of dosomething Runtime is the window object, so this points to the window
Figure:

Figure 1: Scenario

2. Scenario B.
1) traditional event registration
When we want to point this in the function to the current htmlelement, we can write
Element. onclick = dosomething;
The dosomething reference (Address) is assigned to the onclick attribute of the element (which becomes a function ). In this case
The owner of dosomething becomes an element, and this points to an element.

Figure:

Figure 2: Scenario B traditional event registration

This can be pointed to correctly when you add events in batches.

Figure:

Figure 3: traditonal event registration

2) inline event registration
<Element onclick = "dosomething ()">
Figure:

Figure 4: inline event registration in Scenario B

The difference between the two registration methods is:
Element. onclick = dosomething;
Alert (element. onclick)
You can get
Function dosomething (){
Alert (this. Navigator); // appcodename
This. value = "I am from the object constructor ";
This. style. backgroundcolor = "#000000 ";
}
The keyword this is displayed in the onclick function and points to the HTML element.

If
<Element onclick = "dosomething ()">
Al ERT (element. onclick)

You can get:
Function onclick (){
Dosomething ();
}

This is just a call to the dosomething () function, while the owner of doshomething is window. Therefore, this in dosomething points to the window object (too long .......).

3. Scenario C
I don't know much about the specific internal details. I don't know if I can understand it like this.
New dosomething (.....)
Equivalent
VaR tempobj ={}; dosomething. Apply (OBJ, new array ());
In this way, tempobj can get the attributes and methods defined in dosomething, but the-_-cannot be obtained for the attribute methods on dosomething. Prototype -_-!!

4 d scenario
Don't understand .....

Finished
Not professional, relatively simple, can't think of a few proprietary terms, depressed ~

PS 1: A lot of content is copied (*_*!), I am a little skeptical about the expression in the figure. The copy of function is written multiple times on the graph. It is literally a copy of the function object. I think it is actually a reference copy, and it is impossible to copy the object. If so, an object is copied every time an event is added. This is obviously inappropriate.

PS 2: This is determined at runtime. We often encounter a problem. When an event is added to a DOM object, we want this to point to a specified object, rather than the DOM object itself, as shown in the following example.
<Input type = "button" id = 'btn '/>
<Script language = "JavaScript"> function btnobj (ID)
{
This. Disabled = true;
This. BTN = Document. getelementbyid (ID );
/*
This. BTN. onclick = btnonclick;
If we do this, this will point to the DOM object, and an error will be reported during the btnonclick execution process.
Because Dom BTN does not have a BTN attribute
*/
// This method can solve this problem [in some cases, tempthis = this form can be used]
This. BTN. onclick = passhandler (this, btnonclick);} function btnonclick ()
{

// If this is a DOM object, an error is reported because the BTN attribute is not available.
This. BTN. Disabled = This. Disabled;
}

Function passhandler (OBJ, fun, ARG)
{
Return function (){
// If (! Arg) {var Arg = [];}
Return fun. Apply (OBJ, (ARG? Arg: []);
}
}

New btnobj ("BTN ");
</SCRIPT>

 

Arguments attributes

Returns an arguments object for the currently executed function object.

Function. Arguments

The function parameter is the name of the currently executed function, which can be omitted.

Description

The arguments attribute allows the function to process variable numbers of parameters. The Length attribute of the arguments object contains the number of parameters passed to the function. For a single parameter contained in an arguments object, the access method is the same as the access method of the parameter contained in the array.

Example

The following example illustrates the usage of the arguments attribute:

Function argtest () {var I, S, numargs = arguments. length; S = numargs; If (numargs <2) Arguments attributes

Returns an arguments object for the currently executed function object.

Function. Arguments

The function parameter is the name of the currently executed function, which can be omitted.

Description

The arguments attribute allows the function to process variable numbers of parameters. The Length attribute of the arguments object contains the number of parameters passed to the function. For a single parameter contained in an arguments object, the access method is the same as the access method of the parameter contained in the array.

Example

The following example illustrates the usage of the arguments attribute:

Function argtest () {var I, S, numargs = arguments. length; S = numargs; If (numargs <2)

In the example column

<Script language = "JavaScript">
/**//*
* Demonstrate the usage of arguments and how to obtain real parameters and number of shapes
*/
Function argtest (A, B, C, D ){
VaR numargs = arguments. length; // obtain the value of the passed parameter.
VaR expargs = argtest. length; // obtain the value of the expected parameter.
Alert ("the number of real parameters is:" + numargs)
Alert ("the number of shapes is:" + expargs)

Alert (arguments [0])
Alert (argtest [0]) // undefined does not have this usage
}
// Argtest (1, 2)
// Argtest (1, 2, 3, 4, 5)

/**//*
* Arguments is not an array (array class)
*/

Array. Prototype. selfvalue = 1;
Function testaguments (){
Alert ("arguments. selfvalue =" + arguments. selfvalue );
}
// Alert ("array. sefvalue =" + new array (). selfvalue );
// Testaguments ();