Graphic javascript what does this point?

Source: Internet
Author: User
Tags variable scope ibm developerworks

Graphic javascript what does this point?

JavaScript is a scripting language that supports functional programming, closures, prototype-based inheritance, and other advanced functions. JavaScript seems to be easy to get started at the beginning, but with the deepening of usage, you will find JavaScript is actually difficult to grasp, and some basic concepts are incredible. The this keyword in JavaScript is a confusing concept. In different scenarios, this will be different objects. One idea is that only the correct understanding of the this keyword in JavaScript is a threshold for JavaScript. In mainstream object-oriented languages such as Java and C #), the meaning of this is clear and specific, that is, pointing to the current object. It is usually bound during compilation. This in JavaScript is bound at runtime, which is the essential reason for the multiple meanings of this keyword in JavaScript.

Because JavaScript is bound at runtimeThis can be a global object, current object, or any object., Which depends entirely on the function call method. Functions in JavaScript can be called in the following ways: as an object method call, as a function call, as a constructor call, and using apply or call. As the saying goes, words are not as good as tables, but tables are not. What does JavaScript this point to for a better understanding? The following is an illustration:

I call it"JavaScript this decision tree"Not in strict mode ). The following example shows how this graph helps us determine this:

 
 
  1. Var point = {
  2. X: 0,
  3. Y: 0,
  4. MoveTo: function (x, y ){
  5. This. x = this. x + x;
  6. This. y = this. y + y;
  7. }
  8. };
  9. // Decision tree explanation: the point. moveTo () function is not called by the new function,
  10. // If it is called with dot (.), it points to the call object before. moveTo, that is, the point
  11. Point. moveTo (); // this is bound to the current object, that is, the point object.

Point. moveTo) function in"JavaScript this decision tree"The process of determining is as follows:

1) is the point. moveTo function called using new? This is obviously not. Go to the "no" branch, that is, whether the function is called using dot ?;

2) The point. moveTo function is called with dot (.), that is, it enters the "yes" branch, that is, this points to the object point in point. moveTo;

The parsing diagram of the point. moveTo function's this point is shown in:

Let's look at the following code:

 
 
  1. Function func (x ){
  2. This. x = x;
  3. }
  4. Func (5); // this is the Global Object window, and x is the global variable.
  5. // Decision tree parsing: Is the func () function called with new? Is it true that the function that enters func () is called using dot? Otherwise, this points to the Global Object window.
  6. X; // x => 5

Func) function in"JavaScript this decision tree"The process of determining is as follows:

1) func (5) does function calling use new? This is obviously not. Go to the "no" branch, that is, whether the function is called using dot ?;

2) func (5) the function does not use dot (.) to call, that is, to enter the "no" branch, where this points to the global variable window, then this. x is actually a window. x;

The parsing diagram of the point this of the func function is shown in:

The following is a complex example of direct function calling:

 
 
  1. Var point = {
  2. X: 0,
  3. Y: 0,
  4. MoveTo: function (x, y ){
  5. // Internal functions
  6. Var moveX = function (x ){
  7. This. x = x; // What does this point? Window
  8. };
  9. // Internal functions
  10. Var moveY = function (y ){
  11. This. y = y; // What does this point? Window
  12. };
  13. MoveX (x );
  14. MoveY (y );
  15. }
  16. };
  17. Point. moveTo (1, 1 );
  18. Point. x; // => 0
  19. Point. y; // => 0
  20. X; // => 1
  21. Y; // => 1

The point. moveTo () function actually calls the moveX () and moveY () functions internally"JavaScript this decision tree"The process of determining is as follows:

1) Does moveX (1) Use new to call a function? This is obviously not. Go to the "no" branch, that is, whether the function is called using dot ?;

2) moveX (1) the function does not use dot (.) to call, that is, to enter the "no" branch, where this points to the global variable window, then this. x is actually a window. x;

The following is an example of a constructor call:

 
 
  1. Function Point (x, y ){
  2. This. x = x; // this?
  3. This. y = y; // this?
  4. }
  5. Var np = new Point (1, 1 );
  6. Np. x; // 1
  7. Var p = Point (2, 2 );
  8. P. x; // error, p is an empty object undefined
  9. Window. x; // 2

Point () function in var np = new Point () this in"JavaScript this decision tree"The process of determining is as follows:

1) is var np = new Point () called with new? It is obvious that the "yes" branch is entered, that is, this points to np;

2) then this. x = 1, that is, np. x = 1;

The Point () function in var p = Point () in this"JavaScript this decision tree"The process of determining is as follows:

1) var p = Point (2, 2) is a call made with new? This is obviously not. Go to the "no" branch, that is, whether the function is called using dot ?;

2) isn't the Point (2, 2) function called with dot? If it is determined to be "no", it indicates that this points to the global variable window, so this. x is actually window. x;

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

Finally, let's take a look at the call and apply call examples of the function:

 
 
  1. Function Point (x, y ){
  2. This. x = x;
  3. This. y = y;
  4. This. moveTo = function (x, y ){
  5. This. x = x;
  6. This. y = y;
  7. }
  8. }
  9.  
  10. Var p1 = new Point (0, 0 );
  11. Var p2 = {x: 0, y: 0 };
  12. P1.moveTo. apply (p2, [10, 10]); // apply is actually p2.moveTo (10, 10)
  13. P2.x // 10

P1.moveTo. apply (p2, [10, 10]) function in"JavaScript this decision tree"The process of determining is as follows:

We know that the apply and call methods are extremely powerful. They allow switching the context of function execution), that is, the objects bound to this. P1.moveTo. apply (p2, [10, 10]) is actually p2.moveTo (10, 10 ). Then p2.moveTo (10, 10) can be interpreted:

1) Does p2.moveTo (10, 10) use new to call a function? This is obviously not. Go to the "no" branch, that is, whether the function is called using dot ?;

2) The p2.moveTo () function uses dot (.) to call, enter the "yes" branch, that is, this points to p2.moveTo (10, 10. the previous object p2, so p2.x = 10;

For the JavaScript function execution environment process, the description in the IBM developerworks document library is very good. The excerpt is as follows:

"Functions in JavaScript can be executed as common functions or methods of objects, which is the main cause of this's rich meaning. When a function is executed, an execution environment ExecutionContext will be created. All the actions of the function occur in this execution environment. When the execution environment is built, JavaScript will first createargumentsVariable, which contains the parameters passed in when the function is called. Next, create a scope chain. Then initialize the variable. First, initialize the form parameter table of the function. The value isargumentsThe value corresponding to the variable, ifargumentsIf no corresponding value exists in the variable, the parameter is initializedundefined. If the function contains internal functions, initialize these internal functions. If no, continue to initialize the local variables defined in the function. Note that these variables are initializedundefinedThe value assignment operation is executed only when the execution environment ExecutionContext is created. This is very important for us to understand the variable scope in JavaScript, we will not discuss this topic here first. FinallythisVariable assignment, as described above, is assignedthisGlobal object, current object, etc. So far, the execution environment ExecutionContext of the function is created successfully, and the function starts to execute row by row. All the required variables are read from the previously created execution environment ExecutionContext ."

Understanding this section will be helpful for understanding Javascript Functions.

Related Article

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.