Recently, I was interviewed by some companies and found that many companies were studying the JS foundation. Once I asked the difference between bind, apply and call, but I failed to answer on the spot. Bind, apply and call

What all three methods have in common is the ability to change the this pointer, pass one object’s method to another, and apply and call are executed immediately.

Why do I want to change this? For example, object A has A say method, and object B needs to use this method. We don’t need to rewrite this method for B, just borrow A’s method.

apply

It is explained in the MDN document as follows:

The apply() method calls a function with a given this value and arguments in the form of an array (or array-like object).

fn.apply(obj, [argsArray])
Copy the code

Note that the callers of apply must be functions, and the second arguments must be arrays or class arrays, which will be converted to arrays passed to FN and mapped to fn’s corresponding arguments. This is an important difference between Apply and Call.

We can use apply to calculate the maximum value in an array:

const numbers = [5.6.2.3.7]

const max = Math.max.apply(null, numbers);

console.log(max);
// Output: 7
Copy the code

We can also add each item from one array to another:

let array = ['a'.'b'];
let elements = [0.1.2];
array.push.apply(array, elements);
console.info(array); 
// ["a", "b", 0, 1, 2]
Copy the code

Class arrays were mentioned earlier, but what is an array of classes?

The general characteristics of an array are:

  • You can query with index, for examplearray[0];
  • Array length propertylength;
  • throughforCirculation andforEachMethod traversal.

An array of classes is an object that has similar properties to an array (you read that right, an array of classes is an object), such as this object:

let array = {
    0: 1.1: 2.2: 3.length: 3
};
Copy the code

The array object can be called through index, has the length property, and can also be iterated through the for loop.

Note: Class arrays cannot use the methods on array prototypes like forEach, splice, and push, because they are not real arrays.

call

Call is similar to Apply, except that the Call method accepts a list of parameters, while Apply accepts an array of parameters. MDN interprets call as:

The call() method calls a function with a specified this value and one or more arguments given separately.

fn.call(obj, a, b, ...)
Copy the code

Note about call:

  • callcallThe objects andapplyAgain, it has to be a function;
  • callThe first argument to is an object, which defaults to a global object if not passedwindow;
  • Starting with the second parameter, you can take any parameter, and each parameter will be mapped to the corresponding locationfnParameter of;
  • If all the parameters are passed in as an array, they are mapped as a whole tofnAll subsequent parameters are null on the corresponding first parameter.
fn.call(obj, 1.2.3)
// fn receives parameters 1, 2, 3

fn.call(obj, [1.2.3])
// fn receives the parameters [1,2,3], undefined, undefined
Copy the code

bind

MDN defines bind as:

The bind() method creates a new function, and when bind() is called, this of the new function is specified as the first argument to bind(), and the remaining arguments will be used as arguments to the new function.

The syntax for bind is as follows:

fn.bind(obj[, arg1[, arg2[, ...]]])
Copy the code

Bind can also change the this pointer to a function, but the return value of bind is a function that needs to be called later. If the first argument to bind is null or undefined, this points to the global object Window.

const module = {
	x: 12.getX: function(){
  	return this.x; }}const unboundGetX = module.getX;
/ / unboundGetX is undefined

const boundGetX = unboundGetX.bind(module)
/ / boundGetX for 42
Copy the code

Just to summarize

  • Apply, Call, and bind can all change the execution context of an object;
  • Apply receives arrays or class arrays, call receives parameter lists, and Bind receives functions.
  • Apply and call are executed immediately; bind needs to be called later.