Shulou(Shulou.com)06/02 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.