call, apply & bind

Explicit this in one sentence

The previous lesson, The this keyword, introduced the four binding rules: default, implicit, explicit, and new. This lesson zooms in on explicit binding: choosing this yourself with call, apply, or bind.

Here is the core idea: call and apply run a function now with a chosen this; bind creates a new function that remembers a chosen this for later. They do not change the original function. They only decide how it is invoked.

You will also borrow methods from built-in objects, then write a small myBind helper. Later lessons named Currying & partial application and Polyfill call, apply & bind go deeper; here we build the accurate everyday model.

call and apply are twins. Both run the function immediately. Their first argument is the value to use as this. The difference is how the remaining arguments are delivered.

Try the same introduce function with different target objects. The code line shown is the line you would type in a console.

1function introduce(greeting, punctuation) {2  return `${greeting}, I'm ${this.name}${punctuation}`;3}4 5const ada = { name: "Ada" };6const grace = { name: "Grace" };7const linus = { name: "Linus" };8 9introduce.call(ada, "Hello", "!");

The important part is not where the function was written. It is how it is called. introduce.call(ada, "Hello", "!") says: “Run introduce now, and inside it make this be ada.” apply says the same thing, but it accepts ["Hello", "!"] as the argument bag. Remember a for array.

1function introduce(greeting, punctuation) {Run2  return `${greeting}, I'm ${this.name}${punctuation}`;3}4 5const ada = { name: "Ada" };6const grace = { name: "Grace" };7 8introduce.call(ada, "Hello", "!");9introduce.apply(grace, ["Hi", "."]);

bind does not run the function. It returns a new function. That new function remembers the this value you gave it. It can also remember one or more leading arguments. Saving some arguments now and supplying the rest later is called partial application.

1function introduce(greeting, punctuation) {Run2  return `${greeting}, I'm ${this.name}${punctuation}`;3}4function multiply(a, b) {5  return a * b;6}7 8const ada = { name: "Ada" };9const grace = { name: "Grace" };10const adaIntro = introduce.bind(ada, "Hello");11const double = multiply.bind(null, 2);12 13adaIntro.call(grace, "!");14double === multiply;15double(5);16double.name;17double.length;18 19function Person(name) {20  this.name = name;21}22const BoundPerson = Person.bind({ name: "Ignored" });23const student = new BoundPerson("Maya");24student.name;

Notice the professional edge cases: a bound function is not identical to the original; name often starts with "bound "; length is reduced by the number of preset arguments; and if you call a bound function with new, the new object becomes this instead of the bound object.

Method borrowing means using a method from one value on another value that has a compatible shape. The Iterating arrays lesson introduced array-like values; now you can see why borrowing array methods works.

1function collect() {Run2  const args = Array.prototype.slice.call(arguments);3  return args.join(" | ");4}5 6const letters = Array.prototype.join.call("abc", "-");7const nums = [4, 9, 2];8const biggestOld = Math.max.apply(null, nums);9const biggestNow = Math.max(...nums);10const hasName = Object.prototype.hasOwnProperty.call({ name: "Ada" }, "name");11const hasNameModern = Object.hasOwn({ name: "Ada" }, "name");12collect("red", "green", "blue");

Modern JavaScript often has clearer alternatives: Math.max(...nums) instead of Math.max.apply(null, nums), and Object.hasOwn(obj, key) instead of borrowing hasOwnProperty. Still, reading older code and writing defensive utilities requires understanding the borrowed-method pattern.

A real polyfill would carefully match the language specification and patch Function.prototype only when needed. For a lesson, patching global prototypes in site code would be noisy, so we will write a helper function instead: myBind(fn, thisArg, ...preset).

function myBind(fn, thisArg, ...preset) {
  return function boundFunction(...args) {
    return fn.apply(thisArg, [...preset, ...args]);
  };
}

function introduce(greeting, punctuation) {
  return `${greeting}, I'm ${this.name}${punctuation}`;
}

const ada = { name: "Ada" };
const sayHello = myBind(introduce, ada, "Hello");
sayHello("!");

1function myBind(fn, thisArg, ...preset) {Run2  return function boundFunction(...args) {3    return fn.apply(thisArg, [...preset, ...args]);4  };5}6 7function introduce(greeting, punctuation) {8  return `${greeting}, I'm ${this.name}${punctuation}`;9}10 11const ada = { name: "Ada" };12const sayHello = myBind(introduce, ada, "Hello");13sayHello("!");

Where you’ll use this

These methods appear most often in four places. First, event handlers and timers may call a method without its object, so bind can preserve the intended receiver. The later Losing this lesson focuses on that bug; here is the preview:

const counter = {
  count: 0,
  increment() {
    this.count += 1;
    console.log(this.count);
  }
};

setTimeout(counter.increment.bind(counter), 1000);

Second, utilities can partially apply a function: const logError = console.error.bind(console, "Error:"). Third, libraries borrow methods defensively, especially hasOwnProperty. Fourth, older code uses apply to turn arrays into argument lists; newer code usually uses spread.

Common misconceptions

• “call changes the function forever.” No. It chooses this for one immediate run.
• “apply is older bind.” No. apply runs now with an array of arguments; bind returns a function for later.
• “bind only fixes this.” It can also preset arguments, which is partial application.
• “A bound function’s this can be replaced with call.” No. A later call can pass more arguments, but the bound this stays.
• “Borrowed methods work on anything.” They only work when the target has the shape the method expects.
• “Our myBind is a complete polyfill.” It teaches the core forwarding idea, but skips new, name, and length details.

Key takeaways

• call(thisArg, ...args) runs now and lists arguments one by one.
• apply(thisArg, argsArray) runs now and takes arguments from one array-like value.
• bind(thisArg, ...preset) returns a new function that remembers this and optional leading arguments.
• Borrowing methods works when the borrowed method’s expectations match the target’s shape.
• A simplified bind helper is fn.apply(thisArg, [...preset, ...args]) inside a returned function, but native bind does more.

Up next: Arrow functions & lexical this.