Usage and differences of call, apply and bind

1. Interaction

• Change the direction of this

2. Differences

• The difference between call and apply: the methods of accepting parameters are different.

  call receives multiple parameters

  Function.call(obj,[param1[,param2[,...[,paramN]]]])

  apply receives an array list

  Function.apply(obj[,argArray])

• bind: do not execute immediately. apply and call are executed immediately.

  Function.bind(thisArg[, arg1[, arg2[, ...]]])

//Different ways of receiving parameters
let name = 'windowObj';
function func1(age){
    console.log(this.name,age);
}
let obj = {name:'newObj'};
//Call native method
func1(18)			//Output windowObj18
//Change this point
func1.call(obj,22)	//Output newObj22
func1.apply(obj,[22])	//Output newObj22
let func2 = func1.bind(obj,22);	//bind itself does not call methods
func2()				//Output newObj22 		 Or write func1 directly Bind (obj, 22) () can also be called

3. Specific analysis I (change the direction of this in the function body)

function Person(name){
  this.name = name;
}
Person.prototype = {
  constructor: Person,
  showName: function(){
    console.log(this.name);
  }
}
var person = new Person('tom');
person.showName();

Create a new object

var animal = {
  name: 'jerry'
}

I want person After you change the name of showname () to this, you need to change the name of showname () to this

person.showName.call(animal);

person.showName.apply(animal);

person.showName.bind(animal)();//It will not be executed immediately and needs to be called

4. Specific analysis 2 (the difference between call and apply: the methods of accepting parameters are different.)

var arr = [1,5,9,3,5,7];
// The second parameter of apply must be an array (or class array object) containing multiple parameters
Math.max.apply(Math, arr);
Math.max.call(Math, 1,5,9,3,5,7);
Math.min.apply(Math, arr);
Math.min.call(Math, 1,5,9,3,5,7);

5. Application scenarios of call and apply

5.1 usage scenario of call

• 1. Object inheritance

function superClass () {
    this.a = 1;
    this.print = function () {
        console.log(this.a);
    }
}

function subClass () {
    superClass.call(this);
    this.print();
}

subClass();
// 1

subClass inherits the print method and a variable of superClass through the call method. In addition, subClass can extend its own other methods.

• 2. Borrowing method

Remember the class Array just now? If it wants to use the method on the Array prototype chain, it can be as follows:

let domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

In this way, domNodes can apply all methods under Array.

5.2 some wonderful uses of apply

• 1,Math.max. Use it to get the largest item in the array.

let max = Math.max.apply(null, array);
//Gets the smallest item in the array
let min = Math.min.apply(null, array);

• 2. Merge two arrays.

Before the extension operator of ES6 appears, we can use array prototype. Push

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

Array.prototype.push.apply(arr1, arr2);
console.log(arr1); // [1, 2, 3, 4, 5, 6]

6. Final summary

The main function of call and apply is to change the execution context of the object and execute it immediately. They have slightly different writing methods on parameters.

bind can also change the execution context of an object. Unlike call and apply, the return value is a function that needs to be called later.

Welcome to communicate

[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-gzBFw9fV-1627702834105)(3.call_apply_bind usage and differences. assets/image-20210728210314596.png)]
There is a slight difference in the writing method of parameters.

bind can also change the execution context of an object. Unlike call and apply, the return value is a function that needs to be called later.

Welcome to communicate