Typorithm · medium

this & binding

this-bindingjavascript-corethisbindingcall

Saved on this device

Full lesson · 8 learning steps Open any exercise for focused practice

Step 1 of 8 · intro card

Learn this & binding

Objects & this

this is decided by the call site, not where the function was defined. obj.method() binds this to obj; a detached call loses it; arrow functions capture this lexically; and call/apply/bind set this explicitly.

There are four binding rules, checked in order: new binding (new Fn()), explicit binding (call/apply/bind), implicit binding (obj.method()), and the default (a bare call → undefined in strict mode).

Implicit binding depends on the receiver at the call site: obj.greet() sets this to obj, but const f = obj.greet; f() drops the receiver, so this is undefined.

Arrow functions ignore all of this — they have no own this and instead capture it from the enclosing scope, which is why they are ideal for callbacks.

fn.call(obj) and fn.apply(obj, args) invoke immediately with this = obj (apply spreads an args array); fn.bind(obj) returns a new function permanently bound to obj.

this is set by the call site, not the definition.

obj.method() binds this to obj; a detached call loses it.

Arrow functions capture this lexically.

call/apply/bind set this explicitly.

const obj = {
  name: "Ada",
  greet() {
    return this.name;
  },
};
obj.greet();
const detached = obj.greet;
detached();
const arrow = () => this;
obj.greet.call({ name: "Linus" });

Read the implementation

Connect each part of the code to the concept before you type.

1. Method call

Called as obj.greet(), this is obj, so this.name is "Ada".

obj.greet();

2. Detached reference

Storing the method loses its receiver; this is no longer obj when later invoked.

const detached = obj.greet;

3. Plain call

A bare call has no receiver, so this is undefined in strict mode (or the global object otherwise).

detached();

4. Arrow capture

Arrow functions have no own this; they capture this from the surrounding lexical scope.

const arrow = () => this;

5. Explicit call

call invokes the function with this set to the object you pass, so this.name is "Linus".

obj.greet.call({ name: "Linus" });

A complete learning loop

Understand

Read the concept map and follow the code breakdown.

Reconstruct

Type the implementation, repair mistakes and work through every recall exercise.

Verify

Use the final check without hints; revisit weak concepts in short practice sessions.