First of all, it must be said that the pointing of this cannot be determined when the function is defined. Only when the function is executed can it be determined who this points to . In fact, the final point of this is the object that calls it ( this sentence is somewhat Question, I will explain why there are problems later, although most of the articles on the Internet say this, although in many cases there is no problem in understanding that way, but in fact, understanding that way is inaccurate, so if you understand This will have a feeling of incomprehension ) , then I will discuss this issue in depth.
Why study this? If you have learned object-oriented programming, then you must know what it is used for. If you have not learned it, you can skip this article for the time being. Of course, you can also read it if you are interested. After all, this is something you must master in js. thing.
Example 1:
function a(){
var user = "Dream Chaser";
console.log(this.user); //undefined
console.log(this); //Window
}
a();
According to what we said above, this ultimately points to the object that calls it. The function a here is actually pointed out by the Window object. The following code can prove it.
function a(){
var user = "Dream Chaser";
console.log(this.user); //undefined
console.log(this); //Window
}
window.a();
Like the above code, in fact, alert is also an attribute of window, and it is also clicked by window.
Example 2:
var o = {
user:"Dream Chaser",
fn:function(){
console.log(this.user); //Dream Chaser
}
}
o.fn ();
The this here points to the object o, because you call this fn through o.fn(), and the natural pointer is the object o. Here again, the pointer of this cannot be determined when the function is created. You can only decide when you call it. Whoever calls it will point to whom. You must understand this.
In fact, Example 1 and Example 2 are not accurate enough. The following example can overturn the above theory.
If you want to fully understand this, you must look at the next few examples
Source of this article: Dream Chaser Blog
Example 3:
var o = {
user:"Dream Chaser",
fn:function(){
console.log(this.user); //Dream Chaser
}
}
window.o.fn ();
This code is almost the same as the above code, but why does this not point to window here? If according to the above theory, this finally points to the object that calls it. Let’s talk about it first, window is in js The global object, the variable we created is actually to add properties to the window, so we can use the window point o object here.
Let's not explain why the above code this does not point to window, let's look at a piece of code.
var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //12
}
}
}
obfn ();
It is also pointed out by the object o here, but also this does not execute it, so you must say that what I said at the beginning is not all wrong? Actually it is not, it is just inaccurate at the beginning, I will add a sentence next, I believe you can thoroughly understand the problem pointed by this.
Case 1: If there is this in a function, but it is not called by the upper-level object, then this points to window. It should be noted that in the strict version of js, this points to not window, but we do not Discuss the strict version of the problem, you can find it online yourself if you want to know.
Case 2: If there is this in a function, and the function is called by the object of the upper level, then this points to the object of the upper level.
Case 3: If there is this in a function, this function contains multiple objects, although this function is called by the outermost object, this only points to the object one level above it. Example 3 can prove that if not Believe it, then let's continue to look at a few examples.
var o = {
a:10,
b:{
// a:12,
fn:function(){
console.log(this.a); //undefined
}
}
}
obfn ();
Although there is no attribute a in object b, this this also points to object b, because this will only point to its upper-level object, regardless of whether there is something this wants in this object.
There is also a special case, example 4:
var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //undefined
console.log(this); //window
}
}
}
var j = obfn;
j();
Here this points to the window, is it a little confusing? In fact, because you did not understand a sentence, this sentence is also crucial.
this always points to the object that called it last, that is, who called it when it was executed. In example 4, although the function fn is referenced by the object b, it is not executed when fn is assigned to the variable j, so The final point is window, which is different from example 3, which directly executes fn.
This is actually the same thing, but it points to something different under different circumstances. The above summary has some small mistakes in every place, and it can't be said to be a mistake, but in different environments. There will be differences, so I can't explain it all at once, you can only experience it slowly.
Constructor version of this:
function Fn(){
this.user = "追梦子";
}
var a = new Fn();
console.log(a.user); //Dream Chaser
The reason why object a can point to the user in the function Fn is because the new keyword can change the point of this, and point this to object a. Why do I say that a is an object, because the new keyword is used to create an object instance, To understand this sentence, you can think of our example 3. Here we use the variable a to create an instance of Fn (equivalent to copying a copy of Fn to the object a). At this time, it is just created, not executed, and the call to this The function Fn is the object a, then this points to the object a, so why is there a user in the object a, because you have copied a copy of the Fn function to the object a, using the new keyword is equivalent to copying a share.
In addition to the above, we can also change the pointing of this by ourselves. For more information on changing the pointing of this, please refer to the summary of the call, apply, and bind methods in JavaScript, which explains in detail how we can manually change the pointing of this.
Update a little question when this hits return
function fn()
{
this.user = 'Dream Chaser';
return {};
}
var a = new fn;
console.log(a.user); //undefined
see another
function fn()
{
this.user = 'Dream Chaser';
return function(){};
}
var a = new fn;
console.log(a.user); //undefined
come again
function fn()
{
this.user = 'Dream Chaser';
return 1;
}
var a = new fn;
console.log(a.user); //Dream Chaser
function fn()
{
this.user = 'Dream Chaser';
return undefined;
}
var a = new fn;
console.log(a.user); //Dream Chaser
What does that mean?
If the return value is an object, then this points to the returned object. If the return value is not an object, this still points to the instance of the function.
function fn()
{
this.user = 'Dream Chaser';
return undefined;
}
var a = new fn;
console.log(a); //fn {user: "追梦子"}
Another point is that although null is also an object, here this still points to the instance of that function, because null is special.
function fn()
{
this.user = 'Dream Chaser';
return null;
}
var a = new fn;
console.log(a.user); //Dream Chaser
Additional knowledge points:
1. The default this in the strict version is no longer window, but undefined.
2. The new operator will change the point of the function this. Although we have explained it above, we have not discussed this issue in depth, and it is rarely mentioned on the Internet, so it is necessary to talk about it here.
function fn(){
this.num = 1;
}
var a = new fn();
console.log(a.num); //1
Why does this point to a? First, the new keyword will create an empty object, and then it will automatically call a function apply method, pointing this to the empty object, so that the this inside the function will be replaced by the empty object.
2017-09-15 11:49:14
Note: When you new an empty object, the internal implementation of js does not necessarily use the apply method to change the point of this, here I just use an analogy.
if (this === dynamic\changeable) return true;