Polyfill call, apply & bind

Build call, apply, and bind yourself

Inside a function, this is the object the function works on. In the call, apply & bind lesson, you used three built-in methods that every function has. Each one lets you choose this:

• call runs the function now. You pass the extra values one by one.
• apply runs the function now. You pass the extra values in one list.
• bind does not run the function. It makes a new function that runs it later.

In this lesson, you write your own copies of all three. Seeing how they work inside makes the rules from The this keyword and Losing this easier to remember.

This lesson uses ideas from these lessons:

• Methods & this and Strict mode
• Functions are objects and Symbols
• Currying & partial application
• Constructors & new and F.prototype & constructors

Two other lessons also build a built-in yourself: Polyfill array methods and Build a promise from scratch.

Here is the main trick. When you call a function from an object, like user.label(), JavaScript sets this to that object. The object that becomes this is called the receiver. So myCall does four things:

1. It puts the function on the receiver for a moment, under a new key.
2. It calls the function from the receiver: receiver[key](...args).
3. It deletes the key again.
4. It returns what the function returned.

The key is a Symbol. A Symbol is a unique value that you can use as a property key. Press Step to follow the code.

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, ", "!"));

Line by line:

• Line 3 picks the receiver. thisArg is the value you asked to use as this. If it is null or undefined, the line uses globalThis, the global object. Otherwise Object(thisArg) makes sure it is an object.
• Line 4 makes a new Symbol key.
• Line 6 puts the function on the receiver under that key. Object.defineProperty adds one property; configurable: true lets us delete it later.
• Line 7 calls the function from the receiver, so this is the receiver.
• Line 9 deletes the key. It is in a finally block, which runs even if the function throws an error.

const user = { name: "Asha", __fn: "keep this value" };
const key = Symbol("temporary function");
user[key] = function () { return this.name; };
console.log(user.__fn, user[key]());
console.log(Reflect.ownKeys(user).includes(key));
delete user[key];
console.log(user.__fn, Object.hasOwn(user, key));

• Line 1 makes a user that already has a __fn property.
• Line 3 adds a function under a Symbol key.
• Line 4 prints keep this value Asha. The old __fn value is still there, and the function read this.name.
• Line 5 prints true. Reflect.ownKeys lists all of an object's own keys, and the Symbol is one of them for now.
• Line 6 deletes the key. So line 7 prints keep this value false. Object.hasOwn checks if the object has a key, and it doesn't any more.

The trick has one weak spot. It must add a property to the receiver, and some objects don't allow that.

function myCall(fn, thisArg) {
  const key = Symbol("temporary function");
  thisArg[key] = fn;
  try { return thisArg[key](); }
  finally { delete thisArg[key]; }
}
const user = Object.preventExtensions({ name: "Asha" });
function greet() { return this.name; }
try { console.log(myCall(greet, user)); }
catch (error) { console.log(error.name); }
console.log(greet.call(user));

It prints TypeError, then Asha. On line 7, Object.preventExtensions stops anyone from adding new properties to user. So the helper can't add its Symbol key, and the call fails with a TypeError. The built-in call on line 11 doesn't add anything to the object, so it still works.

thisArg is the first value you pass to call: the value you want as this. What the function really gets depends on one thing: is the function in strict mode? A function is in strict mode when it, or the file around it, starts with "use strict". Code without it is often called sloppy mode.

You also need one more word. A primitive is a plain value that is not an object, like a number or a string. Here are the rules:

• In a sloppy function, null and undefined become globalThis. A primitive such as 5 is wrapped in an object, here a Number object. This wrapping is called boxing.
• In a strict function, this is exactly what you passed. undefined stays undefined, null stays null, and 5 stays the number 5.

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

The six lines print, in order:

• Lines 23 and 24 print true. In sloppy functions, null and undefined both became globalThis.
• Lines 25 and 26 print true. In strict functions, undefined and null stayed as they were.
• Line 27 prints [object Number]. The sloppy function got 5 boxed in a Number object.
• Line 28 prints number. The strict function got the plain number 5.

