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

This article mainly explains the "case analysis of this pointing method in JavaScript". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "case analysis of this pointing method in JavaScript".

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

two。 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

Var b = 2

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

one

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

Let 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

Var 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 handling function

Div {

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.

Thank you for your reading, the above is the content of "instance Analysis of this pointing method in JavaScript". After the study of this article, I believe you have a deeper understanding of the problem of instance analysis of this pointing method in JavaScript, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.