call、apply的使用和bind的区别

call 的使用

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

apply的使用

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

在 JavaScript 严格模式下，如果 apply() 方法的第一个参数不是对象，则它将成为被调用函数的所有者（对象）。在“非严格”模式下，它成为全局对象。

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])

函数中arguments伪数组转数组

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)

首先看两段代码

apply、call的使用

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

bind的使用

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

这不是和bind一样么？

是的，但延迟时间，换成3秒，你就会发现区别，call或apply是立马呈现’b’，而bind是在延迟相应时间后，呈现’b’

为什么会这样？

因为call或apply是将执行上下文对象换了后，立即执行；而bind是将执行上下文对象换了后，创建一个新函数

看下面的代码

           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);

你会发现只有一个输出值

再看另外一段代码

           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)();

现在就输出了两个值，所以明白了他们的区别了