What is this? One article will help you understand this in seconds

The content of this article is about what is this? This article allows you to understand this in seconds. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. In daily development, we often encounter bugs pointed to by this. I was depressed for a long time before suddenly waking up and learning from the pain. I summarized this so that I can avoid detours in future development work.

Note: This article only describes the browser environment.

1: Global execution

console.log（this）；
// Window

It can be seen that in the global scope, this points to the current global object Window.

2: Execution in function

1. In non-strict mode

function func （） {
console.log（this）；
}
func（）；
// Window

2. In strict mode

"use strict";
function func （） {
console.log（this）；
}
func（）；
// undefined

Three: Method call as an object

When a function is called as a method of an object, this points to the current object obj:

var obj = {
name: 'kk',
func: function （） {
console.log（this.name）；
}
}
obj.func（）；
// kk

If the method of the object is Assigned to a variable, when calling this method, this points to Window:

var obj = {
name: 'kk',
func: function （） {
console.log（this）；
}
}
var test = obj.func;
test（）；
// Window

Four: Used as a constructor

In JS, in order to implement a class, we need Define some constructors and add the new keyword when calling a constructor:

function Person （name） {
this.name = name;
console.log（this）；
}
var p1 = new Person（'kk'）；
// Person

At this time, this points to the object instantiated when the constructor is called.

Of course, the constructor is actually a function. If the constructor is called as an ordinary function, this points to Window:

function Person （name） {
this.name = name;
console.log（this）；
}
var p2 = Person（'MM'）；
// Window

5: Use in timers

setInterval（function （） {
console.log（this）；
}, 2000）
// Window
setTimeout（function （） {
console.log（this）；
}, 0）
// Window

If there is no special pointer (for pointer changes, please see below: How to change the pointer of this), the pointers of this in the callback functions of setInterval and setTimeout are all Window. This is because the JS timer method is defined under Window.

Six: Arrow function

Called in the global environment:

var func = （） => {
console.log（this）；
}
func（）；
// Window

Called as a function of the object:

var obj = {
name: 'hh',
func: function （） {
setTimeout（function （） {
console.log（this）；
}, 0）
}
}
obj.func（）；
// Window
var obj = {
name: 'hh',
func: function （） {
setTimeout（（） => {
console.log（this）；
}, 0）
}
}
obj.func（）；
// obj

No It is difficult to find that ordinary functions are called as a function of the object, this points to Window, arrow functions are called as a function of the object, and this points to the object where it is defined, which is this in func, that is, obj.

The value of this in an arrow function depends on the value of this of non-arrow functions outside the function, and the value of this cannot be changed through the call(), apply() and bind() methods.

Seven: call, apply, bind

call:

fun.call(thisArg[, arg1[, arg2[, …]]] )

It will execute the function immediately. The first parameter is the context of this in the specified execution function, and the following parameters are the parameters that need to be passed in to execute the function;

apply:

fun.apply(thisArg, [argsArray])

It will also execute the function immediately. The first parameter is the context of this in the specified execution function, and the second parameter is an array, which is passed to the execution Function parameters (difference from call);

bind:

var foo = fun.bind (thisArg[, arg1[, arg2[, …]]]);

It will not execute the function, but return a new function. This new function is assigned the context of this, and the following parameters are the parameters that need to be passed in to execute the function;

Let’s take a look at an example ：

function Person（name, age） {
this.name = name;
this.age = age;
console.log（this）；
}
var obj = {
name: 'kk',
age: 6
};
Person.call（obj, 'mm', 10）；
// obj，{name: "mm", age: 10}
Person.apply（obj, ['mm', 10]）；
// obj，{name: "mm", age: 10}
var p1 = Person.bind（obj, 'mm', 10）
var p2 = new p1（）；
// Person {name: "mm", age: 10}

In this example, the this of call, apply and bind all point to obj, and they can all run normally; call and apply will execute the function immediately. The difference between call and apply lies in the parameters passed, call Receive multiple parameter lists, apply receives an array containing multiple parameters; bind does not execute the function immediately, it returns a function, and p2 needs to be executed to return the result, bind receives multiple parameter lists.

Application: How to change the pointing of this

Why do we talk about this module? In order to facilitate everyone to have a more thorough understanding of the this pointing problem described above, and to have a more thorough understanding of the important JS functions. Three methods: the use of call, apply, and bind; and in actual project development, we often encounter situations where we need to change the this pointer.

Let’s take a look at the methods:

1. Use the arrow function of es6

var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
setTimeout（function （） {
this.func1（）
}, 1000）；
}
};
obj.func2（）；
// Uncaught TypeError: this.func1 is not a function

An error will be reported at this time, because this of the function in setTimeout points to Window, and There is no func1 function on the Window object. Let's change it to an arrow function:

var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
setTimeout（（） => {
this.func1（）
}, 1000）；
}
};
obj.func2（）；
// kk

At this time, no error is reported, because the value of this of the arrow function depends on the value of this of the non-arrow function outside the function, which is the value of this of func2, that is obj.

2. Use _this = this inside the function

var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
let _this = this;
setTimeout（function （） {
_this.func1（）
}, 1000）；
}
};
obj.func2（）；
// kk

At this time, func2 can also run normally. In func2, first set var _this = this, where this is the object obj pointing to func2. In order to prevent setTimeout in func2 from being called by window, this in setTimeout will be window. We assign this (pointing to the variable obj) to a variable _this, so that when we use _this in func2, it points to the object obj.

3. Use call, apply, and bind

call:

var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
setTimeout（function （） {
this.func1（）
}.call（obj）， 1000）；
}
};
obj.func2（）；
// kk

apply:

var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
setTimeout（function （） {
this.func1（）
}.apply（obj）， 1000）；
}
};
obj.func2（）；
// kk
bind:
var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
setTimeout（function （） {
this.func1（）
}.bind（obj）（）， 1000）；
}
};
obj.func2（）；
// kk

call, apply, and bind can all change the context object of this , so no error is reported and it can be executed normally.

The specific reason can be seen in the seventh point above, call, apply, and bind.

4. new instantiates an object

As above: The fourth point is used as a constructor.

The above is about what is this? One article will let you understand the entire introduction of this in seconds. If you want to know more about JavaScript Tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of What is this? One article will help you understand this in seconds. For more information, please follow other related articles on the PHP Chinese website!