A brief discussion on this in javascript

What is this of js? Regarding this thing, there are too many explanations in the blog park. However, after reading it, I feel that the explanation of this is a bit complicated. Therefore, I will give this a simple and easy-to-understand definition.

This is actually a object of js. As for what object it is? It's very simple. This object is: whoever calls it points to whoever calls it.

Regarding this point, in fact, the articles in the Blog Park have already explained a lot, and some articles have also touched on the point. However, their explanations are still a bit vague. Here, I will explain it to you. Based on the results of a few simple controlled experiments, everyone should be very clear.

I hope you can repeat the following experiment based on my code.

First, let’s look at the following code:

//创建一个局部对象a
var a = {
 user:'小东',
 getName:function(){
  return this.user;//返回当前对象的user属性值
 }
}
//调用a的getName方法
alert(a.getName());

What will the above code output? Yes, the alert here is... Xiaodong... It's very simple. This is called this inside the object a. It must be the object a calling this, so according to...・・Whoever calls this will point to the definition・・・・・・・・・・・, then this here points to the a object.

Next, we add another line to the above code:

//创建一个局部对象a
var a = {
 user:'小东',
 getName:function(){
  return this.user;//返回当前对象的user属性值
 }
}
//调用a的getName方法
alert(a.getName());
//把局部对象的属性函数赋值给外面的变量out
var out = a.getName;
//调用out函数
alert(out());

According to the above experimental results, we know to call a.getName directly The output is Xiaodong, right? So, after we assign the attribute function a.getName to the out variable, what will be output when we call out again? The result is: undefined. Why is it undefined? Please think about this for a moment. If you understand why the output here is undefined, then I think you have a clear understanding of this. However, if you are interested in this article, you can still continue reading.

Here, I will not explain why the getName function that references a object from the outside cannot get the value inside the a object. Let’s turn a corner and look at the following code ( In fact, it is similar to the above code, haha):

//创建一个局部对象a
var a = {
 user:'小东',
 getName:function(){
 return 1;//这里我们不返回this，而是返回1
}
}
//调用a的getName方法
alert(a.getName());
//把局部对象的属性函数赋值给外面的变量out
var out = a.getName;
//调用out函数
alert(out());

The above code is very simple, here, we do not return in the getName attribute function of the a object a object, but returns...1..., then, if you call the out function at this moment, what do you think will be output? That’s right, what you get is no longer...undefined・・・・, but a real number・・・・1・・・・・. That's weird, isn't it? When the a.getName function returns the user attribute in the a object, when we use out to refer to the a.getName function, we get an undefined result, and when the a.getName function returns 1, we use Can out reference the a.getName function but get the contents of a.getName? What's going on?

The reason is very simple. When we call the external global variable out, this points to the object that should be out, not the a object, and who is the object of out? We should know that the object of the variable declared by js globally is window object. Since when calling out, this points to window, then we should write window.user for this.user in function out=a.getName=function(){return this.user;}, right? But, at this moment, is there a window.user attribute value in the global variable? no? Since there is no attribute value of window.user, then our alert(window.user) must be undefined. To prove this, let’s do the following experiment:

//创建一个局部对象a
var a = {
 user:'小东',
 getName:function(){
  return this.user;//返回当前对象的user属性值
 }
}
//调用a的getName方法
alert(a.getName());
//把局部对象的属性函数赋值给外面的变量out
var out = a.getName;
//我们增加一个window.user的全局属性，看看再次调用out函数会输出什么
var window.user='window"s username';
//调用out函数
alert(out());

At this moment, when you execute the above code again, you will find that the out function output It's no longer undefined, but window's username. What does this prove? It proves that when out calls this, this does point to the window. It also proves that this does point to whoever calls it.

If you don’t understand the global variables of js, then we can replace the above code with the following code and then call out, and you will understand better:

//创建一个局部对象a
var a = {
 user:'小东',
 getName:function(){
  return this.user;//返回当前对象的user属性值
 }
}
//调用a的getName方法
alert(a.getName());
//把局部对象的属性函数赋值给外面的变量out
var out = a.getName;
//此刻，我们增加一个user的变量，看看再次调用out函数会输出什么
var user='window"s username';
//调用out函数
alert(out());

Here, we no longer enable the window object. For external properties and functions, we always use var to declare them. Since they are all declared with var, they should all point to the same object, right? At this moment, if you execute the above code again, that is, execute the out function, you can still alert the window's username. At this point in writing, the definition of this cannot be more clear. It is: whoever calls it points to whoever calls it.

This is not difficult to understand. What is difficult to understand is that you have to find the object that calls it. Only when you find the object that calls this can you know the end of this. Who it points to, because: the definition of this is: whoever calls it it points to.

The above is the detailed content of A brief discussion on this in javascript. For more information, please follow other related articles on the PHP Chinese website!