Location>code7788 >text

Read this article to understand the this binding in the class method in es6

Popularity：81 ℃/2025-01-17 14:24:41

I have always had this question? There is no automatic binding of this in the method of class. Why after manual binding, other methods in the class are called in the method after binding (why can this method use this? It should not be null or undefined or window) Or is this the mechanism of class?

So I went to find the answer with this question

In JavaScript, the this keyword in a class method is usually automatically bound to the current instance object. However, when you extract a class method and call it as a standalone function, the binding of this is lost and becomes undefined (in strict mode) or the global object (in non-strict mode) instead of null.

Manual binding of this is usually accomplished using the bind, call, or apply methods. When you bind this manually, you are actually creating a new function, and in this new function, this is fixed to the object you specified. Therefore, when you call other methods in the class in the method after binding, this still points to the object you are bound to, not null.

This is because when you use the bind method, bind will return a new function, and the this value in this new function will be permanently bound to the first parameter passed in the bind method. When you call this new function, no matter where it is called, the value of this is the object you bound it to.

This is part of the JavaScript class and object mechanism that ensures that this correctly refers to the instance object when other instance methods are called from within the instance method. If you do not manually bind this when calling a method, and the method is called outside the class, then this will not automatically point to the instance of the class, but will lose the binding, which may cause this to point to the global object. Or become undefined.

Therefore, binding this manually is to ensure that instance properties and other methods of the class can still be accessed correctly after the method is extracted as a standalone function.

Below is a simple example that shows how to call a class method from outside the class and explains why you need to manually bind this.

class MyClass {
  constructor(name) {
     = name;
  }

  greet() {
    (`Hello, my name is ${}`);
  }

  sayGoodbye() {
    (`Goodbye, ${}!`);
    ();
  }

  afterGoodbye() {
    (`After goodbye, ${} is still here.`);
  }
}

const myInstance = new MyClass('Alice');

// Call the method in the class normally(); // Output: Hello, my name is Alice
//Extract the method outside the class and try to call itconst extractedGreet = ;
extractedGreet(); // Output: Hello, my name is undefined
// Manually bind this before callingconst boundGreet = (myInstance);
boundGreet(); // Output: Hello, my name is Alice
//A method in a class calls another method outside the class(); // Output: Goodbye, Alice! After goodbye, Alice is still here.
//Extract another method outside the class and try to call itconst extractedSayGoodbye = ;
extractedSayGoodbye(); // Output: Goodbye, undefined! TypeError: is not a function
// Manually bind this before callingconst boundSayGoodbye = (myInstance);
boundSayGoodbye(); // Output: Goodbye, Alice! After goodbye, Alice is still here.

 

In this example:
  1. MyClass is a class that contains three methods: greet, sayGoodbye, and afterGoodbye.
  2. myInstance is an instance of MyClass with the name property set to 'Alice' when initialized.
  3. When the greet method is called normally, it will output Hello, my name is Alice, because this points to myInstance.
  4. When we extract the greet method outside the class and call it directly, this no longer points to myInstance, but points to the global object (in non-strict mode) or undefined (in strict mode), so the output Hello, my name is undefined .
  5. After manually binding this to myInstance using the bind method, call the greet method again, with this pointing to myInstance and outputting Hello, my name is Alice.
  6. When the sayGoodbye method calls the afterGoodbye method inside the class, this normally points to myInstance, so Goodbye, Alice! After goodbye, Alice is still here. is output.
  7. When we extract the sayGoodbye method out of the class and call it directly, this no longer points to myInstance, causing the output to be undefined, and it is not a function, throwing a TypeError.
  8. After manually binding this to myInstance using the bind method, call the sayGoodbye method again, with this pointing to myInstance, and output Goodbye, Alice! After goodbye, Alice is still here..

With this example, you can see the importance of manually binding this, especially when extracting methods to be called outside of the class.

<Previous Next>