myCall copies the sloppy rules. Its line 3 uses globalThis for null and undefined, and Object(thisArg) boxes primitives.

But myCall can't copy the strict rule. To set this, it must call the function from an object, and undefined is not an object. So a strict function gets globalThis instead of undefined.

apply works like call. The only difference is how you pass the extra values. call takes them one by one. apply takes them in one list, as its second value. That list can be:

• null or undefined, which means "no values".
• An array, like ["Ada", "Grace"].
• An array-like object: an object with a length and numbered keys, like { 0: "Ada", 1: "Grace", length: 2 }.

Anything else, like the number 7, is not a list. Then apply throws a TypeError before the 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 handles null and undefined. It calls myCall with no extra values.
• Lines 13 to 15 throw a TypeError if the list is not an object or a function.
• Line 16 uses Array.from to turn the array-like object into a real array. The ... (spread) then passes its items to myCall one by one.
• Line 22 prints Team: Ada & Grace.

Today, when you just need to pass an array's items one by one, spread is easier to read than apply:

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

Both lines print 9.

bind does not run the function. It returns a new function, called a wrapper, that runs the original later. When you call the wrapper:

• It uses the this you gave to bind.
• It passes the values you gave to bind first, then the values from the call.

Saving the first values ahead of time is called partial application. The currying lesson covers it in more detail.

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("!"));

Lines 4 to 7 use the built-in bind:

• Line 4 saves 2 as the first value. null is the this, which multiply doesn't use.
• Line 5 prints bound multiply. A bound function's name starts with "bound ".
• Line 6 prints 2. A function's length is how many parameters it lists. multiply has 3, and one is already filled, so 2 are left.
• Line 7 prints 24, because 2 * 3 * 4 is 24.

Lines 12 to 14 bind a function twice. Line 12 binds Ada. Line 13 tries to bind Grace. Line 14 prints Ada!. The first bound this stays. A second bind can add more values, but it can't change this.

This lesson's myBind also tries to set name and length the same way, with Object.defineProperty. Some older JavaScript engines (the programs that run your code) don't allow that. Then the helper skips it, and the wrapper still works.

Be careful with length. It stops counting at the first parameter with a default value, like punctuation = "!", or at a rest parameter, like ...items. So don't use it to check how a function should be called.

function greet(name, punctuation = "!") {
  return "Hi, " + name + punctuation;
}
const greetAsha = greet.bind(null, "Asha");
console.log(greetAsha.name);
console.log(greetAsha.length);

Line 5 prints bound greet. Line 6 prints 0. greet.length is 1, because counting stops at punctuation, which has a default. Binding name takes away that one, so 0 are left. It never goes below 0.

You can also call a bound function with new. new calls a function as a constructor: it makes a fresh object and runs the function with that object as this. When you use new on a bound function:

• The bound this is not used. The fresh object is this instead.
• The saved values still come first.
• The fresh object is still a Point, so point instanceof Point is true. instanceof checks if an object was made from a constructor's prototype.

Simple bind helpers often get this case wrong.

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

Press Step to follow new BoundPoint(2). Two tools do the work:

• new.target is set only when a function is called with new. Line 3 uses it to check.
• Reflect.construct(fn, args, newTarget) runs fn with new and the values in args. Line 6 uses it, so Point runs as a constructor and the bound object is never used.

Before new.target existed, bind polyfills used a different trick. They made an empty helper function, Empty, and gave it Point's prototype. Then this instanceof Empty told them if new was used:

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);

• Line 2 makes the empty helper function.
• Line 4 checks: was this call made with new? If so, it uses the fresh object. If not, it uses thisArg.
• Lines 8 and 9 link the prototypes, so an object made by bound also counts as a Point.
• Line 20 calls it with new, and line 21 prints true.

Two more cases show why Reflect.construct is the better tool:

class Member {
  constructor(name) { this.name = name; }
}
function myBind(fn, thisArg, ...preset) {
  function boundFunction(...later) {
    const args = [...preset, ...later];
    if (new.target) {
      return Reflect.construct(fn, args, new.target === boundFunction ? fn : new.target);
    }
    return fn.apply(thisArg, args);
  }
  return boundFunction;
}
const BoundMember = myBind(Member, { name: "ignored" }, "Asha");
const member = new BoundMember();
console.log(member.name, member instanceof Member);

