this, call, apply & bind — JavaScript Course

What you'll learn

JavaScript selects this from the call site, not where an ordinary function was written. Reading the call shape turns a famously confusing feature into a predictable rule.

By the end of this lesson, you'll be able to:

Predict this for common call forms
Use call, apply, and bind intentionally
Avoid lost context in callbacks

Core mental model

Use this decision table as a compact reference. Focus on what each tool means and when it earns its place in production code.

Concept	What it means	Decision rule
Method call	object.method() binds this to object	Use this for behavior owned by an instance
Explicit call	call/apply supply the receiver	Borrow behavior only at clear integration boundaries
Bound function	bind permanently fixes receiver and optional arguments	Bind once when an API will call the function later

Professional workflow

Build the behavior in small, observable steps. Each step should leave something you can inspect or test.

Describe the function receiver boundary: inputs, outputs, state, timing, and expected failures.
Implement the smallest correct path with names that expose intent.
Add edge cases and failure handling before introducing abstractions.
Verify behavior with realistic data and one deliberately adversarial example.
Refactor only after the observable behavior is protected.

Make behavior observable

Before optimizing or abstracting, make inputs, outputs, state changes, timing, and failure paths visible. JavaScript becomes much easier to reason about when hidden work is exposed.

Guided code lab

Compare method and detached calls

The call site supplies the receiver; binding preserves it after extraction.

receiver.js

"use strict";
const learner = {
  name: "Mira",
  introduce() { return "I am " + this.name; },
};
const safeIntroduce = learner.introduce.bind(learner);
console.log(learner.introduce());
console.log(safeIntroduce());

Reuse behavior explicitly

call supplies individual arguments; apply supplies an array-like list.

explicit-this.js

function describe(prefix, suffix) {
  return prefix + this.name + suffix;
}
const course = { name: "JavaScript" };
console.log(describe.call(course, "Learn ", " today"));
console.log(describe.apply(course, ["Master ", " professionally"]));

Production practice

Contract

A method that uses this requires a documented receiver shape.

Verification

Exercise the method directly, detached, explicitly called, and bound.

Operations

Avoid repeated bind calls during rendering because each creates a new function identity.

Common failure mode

Passing object.method as a callback detaches it; this may become undefined or the wrong receiver.

Independent workshop

Build a notification service whose formatting method remains safe when passed to a scheduler.

Your finished workshop must include:

A method using instance configuration
A correctly bound callback
A comparison with an arrow-based alternative

Definition of done

Demonstrate the happy path and at least two edge cases, keep responsibilities separated, and add a short note explaining one design choice.

Recap & quick check

Key takeaways

Call sites determine ordinary-function this
Arrows capture lexical this
call and apply invoke immediately
bind returns a new fixed function

Quick check

1. In account.show(), what is this?

2. What does bind return?

3. Do arrow functions have their own this?

Keep the workshop. Later modules deliberately build on these decisions, so each exercise can become part of your final portfolio architecture.