In js, the context of this is always unpredictable, and often bugs are always confused. In fact, just distinguish how to execute under different circumstances. The following is the relevant content we have compiled for you:
There is something very special, very commonly used and often troubles beginners in JavaScript - "this", and I will talk about this "this" in this class.
This usually points to an object, and this will point to different objects in different situations. Let's look at a few different situations to help us understand "this".
window object (global object)
Here we print "this" in three different situations, which are to execute directly at the outer environment of the function; to execute using function statement; and to execute using function expression (if the difference between function statement and function expression is not clear, please refer to Note 1).
As a result, it will be found that these three "this" will point to the same object, that is, the window object (global object) of the global environment:
This means that we can directly use this function and this to create new properties in the window object:
Here we use = "..."To create new properties in the window object, we can directly (NewVariable) at the end of the function. The reason why we can do this is not necessary to use any properties in the global object (window) without using "."
The result of running will look like this:
It will print out our "Create a new property". At the same time, in the large object of window, we will also find the property NewVariable:
method in object
We know that if the value in an object is a primitive type (primitive type; for example, string, numerical value), we will call this newly created thing "property"; if the value in the object is a function, we will call this newly created thing "method".
Here, we are going to create a method:
First, we use the object literal method to create an object c, which contains the property name and method log. log is an anonymous function. The content of the function is very simple, just to print this (for anonymous functions, please refer to Note 1). Finally, it is the way to execute the method.
Let's take a look at what "this" will be at this time?
The answer is object c!
When this function is the method in the object, this will point to the object containing the method
A bug about this in JavaScript
Let's go further and look at this example:
Suppose we have more of this line in the method log = "Updated Object C name"
Because we know that "this" now refers to object c, it can be imagined that when I execute this method, it will change the value.
There is no big problem with this part, but let's continue to watch...
Suppose I am making some changes in the method log, and I am creating another function called setname in this method, which is also used. = newnameto modify the value of the name attribute in this object c.
Then execute the setname function, hoping to change the attribute value of name in object c to "New name for object c", and finally print "this" and take a look.
As a result, we will find that the value of the name attribute in object c has not become "New name for object c", and it is still the same! ? How could this happen?
After a closer look, we will look back at our window object. We will find a new property "name" found in the window object, and the value is "New name for object c".
What does this mean? It means that this in the function setname we just pointed to global object (window object), instead of object C just now!
Let's use (this) to see it in the setname function:
In the log method, we have executed this three times in total as follows:
The first and third "this" point to object c, while the second in setname this points to window object (global object), which is why the setname function cannot help us modify the name of the name attribute in object c, because "this" does not point to object c at all.
Many people think this is a bug in JavaScript.
So what can we do
So when we encounter the above example, how can we avoid pointing to different objects?
Many people's solution is like this, because we know that objects are referenced, so we can do this.
STEP 1
We add a line to the top of the entire functionvar self = this(Some people can use itvar that = this). Due to the referenced nature, self and this will point to the same object, while this will point to object c, so self will also point to object c.
STEP 2
Next, change the "this" originally used in the method log to "self". Doing so ensures that self points to the c object without worrying about pointing to the wrong object like the example above.
The result is also as we expected. On the second time (self), the value of the name attribute in object c is replaced again.
Summarize
Let's summarize:
If we build a function in the global environment and print this, this will point to the global object, that is, the window object.
If we create a function in an object, that is, a method, this will generally point to the object containing this method (the reason why we say "usually" is because in addition to the above bug).
When encountering a situation in the method, if you don’t know what this points to, in order to avoid unnecessary errors, we can create a variable at the top of the method and specify it as this (var self = this).
4. If you really don’t know what this will point to in that situation, just come out and take a look!
Sample code
// function statement
function a(){
(this);
= "Create a new property";
}
a();
(NewVariable);
var c = {
name:"The C object",
log: function(){
var self = this;
= "Updated object C name";
(self);
var setname = function(newname){
= newname;
(self);
}
setname("New name for object c");
(self)
}
}
();