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

This article introduces you how to understand the JavaScript function this pointing problem, the content is very detailed, interested friends can refer to, hope to be helpful to you.

1. The direction of this in the function

The direction of these this is determined when the function is called. Different invocation methods determine that the direction of the this is different, generally pointing to the caller.

Now let's take a look at the details.

1. Ordinary function function fn () {console.log ('this:'+this of ordinary function);} fn ()

The print result is as follows:

You can see that this points to window when an ordinary function is called.

2. Constructor function Star () {console.log ('this:'+this of constructor);} new Star ()

The print result is as follows:

You know that when an object method is called, this points to an instance object of that method.

3. Object method var o = {print: function () {console.log ('this:'+this of object method);}} o.print ()

The print result is as follows:

You know that when an object method is called, this points to the object to which the method belongs.

4. Event binding method

When we add a bind event to a button, how does its this point?

For example, now that there is a button button, let's add a click event to it, as follows:

Button var btn = document.querySelector ('button'); btn.onclick = function () {console.log (' bind event this:'+this);}

When we click the button, we get:

As you can see, when the binding event is called, the this points to the binding event object.

5. Timer function

Write a timing function and ask him to call it after 1s.

Window.setTimeout (function () {console.log ('this:'+this of timer);}, 1000)

The print result is as follows:

You know that when the timer function is called, this points to window.

6. Execute the function immediately

Define an immediate execution function:

(function () {console.log ('this:'+this that executes the function immediately);}) ()

The print result is as follows:

As you can see, when the function call is executed immediately, this points to window.

To sum up, we can sum up as follows:

The calling mode this points to the ordinary function to call the window constructor to call the instance object, and the method in the prototype object also points to the instance object method to call the object to which the method belongs. The event binding method binds the event object timer function window immediately executes the function window II, and changes the this inside the function to point to

But in the function, the this point is not immutable, we can change the this point in a number of ways, mainly in the following ways. In the previous summary of the this pointing problem in the prototype object, we mentioned the call method and the apply method, so we won't repeat them here, just give an example.

1. Call method

Define an object and a function first.

Var o = {name:'xl'} function fn () {console.log (this);}

At this time, the this is in an ordinary function. As mentioned earlier, the this of the ordinary function points to windiw. Now if we want to point the this to the o object, we should:

Fn.call (o)

The printed result is:

This points to successful modification.

2. Apply method

The method is the same as above.

Var o = {name:'xl'} function fn () {console.log (this);} fn.apply (o)

The print result is as follows:

3. Bind method

The bind () method does not call the function. But it can change the this point inside the function.

Syntax:

Fun.bind (thisArg, arg1, arg2,...)

ThisArg: the this value specified when the fun function is running arg1,arg2: the other parameters passed return the copy of the original function modified by the specified this value and initialization parameters

So we can use bind when we just want to change the this direction and don't want to call this function.

As follows (again using the above example):

Var o = {name:'xl'} function fn () {console.log (this);} var f = fn.bind (o); f ()

The print result is as follows:

One thing to note here is that since the bind () method does not call the function, we can assign the new function to a f and call it through f after changing the this point to return a new function.

3. Call apply bind summary 1. Similarities

Can change the this point inside the function.

2. Differences

Call and apply call the function and change the point of the this inside the function.

-call and apply pass different parameters. Call passes parameters aru1, aru2... Formal apply must be in array form [arg].

Bind does not call the function, but can change the point of the this inside the function.

3. Application scenarios

Call often does inheritance.

Apply is often associated with arrays. For example, with the help of mathematical objects to achieve the maximum and minimum value of the array.

Bind does not call functions, but also wants to change the direction of the this. For example, change the this point inside the timer.

On how to understand the JavaScript function this point to the problem to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.