function Profile(name) {
  this.name = name;
  return { name: "Returned" };
}
const BoundProfile = myBind(Profile, null, "Asha");
const profile = new BoundProfile();
console.log(profile.name, profile instanceof Profile);

• Line 16 prints Asha true. Member is a class, and a class only runs with new. Reflect.construct runs it with new, skips the bound object, and makes a real Member.
• Line 24 prints Returned false. Profile returns its own object on line 20. With new, a returned object takes the place of the fresh one. So profile is that returned object, not a Profile.

Calling a constructor with apply can't do either of these.

People call the built-in methods native. A polyfill is only useful if you know where it matches the native method and where it doesn't. The table lists each case. The lab below it runs both and shows the real values. The biggest difference is the strict undefined case from earlier.

Read each row as: in this case, does the helper give the same result as the native method, and why?

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}

• Line 4 prints Ada, not Grace. The arrow made on line 2 keeps the this from line 3.
• Lines 10 and 11 print TypeError and its message, which says the class can't run without new.

You may never ship these helpers. But the same ideas show up in everyday code:

• Event handlers use bind, or a wrapper function, to keep their object as this.
• Libraries borrow array methods, like join, and use them on array-like objects.
• Helper code uses bind to save a value that repeats, like a log prefix, a tax rate, or a language setting.

const user = {
  name: "Asha",
  greeting() { return "Hello, " + this.name; },
};
const showGreeting = user.greeting.bind(user);
console.log(showGreeting());

It prints Hello, Asha. Suppose you passed user.greeting on its own to other code. When that code calls it later, it has lost user. Line 5 uses bind to make a function that keeps user as this.

In real apps, use the built-in call, apply, and bind. They handle strict functions, constructors, and the other cases correctly. The helpers in this lesson are for learning. If a very old browser needs a polyfill, use a well-tested polyfill library, not these snippets.

Modern JavaScript often has a clearer way to do the same job:

• Write Math.max(...numbers) instead of Math.max.apply(null, numbers).
• A small arrow wrapper, like () => user.greeting(), is often easier to read than bind.
• Use Object.hasOwn(obj, key) instead of borrowing hasOwnProperty with call, when the browsers you support have it.

Common misconceptions

• “The Symbol trick is how JavaScript really does it.” No. It shows the idea of calling from an object. The built-in method works inside the engine and adds no property.
• “Strict and sloppy functions get the same this.” No. Strict functions get exactly what you passed. Sloppy functions swap null and undefined for globalThis, and box primitives.
• “apply takes any list-like value.” No. Native apply wants an array or an array-like object: something with a length and numbered keys. This lesson's helper checks the value first, then uses Array.from.
• “bind only sets this.” No. It also saves the first values, and you can use the bound function with new.
• “Binding twice changes this again.” No. The first bound this stays.
• “A bound constructor writes into the bound object.” No. new makes a fresh object and skips the bound one.
• “A Symbol key makes the helper complete.” No. The Symbol stops key clashes. But the helper still fails on objects that can't get new properties, and it can't give a strict function undefined as this.
• “A function's length shows all its parameters.” No. It stops counting at the first default value or rest parameter.
• “A class is just a function you can call.” No. A class throws a TypeError unless you use new.

Read each row across: when the tool runs, what you pass it, and how this lesson builds it.

Key takeaways

• myCall puts the function on the object under a new Symbol key, calls it from there, then deletes the key.
• myApply is myCall plus two steps: check the list, then turn it into an array with Array.from.
• The Symbol trick can't give a strict function undefined as this. That is where it differs most from the built-in.
• myBind returns a wrapper. The wrapper sets this, puts the saved values first, and uses new.target to handle new.
• name, length, arrow functions, classes, and constructors that return objects are the cases that make a full polyfill hard.

Coming next: Build a promise from scratch.