Detailed explanation of JavaScript function this pointing problem

1. The direction of this in the function

1. Ordinary functions
2. Constructor
3. Object methods
4. Event binding method
5. Timer function
6. Execute function immediately

2. Change the this pointer inside the function

1. call method
2. Apply method
3. bind method

3. Call apply bind summary

1. Similarities
2. Differences
3. Application scenarios

Summarize

1. The direction of this in the function

The reference of these this is determined when the function is called. Different calling methods determine where this points to, generally pointing to the caller.
Now let’s take a closer look!

1. Ordinary functions

function fn(){
            console.log('normal function this:' + this);
        }
        fn()

The print result is:

insert image description here

It can be seen that when a normal function is called, this points to window

2. Constructor

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

The print result is:

insert image description here

It can be seen that when an object method is called, this points to the instance object of the method.

3. Object methods

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

The print result is:

insert image description here

It can be seen 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 binding event to a button, how does its this point to?

For example, there is a button now, and now we add a click event to it as follows:

<body>
    <button>Button</button>
    <script> 
	var btn = document.querySelector('button');
	btn.onclick = function(){
    	console.log('this of binding event:'+this);
	}
    </script>
</body>

When we click the button, we get:

insert image description here

It can be seen that when the binding event is called, this points to the binding event object.

5. Timer function

Write a timer function and call it after 1 second.

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

The print result is:

insert image description here

It can be seen that when the timer function is called, this points to window.

6. Execute function immediately

Define a function to be executed immediately:

(function(){
            console.log('this:'+this of the function to be executed immediately);
        })();

The print result is:

insert image description here

It can be seen that when the function call is executed immediately, this points to window.

In summary, we can conclude that:

Calling method	this points to
Normal function call	window
Constructor call	Instance object, the methods in the prototype object also point to the instance object
Object method call	The object to which this method belongs
Event Binding Method	Binding event object
Timer function	window
Execute function immediately	window

2. Change the this pointer inside the function

However, in a function, the this pointer is not static. We can change the this pointer through some methods, mainly the following methods. Earlier, in summarizing the issue of where this points to in the prototype object, we mentioned the call method and the apply method. I will not repeat them here and will just give examples.

1. call method

First define an object and a function.

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

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

fn.call(o)

The printed result is:

insert image description here

this points to the successful modification.

2. Apply method

Same method as above.

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

The print result is:

insert image description here

3. bind method

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

grammar:

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

thisArg: the this value specified when the fun function is running arg1, arg2: other parameters passed Returns a copy of the original function transformed by the specified this value and initialization parameters

Therefore, when we just want to change the this pointer and do not want to call the function, we can use bind.

As follows (still using the above example):

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

The print result is:

insert image description here

It should be noted here that: since the bind() method does not call a function, after modifying the this pointer, a new function is returned, so we can assign this new function to an f and then call it through f.

3. Call apply bind summary

1. Similarities

You can change the this pointer inside the function.

2. Differences

call and apply will call the function and change the this pointer inside the function.
-The parameters passed by -call and apply are different. Call passes parameters in the form of aru1, aru2... while apply must be in the array form [arg].
bind does not call the function, but can change the this pointer inside the function.

3. Application scenarios

call often does inheritance.
apply is often associated with arrays. For example, we can use mathematical objects to realize the maximum and minimum values of an array.
bind does not call a function, but you still want to change the this pointer. For example, change the this pointer inside a timer.

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

Detailed explanation of the this pointing problem of JavaScript prototype objects
Detailed explanation of this pointing in JS arrow function
Detailed explanation of this reference and custom properties in JavaScript
The this keyword in JavaScript refers to

<<: js, css, html determine the various versions of the browser

>>: Detailed explanation of the idea of achieving the point-earning effect with CSS animation