Polyfill call, apply & bind

Rebuild the this controls

The everyday call, apply & bind lesson taught what these methods do. The this keyword and Losing this taught why the call site matters. Now you will rebuild the machinery so the rules stop feeling magical.

We will connect the implementation to Methods & this, Functions are objects, Currying & partial application, Constructors & new, F.prototype & constructors, Strict mode, and Symbols. The neighboring build-it-yourself lessons are Polyfill array methods and Build a promise from scratch.

The core trick is short: put the function on the target object under a unique Symbol, call it as receiver[key](...args), delete the property, then return the original result. The property call is what makes JavaScript set this to the receiver.

1function myCall(fn, thisArg, ...args) {Run2  if (typeof fn !== "function") throw new TypeError("Target must be callable");3  const receiver = thisArg == null ? globalThis : Object(thisArg);4  const key = Symbol("myCall");5  try {6    Object.defineProperty(receiver, key, { value: fn, configurable: true });7    return receiver[key](...args);8  } finally {9    delete receiver[key];10  }11}12 13function label(prefix, punctuation) {14  return prefix + this.name + punctuation;15}16const user = { name: "Ada" };17console.log(myCall(label, user, "Hi, ", "!"));

Read the steps line by line. Line 3 chooses the receiver. Line 4 creates a collision-proof key. Line 6 installs the function for one moment. Line 7 invokes it as a method. Line 9 cleans up even if the original function throws, because the cleanup sits in finally.

Native call passes a receiver into the function call. What the function sees then depends on whether the target function is strict. In a sloppy classic script, null and undefined become globalThis, and primitives are boxed. In a strict function, undefined stays undefined, null stays null, and primitives stay primitive.

1function sloppyNull() {2  return this === globalThis;3}4function strictUndefined() {5  "use strict";6  return this === undefined;7}8function strictNull() {9  "use strict";10  return this === null;11}12function sloppyPrimitive() {13  return Object.prototype.toString.call(this);14}15function strictPrimitive() {16  "use strict";17  return typeof this;18}19 20console.log(sloppyNull.call(null));21console.log(strictUndefined.call(undefined));22console.log(strictNull.call(null));23console.log(sloppyPrimitive.call(5));24console.log(strictPrimitive.call(5));

A Symbol-property polyfill can match the common sloppy behavior by using Object(thisArg) and globalThis. It cannot perfectly pass undefined into a strict target, because the trick itself must call receiver[key](). That honesty is part of writing a production-quality lesson: know where the trick stops.

apply is call with one packaging difference. Its second argument is either null or undefined for “no arguments,” or an object with length and indexed values. A primitive such as 7 is not an argument bag and should throw a TypeError before the original function runs.

1function myCall(fn, thisArg, ...args) {2  const receiver = thisArg == null ? globalThis : Object(thisArg);3  const key = Symbol("myCall");4  try {5    Object.defineProperty(receiver, key, { value: fn, configurable: true });6    return receiver[key](...args);7  } finally {8    delete receiver[key];9  }10}11function myApply(fn, thisArg, argsArray) {12  if (argsArray == null) return myCall(fn, thisArg);13  if (typeof argsArray !== "object" && typeof argsArray !== "function") {14    throw new TypeError("CreateListFromArrayLike called on non-object");15  }16  return myCall(fn, thisArg, ...Array.from(argsArray));17}18function list(a, b) {19  return this.prefix + a + " & " + b;20}21const args = { 0: "Ada", 1: "Grace", length: 2 };22console.log(myApply(list, { prefix: "Team: " }, args));

Line 12 accepts null and undefined. Lines 13–15 reject non-objects. Line 16 turns an array-like value into real arguments with Array.from. Today, if you only need to unpack an array, spread syntax is clearer:

1const scores = [4, 9, 2];2console.log(Math.max.apply(null, scores));3console.log(Math.max(...scores));

bind returns a new function. Normal calls to that wrapper use the original function with the bound this value and a combined argument list: preset values first, later values after them. That is partial application, the same idea explored in the currying lesson.

1function multiply(a, b, c) {2  return a * b * c;3}4const nativeDouble = multiply.bind(null, 2);5console.log(nativeDouble.name);6console.log(nativeDouble.length);7console.log(nativeDouble(3, 4));8 9function showName(punctuation) {10  return this.name + punctuation;11}12const first = showName.bind({ name: "Ada" });13const rebound = first.bind({ name: "Grace" });14console.log(rebound("!"));

