SoFunction
Updated on 2025-03-08

Detailed explanation of this pointing problem in JavaScript functions

This keyword

Which object calls the function, which object this in the function points to.

**In strict mode: **In the global environment, this points to undefined

**In non-strict mode: **In the global environment, this points to window

Globally defined functions are called directly, this => window

function fn(){
	(this);
	// At this time this points to window}
fn();
// Equivalent to ()

Function calls inside the object, this => caller

var obj = {
	fn:function(){
		(this);
	}
}
();
// At this time this points to obj

The processing function of the timer, this => window

setTimeout(function(){
	(this);	
},0)
// At this time, this in the timer processing function points to window

Event handler function, this => Event source

 = function(){
	(this);
}
//When you click on div, this points to div

Self-call function, this => window

(function () {
  (this)
})()
// At this time this points to window

Change this point

What we just mentioned are the this pointer in the basic calling method of the function. We have three other methods to ignore the this pointer of the function itself and point to another place. These three methods are call / apply / bind, which is a method to forcefully change this pointing.

  • call/apply/bind is attached to the function call and can be ignored.
  • The function will be called automatically immediately when the call and apply is used. A function will be created when the bind is used, but it needs to be called manually.

call

Syntax: (where does this point in the fn function body point, arg1, arg2, ...);

Function: Call the bound function fn, specify its this point and pass the parameter

parameter:

  • The first parameter: this points to
  • The remaining parameters: The values ​​that need to be passed in can be multiple, separated by commas

Use the call method to not pass parameters

var num = 666;

function fn() {
  ('num = ', );
}

();  // num = 666

Specify this using the call method

var name = 'Rose';
var obj = {name:'Jack'};
function fn(){
	();
}
fn();	// Rose
();	// Rose
(obj);  // jack

Use the call method to specify this and pass parameters

var name = 'Rack';
var obj = {name:'Jack'};
function fn(a,b){
	(this,a,b);
}
fn(1,2);	// window 1 2
(obj,1,2);	// obj 1 2
fn(1,3);	// window 1 3

apply

The apply method accepts an array containing multiple parameters.

Syntax: (where does this point in the fn function body point, [arg1, arg2, ...]);

Function: Call the bound function fn, specify its this point and pass the parameter

parameter:

  • The first parameter: the object pointed to by this
  • The second parameter: an array containing multiple parameters
var obj = {name:'jack'};
function fn(a,b){
	(this,a,b);
}
fn(1,2);	// window 1 2
(obj,[1,2]);	// obj 1 2

Merge arrays using apply

Use push to append elements to an array, if the argument is an array, it adds the array as a single element instead of adding each element in this array, so we end up with an array

var arr1 = [1,2];
var arr2 = [3,4];
(arr2);
(arr1);	//	[1,2,[3,4]]

concat, while it can merge arrays, it does not add elements to an existing array, but creates and returns a new array.

var arr1 = [1,2];
var arr2 = [3,4];

var arr3 = (arr2);
(arr1);	// [1,2]
(arr3);	// [1,2,3,4]

What if we want to append elements to an existing array? cycle? No! This is what comes in handy

var arr1 = [1,2];
var arr2 = [3,4];

(arr1,arr2);
(arr1);	// [1,2,3,4]

Use apply to use built-in functions

/* Find the largest/small number in the array */
var numbers = [5, 6, 2, 3, 7];

var max = (numbers)
var min = (numbers)
(min,max);	// NaN NaN

var max = (null, numbers); 
/* Basically equivalent to (numbers[0], ...) or (5, 6, ..) */
var min = (null, numbers);
(min,max);	// 2 7

bind

Syntax: (the pointer of this in the fn function body, arg1, arg2, ...);

Function: Create a new binding function, specify its this point and pass a parameter, and it must be called before it will be executed.

parameter:

  • The first parameter: the object pointed to by this
  • The remaining parameters: The values ​​that need to be passed in can be multiple, separated by commas
var obj = {name:'jack'};
function fn(a,b){
	(this,a,b);
}
fn(1,2);	// window 1 2
(obj,1,2);	// Not executed without calling(obj,1,3)()	// obj 1 3
var newFn = (obj,3,4);
newFn();	// obj 1 4
newFn(5,6);	// obj 3 4

Summarize

This is the article about this pointing problem in JavaScript functions. For more related JavaScript functions, please search for my previous articles or continue browsing the related articles below. I hope you support me in the future!