Illustration of this keyword in JavaScript_javascript tips

JavaScript is a scripting language that supports advanced features such as functional programming, closures, and prototype-based inheritance. JavaScript seems to be easy to get started with at first, but as you use it more deeply, you will find that JavaScript is actually very difficult to master, and some basic concepts are confusing. Among them, the this keyword in JavaScript is a relatively confusing concept. In different scenarios, this will be transformed into different objects. There is a view that only by correctly mastering the this keyword in JavaScript can you enter the threshold of the JavaScript language. In mainstream object-oriented languages ​​(such as Java, C#, etc.), the meaning of this is clear and specific, that is, it points to the current object. Usually bound at compile time. In JavaScript, this is bound at runtime. This is the essential reason why the this keyword in JavaScript has multiple meanings.

Due to the nature of JavaScript binding at runtime, this in JavaScript can be the global object, the current object, or any object. It all depends on how the function is called. There are several ways to call functions in JavaScript: as an object method, as a function, as a constructor, and using apply or call. As the saying goes, words are not as good as words, and expressions are not as good as pictures. In order to better understand what JavaScript this points to? Let’s use a picture to explain:

I call the above picture "JavaScript this decision tree" (in non-strict mode). The following uses an example to illustrate how this picture can help us judge this:

var point = { 
 x : 0, 
 y : 0, 
 moveTo : function(x, y) { 
 this.x = this.x + x; 
 this.y = this.y + y; 
  } 
 };
 //决策树解释：point.moveTo(1,1)函数不是new进行调用，进入否决策，
 //是用dot(.)进行调用，则指向.moveTo之前的调用对象，即point
 point.moveTo(1,1); //this 绑定到当前对象,即point对象

The decision process of the point.moveTo() function in "JavaScript this decision tree" is as follows:

1) Is the point.moveTo function called using new? This is obviously not the case. Go to the "No" branch, that is, is the function called with dot(.)? ;

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

The analytical diagram illustrating what this points to in the point.moveTo function is as shown below:

For another example, look at the following code:

function func(x) { 
 this.x = x; 
 } 
func(5); //this是全局对象window，x为全局变量
 //决策树解析：func()函数是用new进行调用的么？为否，进入func()函数是用dot进行调用的么？为否，则 this指向全局对象window
 x;//x => 5

　The process of the func() function making decisions in "JavaScript this decision tree" is as follows:

1) Is the func(5) function called using new? This is obviously not the case. Go to the "No" branch, that is, is the function called with dot(.)? ;

2) The func(5) function is not called with dot(.), that is, it enters the "No" branch, that is, this here points to the global variable window, then this.x is actually window.x;

The analytical diagram illustrating what this points to in the func function is as shown below:

For the direct call as a function, let’s look at a complex example:

var point = { 
 x : 0, 
 y : 0, 
 moveTo : function(x, y) { 
 // 内部函数
 var moveX = function(x) { 
 this.x = x;//this 指向什么？window
 }; 
 // 内部函数
 var moveY = function(y) { 
 this.y = y;//this 指向什么？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. The this inside the moveX() function is determined in the "JavaScript this decision tree" The process is like this:

1) Is the moveX(1) function called using new? This is obviously not the case. Go to the "No" branch, that is, is the function called with dot(.)? ;

2) The moveX(1) function is not called with dot(.), that is, it enters the "No" branch, that is, this here points to the global variable window, then this.x is actually window.x;

Let’s look at an example of calling a constructor:

 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是一个空对象undefined
 window.x;//2

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

1) Is the call to var np=new Point(1,1) using new? This is obviously, entering the "yes" branch, that is, this points to np;

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

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

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

2) The Point(2,2) function is not called with dot(.)? If the judgment is no, it enters the "No" branch, that is, this here points to the global variable window, then this.x is actually window.x;

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

Finally, let’s take a look at an example of a function being called using 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, [10, 10]);//apply实际上为p2.moveTo(10,10)
 p2.x//10

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

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

1) Is the p2.moveTo(10,10) function called using new? This is obviously not the case. Go to the "No" branch, that is, is the function called with dot(.)? ;

2) The p2.moveTo(10,10) function is called with dot(.), that is, it enters the "yes" branch, that is, this here points to the previous object p2 in p2.moveTo(10,10). , so p2.x=10;

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

　"Function in JavaScript can be executed as an ordinary function or as a method of an object. This is the main reason why this has such rich meaning. When a function is executed, an execution environment (ExecutionContext) will be created , all the behavior of the function occurs in this execution environment. When building the execution environment, JavaScript will first create the arguments variable, which contains the parameters passed in when calling the function. Then it will create the scope chain and initialize it first. The formal parameter list of the function, the value is the corresponding value in the arguments variable. If there is no corresponding value in the arguments variable, the formal parameter is initialized to undefined. If the function contains internal functions, these internal functions are initialized. If not, continue to initialize. For the local variables defined in this function, it should be noted that these variables are initialized to undefined at this time, and their assignment operations will not be executed until the function is executed after the execution environment (ExecutionContext) is successfully created. This is very important for us to understand the role of variables in JavaScript. The domain is very important. In view of the space, we will not discuss this topic here. Finally, assign a value to this variable. As mentioned above, it will be assigned to this global object, current object, etc. according to the function calling method (up to this point). ExecutionContext) is created successfully, the function begins to execute line by line, and the required variables are read from the previously constructed execution environment (ExecutionContext) ”

.

Understanding this paragraph will be of great benefit to understanding Javascript functions.

The above is a detailed introduction to the this keyword in JavaScript. Generally, pictures are easier for everyone to understand than text. I hope this article will be helpful to everyone's learning.