call, apply and bind

Lesson 4 listed explicit binding as the second of the four rules for this. Three methods every function has implement it.

function introduce(greeting, punctuation) {
  return `${greeting}, I am ${this.name}${punctuation}`;
}
const ana = { name: "Ana" };

introduce.call(ana, "Hi", "!");      // calls now, arguments listed
introduce.apply(ana, ["Hi", "!"]);   // calls now, arguments as an array
const hi = introduce.bind(ana, "Hi"); // calls nothing, returns a function
hi("?");                              // "Hi, I am Ana?"

• call(thisArg, ...args) invokes the function once with that this.
• apply(thisArg, argsArray) is the same with the arguments in an array. Before spread syntax it was how you passed an array as arguments (Math.max.apply(null, nums)); today Math.max(...nums) does the same.
• bind(thisArg, ...args) invokes nothing. It returns a new function with this fixed and the given arguments pre-filled in front of whatever the caller passes later.

Partial application

Pre-filling leading arguments is useful on its own, even when this does not matter (pass null):

const add = (a, b) => a + b;
const addTen = add.bind(null, 10);
[1, 2, 3].map((n) => addTen(n));   // [11, 12, 13]

Bound is bound for good

A bound function ignores any later attempt to change its this — a second bind, call or apply can add arguments but cannot replace the this that the first bind fixed. Arrow functions go further: they have no this of their own, so call, apply and bind cannot give them one either.

1function whoAmI(...args) {2  return `${this.name} [${args.join(",")}]`;3}4 5export function run() {6  const a = { name: "A" };7  const b = { name: "B" };8  const boundToA = whoAmI.bind(a, 1);9  const outer = { name: "outer" };10  const arrow = function () {11    return () => this === outer;12  }.call(outer);13 14  return {15    bound: boundToA(2),16    reboundToB: boundToA.bind(b, 3)(4),17    calledWithB: boundToA.call(b, 5),18    arrowGivenThis: (() => this?.name ?? "no name").call(b),19    arrowFromOuter: arrow(),20    sameFunction: whoAmI.bind(a) === whoAmI.bind(a),21  };22}

Borrowing methods

call lets one object use another's method. A classic case is an array-like value — something with length and numeric keys but no array methods, such as arguments or a DOM NodeList:

1function collect() {2  return {3    isArray: Array.isArray(arguments),4    doubled: Array.prototype.map.call(arguments, (n) => n * 2),5    viaFrom: Array.from(arguments).reverse(),6  };7}8 9export function run() {10  const arrayLike = { 0: "x", 1: "y", length: 2 };11  return {12    fromArguments: collect(1, 2, 3),13    positionOfY: Array.prototype.indexOf.call(arrayLike, "y"),14    maxViaApply: Math.max.apply(null, [3, 9, 4]),15    maxViaSpread: Math.max(...[3, 9, 4]),16  };17}

Array.from(arrayLike) is usually the clearer way to get a real array, but recognising Array.prototype.map.call(...) in older code is worth it.

Wrappers forward this with apply

Logging, timing and retry helpers wrap a function in another one. If the wrapped function is a method, the wrapper must hand on the this it was called with — so it has to be a regular function, which gets a this from its call site, and it calls the original with fn.apply(this, args). An arrow wrapper would use the this of the place it was written, and fn(...args) would call the method with no receiver at all. The exercise builds one.

Common mistakes

• Calling the result of bind too early. button.onclick = handler.bind(obj)() runs the handler immediately and assigns its return value; bind already returns the function you want.
• Re-binding to "fix" this. f.bind(a).bind(b) still uses a.
• Expecting call to change an arrow function's this. It has no effect; the arrow keeps the of the scope it was written in.