this in ES6 Classes in JavaScript

this in ES6 Classes in JavaScript

ES6 classes follow the same this rules as regular functions. Here is how this works in classes and the common pitfalls.

Basic Class

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(this.name);
  }
}
const p = new Person("Kunal");
p.greet(); // "Kunal" (this is p)
``
`this` in the constructor is the new instance. `this` in methods is the instance when called as `p.greet()`.

### Losing this in Callbacks

```js
class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(this.name);
  }
  delayedGreet() {
    setTimeout(this.greet, 1000); // undefined (this is lost)
  }
}
const p = new Person("Kunal");
p.delayedGreet(); // undefined (or error)
``
`this.greet` is detached when passed to `setTimeout`. `this` inside `greet` is not `p`.

### Fix 1: bind in the Constructor

```js
class Person {
  constructor(name) {
    this.name = name;
    this.greet = this.greet.bind(this); // bind in constructor
  }
  greet() {
    console.log(this.name);
  }
  delayedGreet() {
    setTimeout(this.greet, 1000); // "Kunal" (now bound)
  }
}
``
### Fix 2: Arrow Method

```js
class Person {
  constructor(name) {
    this.name = name;
  }
  greet = () => {
    console.log(this.name); // lexical this (the instance)
  };
  delayedGreet() {
    setTimeout(this.greet, 1000); // "Kunal"
  }
}
``
Arrow methods (class fields) capture `this` from the constructor's scope. They are per-instance (not on the prototype), so they cost a bit more memory but are always bound.

### Fix 3: Arrow Wrapper in the Callback

```js
delayedGreet() {
  setTimeout(() => this.greet(), 1000); // "Kunal"
}
``
### React Class Components (Legacy)

Before hooks, React class components needed `bind` or arrow methods for event handlers:

```js
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() { ... }
}
``
Or use arrow class fields:

```js
class MyComponent extends React.Component {
  handleClick = () => { ... };
}
``
### The Takeaway

Class methods follow regular `this` rules (implicit binding). Detaching a method (passing to `setTimeout`, event listener) loses `this`. Fix with `bind` in the constructor, arrow class fields (lexical `this`), or arrow wrappers in callbacks. Arrow fields are per-instance but always bound.