Deep parsing the This keyword in JavaScript programming basics

What does this in JavaScript really mean? A lot of people will tell you this is the current object. Is that understandable, right? In most cases it is true. For example, we often write JavaScript on the Web page:

<input type= "Submit" value= "Submit" onclick= "this.value= ' submitting data '"/>

This here obviously refers to the current object, that is, the submit button. Typically, we use this in a similar situation. But what is not the case?

Let's take a look at this example:

var foo = function () {
  console.log (this);
}
Foo ();
New Foo ();

If you compare the results of Foo () and new Foo (), you will find that the former does not point to Foo itself, but to the window object of the current page, which actually points to Foo. What is this for?

In fact, this involves a major feature of JavaScript, which is called "closures." The concept of closure is complex and not complex, but it is not simple enough to say one or two words. I'll delve into the most important features of this javascript in a future article. Now, what I'm going to tell you is that because of closures, the scope of JavaScript becomes very important.

The so-called scope, to put it simply, is when creating a function in what context. The value of this variable, if not specified, is the current scope of the function.

In the previous example, the Foo () function is in the global scope (here is the Window object), so the value of this is the current Window object. In the form of New Foo (), a copy of Foo () is created and operated on this copy, so this is the copy of Foo ().

This may be a bit abstract, so let's look at a practical example:

<input type= "button" id= "Abutton" value= "demo" onclick= ""/> <script type= "Text/javascript"
>
Function Demo () {
  this.value = Math.random ();
}
</script>

If you call the demo () function directly, the program will complain, because the demo function is defined in the Window object, so the owner of the demo (scope) is Window,demo This is also window. Window does not have the value attribute, so it is an error.

If we add a copy of this function to an HTML element by creating a copy of it, then his owner becomes the element, and this also refers to this element:

document.getElementById ("Abutton"). onclick = demo;

This sets the Abutton Onlick property to a copy of the demo (), which also points to Abutton.

You can even create a different copy of the function for several different HTML elements. The owner of each copy is the corresponding HTML element, each of which points to their owner, without causing confusion.

However, if you define an element's Onlick event this way:

<input type= "button" id= "Abutton" value= "Demo" onclick= "demo ()"/>

After clicking on this button, you will find that the program will also error the--this and pointed to the window!

In fact, this method does not create a function for the program, but simply refers to the function.

Look at the difference.

Use the method of creating a copy of a function:

<input type= "button" id= "Abutton" value= "demo"/> <script type=
"Text/javascript" >
var button = document.getElementById ("Abutton");
Function Demo () {
  this.value = Math.random ();
}
button.onclick= demo;
alert (Button.onclick);
</script>

The resulting output is:

Function Demo () {
  this.value = Math.random ();
}

Ways to use function references:

<input type= "button" id= "Abutton" value= "Demo" onclick= "demo ()"/> <script type=
"Text/javascript" >
var button = document.getElementById ("Abutton");
Function Demo () {
  this.value = Math.random ();
}
alert (Button.onclick);
</script>

The resulting output is:

function onclick () {
  demo ();
}

So you can see the difference. In the way the function is referenced, the onclick event simply invokes the demo () function, and the demo () function is still the window object, so this still points to window.

This begs the question: why do you need a function reference if the function copy works so well? The answer is performance. A copy of each new function is created, and the program assigns a certain amount of memory to the copy of the function. In practical applications, most functions are not necessarily called, so this part of the memory is wasted. Using the function reference, the program will only allocate memory to the function's ontology, and the reference only assigns pointers, so the efficiency is much higher. Programmer, Save the main, eh

So let's look at a better solution:

<script type= "Text/javascript" >
function Demo (obj) {
  obj.value = Math.random ();
}
</script>
<input type= "button" value= "Demo" onclick= "demo (This)"/> <input
"button" Value= "Demo" onclick= "demo (This)"/>
<input type= "button" value= "Demo" onclick= "demo (This)"/>

In this way, both efficiency and demand can be balanced.

This is the point
JavaScript is a global object, the current object, or any object, depending on how the function is invoked, because it is bound at run time. There are several ways to invoke functions in JavaScript: As an object method call, as a function call, as a constructor call, and with an apply or call invocation. As the saying goes, the table is inferior to the chart. To get a better understanding of what javascript this is pointing to? Here's a picture to explain:

Above I call the JavaScript this decision tree (not in strict mode). Here's an example to illustrate how this diagram can help us to judge this:

var point = { 
 x:0, 
 y:0, 
 moveto:function (x, y) { 
   this.x = this.x + x; 
   This.y = This.y + y; 
   } 
 };
Decision Tree Interpretation: Point.moveto (1,1) function is not called new, enter no decision,
//Is using dot (.) Is invoked, the call object that precedes the. MoveTo, point
Point.moveto (1,1), and//this bound to the current object.

The procedure for determining the Point.moveto () function in the JavaScript this decision tree is as follows:

1 is the Point.moveto function call made with new? This is obviously not, go to the "no" branch, that is, whether the function uses dot (.) Make a call? ；

2 Point.moveto function is to use dot (.) To make the call, go to the "Yes" branch, where this is pointing to the Point.moveto. Object point before;

