Formally speaking, these three methods can hijack the methods of another object and inherit the properties of another object. Generally speaking, it can change the direction of this.

1,apply

1. Basic use

Syntax: apply(T,A)
T: Change the direction of this
A: Passed parameter, array type
Specific demonstration:

  window.name = 'window'
  let parent1 = {
    name: 'parent'
  }

  function child1() {
    console.log(this.name);
  }

  child1()  // window
  child1.apply(parent1)  // parent

When we don't change the direction of this, this of the child() function is window, because child() is called by window by default.
But when I use apply to make this point to parent1, this Name is the name of parent1.

2. Class inheritance

Of course, apply is often used as a class inheritance:

  function Parent1(name, sex) {
    this.name = name
    this.sex = sex
  }
  function Child2(name, sex, age) {
    Parent1.apply(this, arguments) // Parameters are passed in array type, and the order of parameters should correspond
    this.age = age
  }

  let a = new Child2('lis', 'male', 22)
  console.log(a);

2,call

1. Basic use

Syntax: call(T,arg1,arg2,arg3...)
T: Change the direction of this
arg1,2,3...: Parameters passed, separated by commas
Specific demonstration:

  window.name = 'window'
  let parent1 = {
    name: 'parent1'
  }

  function child1() {
    console.log(this.name);
  }

  child1() // window
  child1.call(parent1) // parent1

The principle is the same as that of apply above, pointing this of the child() function to parent1

2. Class inheritance

Class inheritance:

  let Parent2 = function (name, sex) {
    this.name = name
    this.sex = sex
  }
  let Child2 = function (name, sex, age) {
    Parent2.call(this, name, sex) // Parameters are passed separately, separated by commas
    this.age = age
  }
  let a = new Child2('lis', 'male', 22)
  console.log(a);

3,bind

1. Basic use

Syntax: bind(T,arg1,arg2,arg3...)
T: Change the direction of this
arg1,2,3...: Parameters passed, separated by commas

Specific demonstration:

  window.name = 'window'
  let parent1 = {
    name: 'parent1'
  }
  function child1() {
    console.log(this.name);
  }
  child1() // window
  console.log(child1.bind(parent1)); // The child1 function of this is changed
  child1.bind(parent1)(); // parent1

We can see that after executing bind, a function will be returned. We can see that it is the child1 function, but when we execute this function, we will find that its this has actually changed to point to parent1.

2. Class inheritance

Class inheritance:

  function Parent2(name, sex) {
    this.name = name
    this.sex = sex
  }
  function Child2(name, sex, age) {
    Parent2.bind(this, name, sex)()
    this.age = age
  }
  let a = new Child2('lis', 'male', 22)
  console.log(a);

4. Distinction

1. apply and call

The functions of apply and call are basically the same. The biggest difference between them is the difference in parameter passing methods. Their first parameter is the object this is about to point to, but the second parameter of aplly receives an array of parameters to be passed during method execution, while call separates the parameters with commas and passes them separately.

2. bind, call and apply

Bind and call pass parameters in the same way, but we can easily see from the above code that bind will return a function pointed to by this that has been modified. We need to execute it manually, and call and apply will execute it immediately. So call and apply can be used not only to change the direction of this, but also to execute a function immediately.
bind and apply are different from call by one more parameter.