The difference between the use of call and apply and bind

Use of call

var person = {
  printStr: function(a, b) {
    return this.name + this.age + a + b;
  }
}
var person1 = {
  name:"小王",
  age: "18"
}
person.printStr.call(person1, "身体", "好");

Use of apply

var person = {
  printStr: function(a, b) {
    return this.name + this.age + a + b;
  }
}
var person1 = {
  name:"小王",
  age: "18"
}
person.printStr.apply(person1, ["身体", "好"]);

In JavaScript strict mode, if the first parameter of the apply() method is not an object, it will become the owner (object) of the called function. In "non-strict" mode, it becomes a global object.

Math.max.apply(Math, [1,2,3])
Math.max.apply(null, [1,2,3])
Math.max.apply(" ", [1,2,3])
Math.max.apply(0, [1,2,3])
Math.max.apply(this, [1,2,3])

Pseudo-array to array of arguments in the function

function argumentsToArray() {
  console.log(arguments)
  console.log([].slice.call(arguments))
  console.log([].slice.apply(arguments))
  console.log(Array.prototype.slice.call(arguments))
  console.log(Array.prototype.slice.apply(arguments))
}
argumentsToArray(1, 2, 3, 4, 5, 6)

First look at two pieces of code

Use of apply and call

           var name = 'a';
           var obj = {
               name:'b',
               print: function(){
                   setTimeout(function(){
                       console.log(this.name);
                   }.call(this),100); // 换成apply也行
               }
           };
           obj.print();

Use of bind

           var name = 'a';
           var obj = {
               name:'b',
               print: function(){
                   setTimeout(function(){
                       console.log(this.name);
                   }.bind(this),100);
               }
           };
           obj.print();

Isn't this the same as bind?

Yes, but if you change the delay time to 3 seconds, you will find the difference. Call or apply will display'b' immediately, while bind will display'b' after the corresponding delay.

Why is this happening?

Because call or apply is executed immediately after the execution context object is changed; and bind is to create a new function after the execution context object is changed

Look at the code below

           function fun(){
               console.log(this.name);
           }
           function obj1(){
               this.name = 'call||apply';
           }
           function obj2(){
               this.name = 'bind';
           }
           var o1 = new obj1();
           var o2 = new obj2();
           fun.call(o1);
           fun.bind(o2);

You will find that there is only one output value

Look at another piece of code

           function fun(){
               console.log(this.name);
           }
           function obj1(){
               this.name = 'call||apply';
           }
           function obj2(){
               this.name = 'bind';
           }
           var o1 = new obj1();
           var o2 = new obj2();
           fun.call(o1);
           //手动调用bind创建的新函数
           fun.bind(o2)();

Now I have output two values, so I understand the difference