How to understand the problem of this pointing in JavaScript
This article mainly introduces "how to understand the this pointing problem in JavaScript". In the daily operation, I believe that many people have doubts about how to understand the this pointing problem in JavaScript. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubt of "how to understand the this pointing problem in JavaScript". Next, please follow the editor to study!
1. The relationship between context and this
By understanding the context, we can more clearly understand the direction of this.
The direction of the this can be seen as the current context
2. general function
Let's first take a look at what is this in a function through an example:
Let colors = {green: "green", blue: "blue", showColors: function () {console.log ("green:" + this.green + "blue:" + this.blue);}} colors.showColors (); let show = colors.showColors;show ()
The first output is green and blue, and the context of the function is colors, so this points to colors
The second output is undefined and undefined. In this case, the function is called directly with parentheses, the context is window, and this points to window.
So, we can see that the context of the function, that is, this, is determined by the way the function is called.
Common function contexts:
Object management calls its method function, then the function context is the managed object, and this points to this object.
Obj.fun (); the context is obj
Call the function directly with parentheses. The context is the window object, and the this points to the window object.
For example:
Function fun () {return this.a + this.b;} var a = 1 obj.fun var b = 2 X let obj = {a: 5, b: fun (), fun: fun} let res = obj.fun (); console.log (res)
In the b in obj, fun () is called directly with parentheses, so the fun () context at this time is the window object, so the this here points to window,b = 1 + 2 = 3.
The fun () of obj.fun () is called by obj, so its context is obj, so the this here points to obj, so res = 5 + 3 = 8
3. array / class array object
Array / class array object enumeration function to call, the context is this array / class array object
That is, it can be regarded as:
Array [subscript] (); the context object that calls this function is this array
Let's understand it through an example:
Let arr = [1,2,3, function () {console.log (this [0]);}]; arr [3] ()
Here the subscript 3 is a function that enumerates the objects with subscript 3 through the array and then executes it, so its context is this array arr.
Class array objects:
What is a class array object?
All objects whose key names are natural number sequences (starting with 0) and have the length attribute
For example, an arguments object is a class array object, which is a list of arguments to a function.
Function fun () {arguments [3] ();} fun (1,2,3, function () {console.log (this [0]);})
Here the function fun is called, but when it is called, it executes a function passed to it, that is, the statement arguments [3] (), so it outputs this [0], which is an enumerated function of an array object to call, so its context is arguments,this pointing to it.
4. executes the function immediately
Execute the function immediately (IIFE), whose context is the window object, so its this points to window
Let's understand it through an example:
Var a = 1 obj = {a: 2, fun: (function () {let a = this.a; return function () {console.log (a + this.a);}) ()}; obj.fun ()
Obj.fun () is mentioned earlier. Fun () is called by obj, so the this here points to obj.
Fun in obj is equal to the return value of a function that executes immediately
It's the equivalent of
Obj = function () {console.log (a + this.a);}
The this here points to obj, so this.a = 2
In this immediate execution function, its context object is window, so its this points to window, so the this of let a = this.a points to the window object, so a = 1, so its return value is a = 1.
So the final output is 1 + 2 = 3.
5. timer, delay timer call function
In timer and delayer call functions, the context object is the window object, and the this in it points to the window object.
Let's understand it through an example:
Let obj = {a: 1, b: 2, fun: function () {console.log (this.a + this.b);}} var a = 3 var b = 4 setTimeout (obj.fun, 2000)
Here the calling function of setTimeout is obj.fun, which is called by a delay timer, and it will run after 2s, so its this points to the window object and outputs 7.
If we write this way, what will be output?
Let obj = {a: 1, b: 2, fun: function () {console.log (this.a + this.b);}} var a = 3 obj.fun b = 4 setTimeout (function () {obj.fun ();}, 2000)
At this point, the first parameter of setTimeout becomes an anonymous function, and the this of the anonymous function points to the window object.
In the anonymous function obj.fun (), this fun () is called by obj, so the this in fun points to obj, so output 3
6. event handler function
The context of the event handler is the DOM element that binds the event, and this points to the DOM element
That is:
DOM element .onclick = function () {the context here is the DOM element, and this points to the DOM element}
Let's understand it through an example:
Event handler p {width: 200px; height: 200px; float: left; border: 1px solid # 000; margin-right: 10px;}
Function show () {alert ("You click" + this.id);} let box1 = document.getElementById ('box1'); let box2 = document.getElementById (' box2'); let box3 = document.getElementById ('box3'); box1.onclick = show; box2.onclick = show; box3.onclick = show
When we click on the three boxes built, the pop-up dialog box will output the corresponding box id
Because in the event handler, this points to the corresponding DOM element.
At this point, the study on "how to understand the problem of this pointing in JavaScript" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
