Foreword: We often see this. In JS, when we don’t understand this, it will lead to the “abuse” of this, resulting in the development process need to spend a lot of time to find the bug caused by the pointing problem of this. I hope this article can help you understand this and save your development time.

1, What is this

This is the environment object in which the code is currently executing and, if in non-strict mode, always points to an object; It can be any value if you’re in strict mode. There are different situations where this points to something different, so let’s look at a couple of different situations where this points to something different.

2. The direction of this in different situations

  • The global environment

In a global environment, this refers to the global object (this article only discusses the browser environment, not nodejs) :

console.log(this= = =window); // true
Copy the code
  • Function of the environment

In the context of a function, the value of this depends on how the function is called.

function f1() {
    return this;
}
console.log(f1() === window); // true
Copy the code

F1 () is called as window.f1(), where window is omitted.

  • Object method

When a function is called as a method in an object, this is the object on which the function is called:

var user = {
    age: 31.getAge: function() {
        return this.age; }}console.log(user.getAge()); / / 31
Copy the code

This is in getAge, and getAge is called by user, so this in getAge refers to user, this.age is user-.age.

  • In the prototype chain

If the method this is in exists in the prototype chain, then this also refers to the calling object of that method:

var util = {
    sum: function() {
        return this.a + this.b; }};var _util = Object.create(util);
_util.a = 1;
_util.b = 2;
console.log(_util.sum()); / / 3
Copy the code
  • In the constructor

When a function is used as a constructor (using the new keyword), its this is bound to the new object being constructed:

function userConstructor() {
    this.age = 33;
}
var user3 = new userConstructor();
console.log(user3.age); / / 33
function userConstructor2() {
    this.age = 34;
    return {
        age: 35}}var user4 = new userConstructor2();
console.log(user4.age); / / 35
Copy the code

User3. age is easy to understand, but the constructor in user4 returns an object directly. In this case, if the constructor returns an object directly, then the object created by the new keyword is the value of the return, so user.age is 35.

  • In the arrow function

In the arrow function, this is the same as this in the closed lexical context:

var user4 = {
    name: 'tom'.age: 20.getName() {
        console.log(this.name);
    },
    getAge: () = > {
        console.log(this.age);
    }
}
user4.getName(); // tom
user4.getAge(); // undefined
Copy the code

GetName is not an arrow function, so this in getName points to the caller of the function, user4. This. name is the same as user4.name; GetAge is an arrow function, in which this points to the scope of the function. GetAge should be in the global environment, so this refers to the window, assuming that the global environment does not have an age variable, so this.

3. How to change the direction of this

Although the pointing of this has certain rules, we can also actively modify its pointing. We can modify this in the following three ways:

  • call
  • apply
  • bind

There are three ways to specify this, but I won’t tell you how to use it, but you can search for it.

4, summarize

The direction of this is a difficult knowledge point in the front end, but once we understand this, it will be of great help to us in the normal development process, which can reduce the probability of bugs appearing in the project and save development time.