this is determined by how a function is called, not where it’s defined. 2. The four rules in order of precedence are: if new is used, this refers to the newly created instance; if call, apply, or bind is used, this is explicitly set to the provided object; if the function is called on an object (e.g., obj.func()), this refers to the object before the dot; otherwise, this defaults to the global object in non-strict mode or undefined in strict mode. 3. Arrow functions do not have their own this but inherit it from the enclosing lexical scope, making them useful for preserving context in closures and callbacks. 4. Common pitfalls, such as losing context in event handlers, can be fixed using bind() or arrow function wrappers to maintain the intended this value. Understanding these rules allows developers to predict this behavior reliably.

The JavaScript this keyword confuses many developers — not because it’s inherently complex, but because its value changes depending on how a function is called. Once you understand the rules that govern this, it stops being mysterious. Let’s break it down with clarity and practical examples.

1. this Depends on Execution Context

In JavaScript, this refers to the execution context of a function — that is, how the function is invoked, not where it’s defined.

Unlike variables declared with let or const, this isn’t about scope — it’s about invocation context.

function sayHi() {
  console.log(this.name);
}

Depending on how sayHi() is called, this could point to different objects.

2. Four Main Rules for this

There are four primary ways this gets determined. They follow an order of precedence.

? Rule 1: Implicit Binding (Most Common)

When a function is called as a method of an object, this refers to that object.

const user = {
  name: "Alice",
  greet() {
    console.log(`Hi, I'm ${this.name}`);
  }
};

user.greet(); // "Hi, I'm Alice"

? this = object before the dot (user).

?? Caveat: If you extract the method, you lose the context:

const greet = user.greet;
greet(); // "Hi, I'm undefined" — `this` is now global (or `undefined` in strict mode)

? Rule 2: Explicit Binding (call, apply, bind)

You can manually set this using .call(), .apply(), or .bind().

function introduce() {
  console.log(`I'm ${this.name}, ${this.age} years old.`);
}

const person = { name: "Bob", age: 30 };

introduce.call(person);   // "I'm Bob, 30 years old."
introduce.apply(person);  // same

• call(thisArg, arg1, arg2, ...)
• apply(thisArg, [argsArray])
• bind(thisArg) returns a new function with this permanently set.

const boundIntro = introduce.bind(person);
boundIntro(); // Always uses `person` as `this`

Useful for callbacks or event handlers where context might be lost.

? Rule 3: New Binding (new keyword)

When a function is called with new, this refers to the newly created object.

function Person(name) {
  this.name = name;        // `this` = newly created instance
  this.greet = function() {
    console.log(`Hello, I'm ${this.name}`);
  };
}

const p = new Person("Charlie");
p.greet(); // "Hello, I'm Charlie"

Under the hood, new does this:

1. Creates a new empty object.
2. Sets this inside the function to that object.
3. Returns the object (unless another object is explicitly returned).

? Rule 4: Default Binding (Fallback)

When none of the above apply, this defaults to the global object — or undefined in strict mode.

function showThis() {
  console.log(this);
}

showThis(); // In browser: `window` (non-strict), `undefined` (strict)

?? This is why relying on global this is dangerous — especially in modules (which are strict by default).

3. Arrow Functions Change the Game

Arrow functions don’t have their own this. Instead, they inherit this from the enclosing lexical scope.

const user = {
  name: "Diana",
  regularFunc: function() {
    console.log(this.name); // "Diana"
  },
  arrowFunc: () => {
    console.log(this.name); // undefined (inherits `this` from outside)
  }
};

user.regularFunc(); // Works
user.arrowFunc();   // Doesn't work as expected

Why? At the time the arrow function was defined, this in the outer scope was likely window (or undefined).

? Use arrow functions when you want to preserve the outer this — common in closures and event handlers.

function Timer() {
  this.seconds = 0;

  setInterval(() => {
    this.seconds  ; // ? `this` refers to the Timer instance
  }, 1000);
}

If you used a regular function here, this would point to the global object or be undefined.

4. Common Pitfalls & Fixes

? Lost context in callbacks

const button = document.querySelector('button');
const widget = {
  clicked: false,
  onClick() {
    this.clicked = true;
    console.log(this.clicked);
  }
};

button.addEventListener('click', widget.onClick);
// `this` is the button (DOM element), not `widget`

? Fix with .bind():

button.addEventListener('click', widget.onClick.bind(widget));

? Or use an arrow function wrapper:

button.addEventListener('click', () => widget.onClick());

Summary: How to Determine this

Ask in this order:

1. Is new used? → this = new instance.
2. Is call, apply, or bind used? → this = specified object.
3. Is the function called on an object (e.g., obj.func())? → this = that object.
4. Else → this = global (non-strict) or undefined (strict).
5. For arrow functions: look to the enclosing scope.

Understanding this isn’t about memorizing edge cases — it’s about knowing these rules and applying them step by step. Once you internalize the four binding rules and remember how arrow functions behave, this becomes predictable.

Basically, just follow the call site.

The above is the detailed content of Demystifying the JavaScript `this` Keyword. For more information, please follow other related articles on the PHP Chinese website!