Native bound functions also expose metadata. The name is prefixed with "bound ", and length is the number of remaining parameters after preset arguments. This lesson’s standalone myBind attempts those with Object.defineProperty, but the behavior is best effort because older engines may not let you redefine function metadata.

Binding twice does not replace the first bound this. The second wrapper can add more preset arguments, but the first receiver wins.

The constructor case is the part simplified helpers usually miss. When a bound function is called with new, the bound thisArg is ignored. JavaScript creates a fresh instance, prepends the bound arguments, and keeps the original prototype relationship so point instanceof Point is true.

1function myBind(fn, thisArg, ...preset) {Run2  function boundFunction(...later) {3    const usingNew = new.target !== undefined;4    const receiver = usingNew ? this : thisArg;5    const result = fn.apply(receiver, [...preset, ...later]);6    return result;7  }8  if (fn.prototype) {9    boundFunction.prototype = Object.create(fn.prototype);10  }11  return boundFunction;12}13 14function Point(x, y) {15  this.x = x;16  this.y = y;17}18Point.prototype.label = function () {19  return this.x + "," + this.y;20};21 22const BoundPoint = myBind(Point, { x: 99, y: 99 }, 1);23const point = new BoundPoint(2);24console.log(point.label());25console.log(point instanceof Point);

Modern helpers can use new.target to detect the constructor branch. Older MDN-style polyfills used an empty bridge function and an instanceof check to make the prototype chain work:

1function classicBind(fn, thisArg, ...preset) {2  function Empty() {}3  function bound(...later) {4    const receiver = this instanceof Empty ? this : thisArg;5    return fn.apply(receiver, preset.concat(later));6  }7  if (fn.prototype) {8    Empty.prototype = fn.prototype;9    bound.prototype = new Empty();10    // Keep Empty.prototype intact because bound uses instanceof Empty.11  }12  return bound;13}14 15function Point(x, y) {16  this.x = x;17  this.y = y;18}19const BoundPoint = classicBind(Point, { x: 99 }, 1);20const point = new BoundPoint(2);21console.log(point instanceof Point);

A polyfill is only useful when you can name its faithfulness. The table is the map; the lab below produces the values with real JavaScript. The most important mismatch is strict receiver substitution in myCall.

1// All helpers are standalone; no built-in prototype is patched.2const cases = [3  "normal object receiver",4  "strict undefined receiver",5  "primitive receiver",6  "array-like apply arguments",7  "partial bind",8  "bind with new",9  "name and length",10  "class constructor call",11];12for (const label of cases) {13  console.log(label);14}

1const arrow = (function makeArrow() {2  return () => this.name;3}).call({ name: "Ada" });4console.log(arrow.call({ name: "Grace" }));5 6class Widget {}7try {8  Widget.call({});9} catch (error) {10  console.log(error.name);11  console.log(error.message);12}

These helpers show up in practical code even when you never ship the polyfill. Event handlers use bind or wrappers to preserve a receiver. Libraries borrow array methods for array-like values. Utility code partially applies repeated options such as logging prefixes, tax rates, locales, or sort directions.

Modern JavaScript often prefers clearer syntax once you understand the old pattern: Math.max(...numbers) instead of apply, wrappers instead of repeated bind in hot render paths, and Object.hasOwn instead of a borrowed hasOwnProperty when your target environments support it.

Common misconceptions

• “The Symbol trick is the spec.” It teaches the call-site mechanism, but it is not a full engine-level implementation.
• “Strict and sloppy receivers behave the same.” Strict functions keep exact receivers; sloppy functions substitute and box.
• “apply accepts any iterable.” Native apply wants an object argument list. This lesson uses Array.from for array-like values after validation.
• “bind only fixes this.” It also presets leading arguments and can be used with new.
• “Binding twice changes this again.” The first bound receiver wins.
• “A bound constructor writes into the bound object.” new creates a fresh instance and ignores the bound thisArg.
• “Classes are just functions for call.” Class constructors throw when invoked without new.

Key takeaways

• myCall uses a unique Symbol property so the original function can be invoked as a method of the receiver.
• myApply is myCall plus argument-list validation and Array.from for array-like values.
• Strict receiver semantics are the main place a pure Symbol trick is not fully spec-faithful.
• myBind returns a wrapper that fixes this, prepends preset arguments, and treats new specially with new.target.
• Native bind metadata, arrows, classes, and constructor return values are the edges that separate a learning helper from a production polyfill.

Up next: build a promise from scratch.