The parse diagram of what the this point to Point.moveto function illustrates is shown in the following illustration:

For example, look at the following code:

function func (x) { 
 this.x = x; 
 } 
Func (5); This is a global object window,x for global variables
//Decision Tree parsing: is the Func () function called with new? No, is the entry to the Func () function called with dot? Is no, this points to the Global object window
x;//x => 5

The procedure for determining the Func () function in the JavaScript this decision tree is as follows:

1 func (5) function call is called with new? This is obviously not, go to the "no" branch, that is, whether the function uses dot (.) Make a call? ；

2) Func (5) function is not using dot (.) Make the call, that is, enter the "No" branch, that is, this point to the global variable window, then this.x is actually window.x;

The parse diagram of what the this point to Func function illustrates is shown in the following illustration:

For a method called directly as a function, here's a complex example:

var point = { 
 x:0, 
 y:0, 
 moveto:function (x, y) { 
   //internal function
   var MoveX = function (x) { 
   this.x = x ; What does//this point to? Window
  }; 
  Internal function
  var movey = function (y) { 
  this.y = Y;//this point to what? Window
  }; 
  MoveX (x); 
  Movey (y); 
  } 
 ; 
 Point.moveto (1,1); 
 Point.x; =>0 
 point.y;//=>0 
 x;//=>1 
 y;//=>1

The Point.moveto (1,1) function actually calls the MoveX () and Movey () functions internally, and the procedure inside the MoveX () function is determined in the JavaScript this decision tree:

1 MoveX (1) function call is called with new? This is obviously not, go to the "no" branch, that is, whether the function uses dot (.) Make a call? ；

2) MoveX (1) function is not using dot (.) Make the call, that is, enter the "No" branch, that is, this point to the global variable window, then this.x is actually window.x;

Here's a look at the example of a constructor call:

function Point (x,y) { 
  this.x = x;//This?
  This.y = y; This?
 }
var np=new point (1,1);
NP.X;//1
var p=point (2,2);
P.x;//error, p is an empty object undefined
window.x;//2

The point (1,1) function in Var np=new point (1,1) is the process of determining in the JavaScript this decision tree:

1 is the Var np=new point (1,1) call called with new? This is obviously, enter the "Yes" branch, that is, this point to NP;

2) so this.x=1, namely np.x=1;

The point (2,2) function in Var p= point (2,2) is the process of determining in the JavaScript this decision tree:

1 is the Var p= point (2,2) call called with new? This is obviously not, go to the "no" branch, that is, whether the function uses dot (.) Make a call? ；

2 point (2,2) function is not using dot (.) Make the call? Determine whether to enter the "no" branch, that is, this point to the global variable window, then this.x is actually window.x;

3) this.x=2 is window.x=2.

Finally, take a look at the example of a function called Call and apply:

function point (x, y) { 
  this.x = x; 
  This.y = y; 
  This.moveto = function (x, y) { 
    this.x = x; 
    This.y = y; 
  } 
 } 

var p1 = new Point (0, 0); 
var P2 = {x:0, y:0}; 
P1.moveTo.apply (P2, [ten]);//apply is actually P2.moveto (10,10)
P2.X//10

The process of p1.moveTo.apply (p2,[10,10]) functions in the JavaScript this decision tree is as follows:

We know that the two methods of apply and call are exceptionally powerful, allowing you to toggle the context in which the function is executed, that is, the object of this binding. P1.moveTo.apply (p2,[10,10]) is actually P2.moveto (10,10). So P2.moveto (10,10) can be interpreted as:

1) p2.moveto (10,10) function calls are called with new? This is obviously not, go to the "no" branch, that is, whether the function uses dot (.) Make a call? ；

2) P2.moveto (10,10) function is using dot (.) To make the call, go to the "Yes" branch, where this is pointing to P2.moveto (10,10). Before the object P2, so p2.x=10;

A description of the IBM Developerworks document library is very good for the process of executing the JavaScript function environment, excerpt as follows:

A function in

JavaScript can be executed as a normal function or as a method of an object, which is the main reason why this is so rich. When a function is executed, an execution environment (ExecutionContext) is created, and all the behavior of the function occurs in this execution environment, and when the execution environment is built, JavaScript first creates the arguments variable, which contains the arguments passed in when the function is called. Next, create the scope chain. Then initialize the variable, first initialize the function's formal parameter list, the value is the corresponding value in the arguments variable, and if there is no corresponding value in the arguments variable, the parameter is initialized to undefined. If the function contains intrinsic functions, these intrinsic functions are initialized. If not, continue initializing the local variables defined within the function, and note that these variables are initialized to undefined, and their assignment is performed when the execution Environment (EXECUTIONCONTEXT) is successfully created, and this is true for our understanding of JavaScript The scope of the variables in is very important, given the length, we are not here to discuss this topic. Finally, assign a value to this variable, as described earlier, to the this global object, the current object, and so on, depending on how the function is called. The execution Environment (EXECUTIONCONTEXT) of this function was successfully created, the function began to execute line by row, and the required variables were read from the previously built execution Environment (EXECUTIONCONTEXT). "
Understanding this passage is good for understanding JavaScript functions.