This object is bound based on the function's execution environment when the function is running.
In fact, the essence of this sentence is that whoever calls the function, this will point to
Specifically, there are usually the following situations:
Global functions
In a global environment, this points to Window
//Example 1 function A() {
(this)
}
A();//Window
The above example is very simple. Function A is executed in the global environment, that is, the global object Window calls the function. At this point this point to Window
Object method
When called as an object method, this points to the object that calls the method
//Example 2var b = {
getThis:function(){
(this)
}
}
()//b
The examples we have given here are relatively simple and easy to understand. Let’s have an interesting one:
//Example 3 var c = {
getFunc:function(){
return function(){
(this)
}
}
}
var cFun = ()
cFun()//Window
This example is different from the previous example. When running(), the first thing that returns is an anonymous function. We assign this function to cFun, and then call cFun() in the global environment, so this still points to Window at this time.
What if we must make the c object returned here? At the beginning we said that this object is determined when the function is executed. In Example 3, when executing(), this object still points to c, so we just need to keep this and change the above code slightly:
//Example 4 var c = {
getFunc:function(){
var that = this //Keep this here return function(){
(that)
}
}
}
var cFun = ()
cFun()//c
This is why we can often see var self = this or var that = this in some code.
call and apply
At this time, this object usually points to the value specified in the function (note that the usual 2 characters here are for the exam)
Call and apply are common talk, but I will introduce it briefly. I am afraid that new classmates may not have contacted each other (actually to make up the number of words). Take call as an example, the grammar is like this
(thisArg, arg1, arg2, ...)
How to use this method? See the following example:
//Example 5var d = {
getThis:function(){
(this)
}
}
var e = {
name:'e'//(Write a `name` attribute for e just because I feel lonely and ugly~~)}
(e)//e
Here we can see the meaning of the call function: specify an object o1 to call the method of other object o2, and this object points to o1
OK, then why did we say that it was usually? Because, thisArg here can be specified as null and undefined. Please see:
//Example 6var d = {
getThis:function(){
(this)
}
}
(null)//Window
(undefined)//Window
At this time, this points to the global object Window
Arrow function
The arrow function in es6 is also used more frequently now, but there is a point that needs to be paid attention to:
This object in the function body is the object that is defined, not the object that is used.
In fact, the fundamental reason for this situation is that the arrow function does not have this object, so this of the arrow function is this of the outer code.
//Example 7 var f = {
getThis:()=>{
(this)
}
}
()//Window
This example is basically the same as in Example 2 before, except that the normal function is rewritten into an arrow function, but at this time this object has pointed to the outer Window.
Given that this may be difficult to understand, let's look at a few more examples:
//Example 8 var g = {
getThis:function(){
return function(){(this)}
}
}
var h = {
getThis:function(){
return ()=> (this)
}
}
()()//Window
()()//h
In this example, the write method of getThis in g is the same as in Example 3 before. Since the function runs in the global environment, this points to Window at this time; the getThis in h uses an arrow function, so this points to this in the outer code block, so this points to h at this time.
Summarize
Generally, this object points to the object that calls the function, and the execution function in the global environment this object points to the Window
In the call and apply functions this points to the specified object. If the specified pair is undefined or null, then this object points to the Window
In the arrow function, this object is equivalent to this of the outer code block
Then it is still the same ending every time. If there is any error in the content, please point it out; if it is helpful to you, please like and collect it. Thank you for your support.