The role of this keyword in js and how to change its context

1. The role of this keyword

thisThe keyword in JavaScript refers to the object at the time the enclosing function is being called. In different contexts, thisthe pointing of will change.

In the global context, thispoints to the global object ( windowobject , globalobject in Node.js).

In a function, thisa pointer to the object that called the function. If the function is called through a method of an object, then thispoints to that object; if it is called through a function, then thispoints to the global object.

In arrow functions, thisinherit from the parent scope this.

In the constructor of a class, when the class is called with newthe keyword , thisit points to the newly created object.

For example:

class MyClass {
  constructor() {
    this.value = 42;
  }
}

let obj = new MyClass();
console.log(obj.value); // 42

The this in the instance method of the class points to the instance itself by default, and the this in the class method points to the class itself by default .

For example:

class MyClass {
  value = 42;
  printValue() {
    console.log(this.value);
  }
  static printValue() {
    console.log(this.value);
  }
}

let obj = new MyClass();
obj.printValue(); // 42
MyClass.printValue(); // undefined

Create an object using Object.createthe method

Created using Object.createthe method is a special way of calling. In this case, points thisto .

For example:

let baseObject = { value: 42 };
let obj = Object.create(baseObject);

function printValue() {
  console.log(this.value);
}

printValue.call(obj); // 42

In this case, there is a value property on the prototype chain of obj, so when the printValue() method is called, this points to the obj object.

Using arrow functions in classes

The this pointer in the method defined by the arrow function in the class is bound, and it points to the instance of the class, not the class itself.

For example:

class MyClass {
  value = 42;
  printValue = () => {
    console.log(this.value);
  }
}
let obj = new MyClass();
obj.printValue(); // 42

An arrow function's thisis definition time this, not at call time this. Therefore, using arrow functions in classes can avoid bindusing this.

When calling the constructor, the new keyword is not used

In this case, this refers to the global object. In this case no new object is created, but the state of the global object is changed.

For example:

class MyClass {
  constructor() {
    this.value = 42;
  }
}

let obj = MyClass(); // without new keyword
console.log(obj); // undefined
console.log(value); // 42

Therefore, when using a constructor to create an object, you need to make sure to use the new keyword to call the constructor, otherwise unexpected results may result.

Special attention should be paid to using the new keyword to call when using the constructor.

Using the arrow function in the method of the object will cause this to point to the problem

For example:

let obj = {
  value: 42,
  printValue: () => {
    console.log(this.value);
  }
};
obj.printValue(); // undefined

In this case, the arrow function is used in the printValue method of the obj object, and the this of the arrow function points to the this when it is defined, not the this when it is called. In this case, because the this of the arrow function points to the this at the time of definition, so this.value points to undefined instead of the value in the obj object.

To solve this kind of problem, you can use this in the parent scope of the arrow function, or use ordinary functions to solve it.

For example:

let obj = {
  value: 42,
  printValue: function(){
    console.log(this.value);
  }
};
obj.printValue(); // 42

or

let obj = {
  value: 42,
  printValue: () => {
    console.log(obj.value);
  }
};
obj.printValue(); // 42

Using an arrow function in an object's method will cause this to point to a problem, which requires special attention. This can be resolved by using this in the parent scope of the arrow function or a normal function.

In short, the context pointed to by the this keyword in JavaScript depends on the calling method of the function, and it is necessary to choose an appropriate method to change the direction of this according to different scenarios.

2. How to change the context of this

The context of can be changed by the call, apply, method.bindthis

callThe and applymethods allow you to thispoint a function's to a specified object and execute the function immediately.

callThe syntax of the method is as follows:

functionName.call(thisArg, arg1, arg2, ...);

applyThe syntax of the method is as follows:

functionName.apply(thisArg, [arg1, arg2, ...]);

bindmethod allows you to thispoint specified object, but instead of executing the function immediately, it returns a new function that can be executed in the future.

let newFunc = functionName.bind(thisArg, arg1, arg2, ...);

For example:

let obj = {value: 42};

function printValue() {
  console.log(this.value);
}

printValue.call(obj); // 42
printValue.apply(obj); // 42
let boundFunc = printValue.bind(obj);
boundFunc(); // 42

In short, by using the call, apply, bindmethod, you can change thisthe pointer to use the same function in different contexts.