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

現在就輸出了兩個值，所以明白了他們的區別了