What does Function.prototype.bind do?

bind() returns a new function whose this is locked to the value you pass. It does not call the original — that is the difference from call() and apply(), which invoke immediately.

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

const loose = counter.increment;
loose();                       // TypeError: `this` is undefined

const bound = counter.increment.bind(counter);
bound();                       // works, counter.count === 1

The problem it solves: pulling a method out of its object detaches it from that object. Passing counter.increment to setTimeout or an event listener does exactly that, and this is lost.

Partial application

Arguments given to bind after the this value are fixed permanently and come before any arguments supplied later:

function log(level, message) {
  console.log(`[${level}] ${message}`);
}

const warn = log.bind(null, "WARN");
warn("disk almost full");      // [WARN] disk almost full

Worth knowing

• Binding twice does nothing: the first binding wins, bound.bind(other) still uses the original this.
• A bound function called with new ignores the bound this — the new instance takes over.
• Each bind() call creates a different function object, so removeEventListener cannot remove a listener you bound inline. Store the bound reference first.
• In modern code an arrow function or a class field increment = () => {} usually reads better and achieves the same thing.