Illustration of this keyword in JavaScript _javascript tips

Source: Internet
Author: User
Tags ibm developerworks

JavaScript is a scripting language that supports advanced features such as functional programming, closures, and prototype based inheritance. JavaScript initially looks like it's easy to get started, but with the depth of use, you'll find that JavaScript is difficult to grasp and some basic concepts are confusing. Where the This keyword in JavaScript is a more confusing concept, in different scenarios, this will incarnate different objects. There is a view that only a proper mastery of the This keyword in JavaScript is the threshold of the language that has entered JavaScript. In the mainstream object-oriented language (such as java,c#, etc.), this meaning is clear and specific, pointing to the current object. Typically binding at compile time. In JavaScript, this is bound at run time, which is the essential reason that the This keyword in JavaScript has multiple meanings.

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 theJavaScript 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 theJavaScript 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 theJavaScript 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 theJavaScript 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 either as a normal function or as an object's method, 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.

The above is about JavaScript in the details of this keyword, the general picture than the text easier for everyone to understand, I hope this article for everyone's learning help.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.