The 4 Binding Rules

this-binding-rulesinterview-questionsthisbindingcontext

Saved on this device

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

Step 1 of 8 · intro card

Learn The 4 Binding Rules

this & Binding

this is decided at call time by four rules in priority order: new, explicit (call/apply/bind), implicit (obj.method()), then default (undefined in strict mode). Passing a method as a callback detaches it and loses its this.

JavaScript fixes this when a function is called, not where it is defined. Four rules decide it: default binding (a plain call gives undefined in strict mode, the global object otherwise), implicit binding (obj.method() binds this to obj), explicit binding (call, apply, or bind force a specific this), and new binding (a constructor call binds this to the freshly created object).

When two rules could apply, priority decides: new beats explicit, explicit beats implicit, and implicit beats default. So new and call/apply/bind always win over the receiver-on-the-dot rule.

The classic bug is "losing this": setTimeout(user.show, 0) passes the function value alone, with no object on the left of any dot, so it runs under default binding and this becomes undefined. Re-attach it with user.show.bind(user) or an arrow wrapper () => user.show().

this is set at call time, not definition time.

Priority: new > explicit > implicit > default.

Default binding is undefined in strict mode.

function show() { return this; }
const user = { name: "Ann", show };
user.show();                 // implicit  -> user
show();                      // default    -> undefined (strict)
show.call({ name: "Bob" });  // explicit   -> { name: "Bob" }
new show();                  // new        -> fresh object
setTimeout(user.show, 0);    // lost this  -> undefined

Read the implementation

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

1. Implicit binding

Calling a function as obj.method() sets this to the object left of the dot, here user.

user.show();                 // implicit  -> user

2. Default binding

A plain call with no receiver gives the default binding: this is undefined in strict mode (the global object in sloppy mode).

show();                      // default    -> undefined (strict)

3. Explicit binding

call/apply/bind force this to the argument you pass, overriding how the function is invoked.

show.call({ name: "Bob" });  // explicit   -> { name: "Bob" }

4. new binding

Invoking with new creates a brand-new object and binds this to it, which the constructor returns by default.

new show();                  // new        -> fresh object

5. Losing this

Passing user.show as a bare callback detaches it from user, so it runs with the default binding and loses the object.

setTimeout(user.show, 0);    // lost this  -> undefined

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.