The difference between call, apply and bind is the call method and parameter passing: 1.call executes the function immediately and passes parameters one by one; 2. apply executes the function immediately but passes parameters in an array; 3.bind does not execute the function but returns the bound new function, which is suitable for delayed calls. In addition, bind also supports preset parameters to implement partial function applications.

call , apply and bind in JavaScript seem to be used to change this pointing when function execution, but there are still obvious differences between them. Understanding their respective features and applicable scenarios will allow you to control the function context more flexibly when writing code.

call and apply: call the function and specify this

The main function of these two methods is the same - calling a function and specifying this value inside the function . The difference is that the parameters are passed in different ways:

• call(thisArg, arg1, arg2, ...)
  Parameters are passed in sequence, suitable for the case where the specific number of parameters is known.

  

• apply(thisArg, [argsArray])
  The second parameter is an array or class array object, suitable for cases where the number of parameters is not fixed or there is already an array.

For example:

 function greet(greeting, punctuation) {
  console.log(greeting ', ' this.name punctuation);
}

const person = { name: 'Alice' };

greet.call(person, 'Hello', '!'); // Hello, Alice!
greet.apply(person, ['Hi', '!!']); // Hi, Alice!!

As you can see, the functions of the two are almost the same, but the transmission methods are slightly different. If you already have an array, use apply ; if the parameters are clear, use call is more intuitive.

bind: bind this and return a new function

The function of bind is to change this inside the function, but it does not execute the function immediately , but returns a new function, which can be called later.

The syntax is as follows:

 function.bind(thisArg, arg1, arg2, ...)

This feature makes it very suitable for use in scenarios such as event processing, callback functions, etc. that require delayed execution.

for example:

 function saysHi() {
  console.log('Hi, I am ' this.name);
}

const user = { name: 'Bob' };
const boundSayHi = sayHi.bind(user);

boundSayHi(); // Hi, I am Bob

Here sayHi.bind(user) returns a new function that binds this to user . No matter how it is called, this.name is 'Bob' .

Use scenario comparison

You may encounter such a situation:

• When calling the parent class constructor, use call or apply ;
• When performing "borrow" operations on an array, such as [].slice.apply(arguments) ;
• When binding a function to the DOM event, use bind to ensure that this is not lost.

Small details: bind can also be used as partial application (Partial Application)

In addition to binding this , bind also supports preset partial parameters, which is particularly useful in some scenarios.

for example:

 function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);
console.log(double(5)); // 10

Here we set the first parameter to 2 and create a new double function. This technique is called "partial function application" and can simplify subsequent calls.

Basically that's it. The three methods perform their duties: call and apply are called immediately, the difference is only in the pass parameter method; bind is to return a new function after binding, which is suitable for delayed calls. Mastering their differences will allow you to control the function execution environment more easily in JavaScript.

The above is the detailed content of JavaScript: call vs. apply vs. bind – Key Differences. For more information, please follow other related articles on the PHP Chinese website!