Module 7 · The this Keyword

this in Object Methods

Intermediate9m read6m practice15m total

thisObjectsImplicit BindingCallbacks

Introduction

When a regular function is called as a property, as in user.getName(), JavaScript uses implicit binding: this inside the function is the object to the left of the final dot.

The trap is that the function does not permanently belong to that object. If you copy the method into a variable or pass it as a callback, the original object is no longer part of the call site, so this changes.

Why This Matters

The classic production bug is button.onClick = user.save or setTimeout(user.save, 1000). The method worked when called as user.save(), then broke when passed around. Interviewers love this because it tests whether you reason from call sites rather than definitions.

Theory

Implicit binding

In obj.method(), this is obj. If the property access is longer, the object immediately left of the final call wins: team.lead.sayName() binds this to team.lead, not team.

Object literals do not create a special this scope. A method's this is not fixed when the object is created. It is decided every time the function is called.

The lost-this problem

A method reference is just a function value:

const fn = user.getName; fn();

That second call is a plain call. The original user object has disappeared from the call site. In strict mode, this becomes undefined; in sloppy mode, it falls back to the global object. Either way, it is not user.

Safe fixes

Use one of these patterns:

Call through the object: user.getName().
Wrap the method: () => user.getName().
Pre-bind it: const getName = user.getName.bind(user).
Pass the receiver separately when an API supports it.

Nested objects and aliasing

Implicit binding only cares about the object used for the final property access. If two objects share the same function, whichever object performs the call becomes this.

Visual Diagrams

The object left of the call owns this

team.lead.sayName()
          |
          +-- final property access is lead.sayName
              this === team.lead

const fn = team.lead.sayName
fn()
 |
 +-- no owning object at call site
     default binding applies

A method can be borrowed or lost because functions are values.

Code Examples

Implicit binding uses the final receiver

The object immediately to the left of the final dot is the receiver.

Loading…

One function, two receivers

The same function can be used as a method on different objects. this follows the receiver used at call time.

Loading…

Playground

Loading editor…

Console

Press Run to execute the code and see output here.

Output Prediction

Predict the output #1

javascript

1const user = {
2  name: 'Ada',
3  show: function () {
4    'use strict';
5    if (this === undefined) {
6      console.log('lost');
7    } else {
8      console.log(this.name);
9    }
10  }
11};
12 
13function later(callback) {
14  callback();
15}
16 
17user.show();
18later(user.show);

Predict the output #2

javascript

1const counter = {
2  value: 1,
3  inc: function () {
4    this.value = this.value + 1;
5    console.log(this.value);
6  }
7};
8 
9const other = { value: 10, inc: counter.inc };
10counter.inc();
11other.inc();

Coding Exercises

Preserve this when scheduling methods

Medium

Implement scheduleMethod(object, methodName, delay) so it schedules the named method and preserves the object as this. The function should work for methods that read or write object state.

Interview Questions

1What is implicit binding, and when is it lost?

Implicit binding happens when a regular function is called as an object property: obj.fn(), so this is obj. It is lost when the function is extracted or passed around, such as const fn = obj.fn; fn() or setTimeout(obj.fn, 0), because the call site no longer includes obj.

Asked at:AmazonMicrosoftMeta

Follow-ups

How would you fix `setTimeout(user.save, 1000)`?
What is `this` in `a.b.c()`?

2If the same function is assigned as a method on two objects, which object is `this`?

Whichever object is used as the receiver at the call site. Functions do not permanently remember the object they were assigned to. If admin.show() calls the function, this is admin; if guest.show() calls the same function, this is guest.

Quiz

1. In `team.lead.sayName()`, what is `this` inside `sayName`?

2. Why does `const fn = user.show; fn()` usually break a method that uses `this`?

Summary

`obj.method()` uses implicit binding: `this` is `obj`.
For nested property calls, the object left of the final dot is the receiver.
Methods do not permanently remember their original object.
Passing a method as a callback often loses `this`.
Wrap, bind, or explicitly call the method to preserve its receiver.

Cheat Sheet

Implicit binding: obj.fn() means this === obj.

Nested call: a.b.fn() means this === a.b.

Lost method: const fn = obj.fn; fn() is default binding, not implicit binding.

Fixes: obj.fn(), () => obj.fn(), obj.fn.bind(obj), or obj.fn.call(obj).