js中的call、apply、bind方法

call和apply和bind方法

一、call/apply/bind方法的来源

首先，在使用call，apply，bind方法时，我们有必要知道这三个方法究竟是来自哪里？为什么可以使用的到这三个方法？
call，apply，bind这三个方法其实都是继承自Function.prototype中的，属于实例方法。

console.log(Function.prototype.hasOwnProperty('call')) //true
console.log(Function.prototype.hasOwnProperty('apply')) //true
console.log(Function.prototype.hasOwnProperty('bind')) //tru

上面代码中，都返回了true，表明三种方法都是继承自Function.prototype的。当然，普通的对象，函数，数组都继承了Function.prototype对象中的三个方法，所以这三个方法都可以在对象，数组，函数中使用。

二、call方法

函数实例的call方法，可以指定该函数内部this的指向（即函数执行时所在的作用域），然后在所指定的作用域中，调用该函数。并且会立即执行该函数。

     var keith = {
          rascal: 123
     };
      var rascal = 456;
  
      function a() {
          console.log(this.rascal);
      }
 
     a(); //456
     a.call(); //456
     a.call(null); //456
     a.call(undefined); //456
     a.call(this); //456
     a.call(keith); //123
     //上面代码中，a函数中的this关键字，如果指向全局对象，返回结果为456。可以看到，如果call方法没有参数
     //，或者参数为null或undefined或者this，则等同于指向全局对象。
     //如果使用call方法将this关键字指向keith对象，也就是将该函数执行时所在的作用域为keith对象，返回结果为123。

　　//call()方法可以传递两个参数。第一个参数是指定函数内部中this的指向（也就是函数执行时所在的作用域）
　　//，第二个参数是函数调用时需要传递的参数。
　　 function keith(a, b) {
         console.log(a + b);
     }
 
     keith.call(null, 1, 2); //3
     //第一个参数是必须的，可以是null，undefined，this，但是不能为空。
     //设置为null，undefined，this表明函数keith此时处于全局作用域。
     //第二个参数中必须一个个添加。而在apply中必须以数组的形式添加。


      var obj = {};
      console.log(obj.hasOwnProperty('toString')); //false
  
      obj.hasOwnProperty = function() {
          return true;
      }
  
      console.log(obj.hasOwnProperty('toString')); //true
  
     console.log(Object.prototype.hasOwnProperty.call(obj, 'toString')); //false
     //上述代码中，hasOwnProperty是obj对象继承的方法，如果这个方法一旦被覆盖，就不会得到正确结果。call方法可以解决这个
     //方法，它将hasOwnProperty方法的原始定义放到obj对象上执行，这样无论obj上有没有同名方法，都不会影响结果。要注意的
     //是，hasOwnProperty是Object.prototype原生对象的方法，而call是继承自Function.prototype的方法。

三、apply方法

apply方法的作用与call方法类似，也是改变this指向（函数执行时所在的作用域），然后在指定的作用域中，调用该函数。同时也会立即执行该函数。唯一的区别就是，它接收一个数组作为函数执行时的参数。

apply方法的第一个参数也是this所要指向的那个对象，如果设为null或undefined或者this，则等同于指定全局对象。第二个参数则是一个数组，该数组的所有成员依次作为参数，在调用时传入原函数。原函数的参数，在call方法中必须一个个添加，但是在apply方法中，必须以数组形式添加。

function keith(a, b) {
         console.log(a + b);
     }
 
     keith.call(null, 2, 3); //5
     keith.apply(null, [2, 3]); //5  apply以将参数以数组方式添加

apply方法的应用

//利用apply求值
     var a = [2, 4, 5, 7, 8, 10];
 
     console.log(Math.max.apply(null, a)); //10
     console.log(Math.max.call(null,2, 4, 5, 7, 8, 10)); //10

//利用apply转换类似数组的对象
     console.log(Array.prototype.slice.apply({0:1,length:1}));    //[1]
     console.log(Array.prototype.slice.call({0:1,length:1}));    //[1]
     console.log(Array.prototype.slice.apply({0:1,length:2}));    //[1,undefined]
     console.log(Array.prototype.slice.call({0:1,length:2}));    //[1,undefined]

//上面代码的call，apply方法的参数都是对象，但是返回结果都是数组，这就起到了将对象转成数组的目的。
//从上面代码可以看到，这个方法起作用的前提是，被处理的对象必须**有length属性，以及相对应的数字键**。

四、 bind方法

bind方法用于指定函数内部的this指向（执行时所在的作用域），然后返回一个新函数。bind方法并非立即执行一个函数。

function keith(a, b) {
        return a + b;
    }
    console.log(keith.apply(null,[1,4])); //5
    console.log(keith.call(null,1,4)); //5
    console.log(keith.bind(null, 1, 4)); //keith()
    console.log(keith.bind(null, 1, 4)()); //5

上面代码中，可以看出call，apply，bind三者的区别：call和apply方法都是在调用之后立即执行的。而bind调用之后是返回原函数，需要再调用一次才行，有点像闭包

五、总结

call，apply，bind方法：

a：第一个参数都是指定函数内部中this的指向（函数执行时所在的作用域），然后根据指定的作用域，调用该函数。

b：都可以在函数调用时传递参数。call，bind方法需要直接传入，而apply方法需要以数组的形式传入。

c：call，apply方法是在调用之后立即执行函数，而bind方法没有立即执行，需要将函数再执行一遍。有点闭包的味道。

d：改变this对象的指向问题不仅有call，apply，bind方法，也可以使用that变量来固定this的指向。