Module 7 · The this Keyword

Function.prototype.call

Intermediate8m read6m practice14m total

thiscallExplicit BindingMethod Borrowing

Introduction

Function.prototype.call invokes a function immediately with a specific this value and a comma-separated list of arguments: fn.call(thisArg, arg1, arg2).

It is the most direct explicit-binding tool and the foundation for many interview patterns: method borrowing, safe dynamic invocation, and repairing lost this.

Why This Matters

call shows that this is not magic ownership; it is an invocation parameter for regular functions. If you understand call, you can explain apply, bind, method borrowing, and why arrows ignore explicit binding.

Theory

Syntax

fn.call(thisArg, arg1, arg2, ...)

call does two things:

Invokes fn immediately.
Uses thisArg as this inside fn, unless fn is an arrow.

Strict vs sloppy thisArg conversion

For strict regular functions, this is exactly the thisArg you pass. For sloppy functions, null or undefined are replaced with the global object, and primitive values can be boxed. Prefer strict mental models in interviews because they avoid surprising coercion.

Method borrowing

You can use a method from one object on another object if the method only relies on this shape. For example, Array.prototype.slice.call(arrayLike) historically converted array-like values to real arrays.

call vs direct invocation

user.show() and show.call(user) can produce the same this, but they communicate different intent. Direct invocation uses the object as the receiver. call says, explicitly, run this function with this receiver.

call and arrows

call cannot change an arrow function's this, because arrows do not have their own this binding. It can still pass normal arguments.

Visual Diagrams

call supplies this and arguments separately

print.call(user, 'Hello')
  |       |       |
  |       |       +-- first normal argument
  |       +---------- thisArg
  +------------------ function to invoke now

Inside print:
  this === user
  message === 'Hello'

`call` is immediate explicit binding with positional arguments.

Code Examples

Repair a lost method with call

Even if the method was extracted, call can provide the receiver at invocation time.

Loading…

Borrow a method

This pattern works when the borrowed method only needs compatible properties on this.

Loading…

Playground

Loading editor…

Console

Press Run to execute the code and see output here.

Output Prediction

Predict the output #1

javascript

1function addToTotal(amount) {
2  this.total = this.total + amount;
3  console.log(this.total);
4}
5 
6const cart = { total: 10 };
7addToTotal.call(cart, 5);
8addToTotal.call(cart, 7);

Predict the output #2

javascript

1const outer = {
2  name: 'outer',
3  makeArrow: function () {
4    return () => {
5      console.log(this.name);
6    };
7  }
8};
9 
10const arrow = outer.makeArrow();
11arrow.call({ name: 'call' });

Coding Exercises

Implement method borrowing with call

Medium

Implement borrow(methodOwner, methodName, receiver) so it returns a function that calls methodOwner[methodName] with receiver as this and forwards one argument. Keep the exercise focused on call.

Interview Questions

1What does `Function.prototype.call` do?

call invokes a function immediately with an explicit this value and positional arguments: fn.call(thisArg, arg1, arg2). For regular functions, this inside fn is thisArg, subject to sloppy-mode conversions. Arrow functions ignore the thisArg for this binding.

Asked at:MicrosoftAmazonGoogle

2When would you use `call` instead of directly invoking a method?

Use call when the function is not being invoked through the desired receiver: method borrowing, dynamic invocation, extracted methods, or APIs where you need to provide the receiver separately. Direct obj.fn() is clearer when the function already lives on the receiver.

Quiz

1. Which call invokes `sum` with `cart` as `this` and `5` as the first argument?

2. What happens when `call` is used on an arrow function?

Summary

`call` invokes a function immediately.
The first argument to `call` is the explicit `this` value.
Remaining arguments are passed positionally to the function.
`call` is useful for method borrowing and repairing lost receivers.
Arrow functions ignore `call` for `this` binding.

Cheat Sheet

Syntax: fn.call(thisArg, arg1, arg2).

Timing: immediate invocation.

Arguments: comma-separated.

Use cases: method borrowing, dynamic invocation, lost-this repair.

Arrow caveat: arguments pass through, but thisArg is ignored for this.