Master JavaScript’s call, apply, and bind: When and How to Change this Context

call()

The syntax is fun.call(thisArg[, arg1[, arg2[, ...]]]). thisArg determines the value of this inside the called function and can be:

If omitted, null, or undefined, this defaults to the window object.

A reference to another function, causing this to point to that function’s reference.

A primitive (number, string, boolean); this becomes the automatically boxed object (e.g., String, Number, Boolean).

An object, making this refer to that object.

Example:

function a(){
    console.log(this);
}
function b(){}

a.call(b); // logs function b(){}

A common pattern is converting the arguments object to a true array:

function list() {
  return Array.prototype.slice.call(arguments);
}
list(1,2,3); // returns [1, 2, 3]

After call, this points to the passed arguments object, and Array.prototype.slice internally iterates over this to build a new array.

apply()

Syntax: fun.apply(thisArg[, argsArray]). The possible values for thisArg are the same as for call. The second parameter must be an array‑like object.

Example:

var numbers = [5, 6, 2, 3, 7];
var max = Math.max.apply(null, numbers);
console.log(max); // 7

Because Math.max normally accepts a list of arguments, apply lets us pass an array directly, simplifying tasks such as finding the maximum value.

bind()

Basic usage

Syntax: fun.bind(thisArg[, arg1[, arg2[, ...]]]). bind() creates a **new function** (a bound function) without invoking the original function.

The bound function, when called, uses thisArg as its this value, and any preset arguments are placed before the arguments supplied at call time.

In short, bind produces a new function with pre‑configured parameters.

function list() {
  return Array.prototype.slice.call(arguments);
}

var leadingThirtysevenList = list.bind(undefined, 37); // bound function
var result = leadingThirtysevenList(1, 2, 3);
console.log(result); // [37, 1, 2, 3]

Simpler array conversion with bind

Using bind we can turn a method that expects a true array into a utility that works directly on array‑like objects:

var slice = Array.prototype.slice;
// ...
slice.apply(arguments); // classic approach

var unboundSlice = Array.prototype.slice;
var sliceBound = Function.prototype.apply.bind(unboundSlice);
// ...
sliceBound(arguments); // simpler call

Differences among call, apply, and bind

All three change the this binding of the target function.

call and apply invoke the function immediately; bind returns a new function without invoking it.

The way arguments are supplied differs: call takes a comma‑separated list, while apply expects a single array‑like argument.

References

For further reading, see the following articles (original Chinese sources):

http://www.cnblogs.com/coco1s/p/4833199.html

https://segmentfault.com/a/1190000004568767

https://segmentfault.com/a/1190000002929289