详述call,apply和bind的区别

1. 简介: js中的每个函数都指向Funcion.prototype对象,继承Function,所以都含有call,apply,和bind三个函数,三个函数的作用就是改变函数中的this的指向
2. 使用
   1. thisObject作为第一个参数传给函数,使函数中的this指向thisObject
   2. fn.call(thisObject,params1,params2....)
   3. fn.apply(thisObject,[params1,params2,....])
   4. fn.bind(thisObject,params1,params2....)()
   5. 严格模式第一个参数必填,不填为undefined

          // 严格模式
          "use strict"
          let fn = function(a,b){
              console.log(this,a,b);
          }
          let obj = {name:"obj"};
          fn.call(obj,1,2);   // this:obj        a:1          b:2
          fn.call(1,2);       // this:1          a:2          b=undefined
          fn.call();          // this:undefined  a:undefined  b:undefined
          fn.call(null);      // this:null       a:undefined  b:undefined
          fn.call(undefined); // this:undefined  a:undefined  b:undefined
          // 非严格模式
          let fn = function(a,b){
              console.log(this,a,b);
          }
          let obj = {name:"obj"};
          fn.call(obj,1,2);    // this:obj    a:1         b:2
          fn.call(1,2);        // this:1      a:2         b:undefined
          fn.call();           // this:window a:undefined b:undefined
          fn.call(null);       // this=window a=undefined b=undefined
          fn.call(undefined);  // this=window a=undefined b=undefined
      

       

      传入数据	obj	1	空	null	undefined
      非严格模式	this:obj	this:1	this:window	this:window	this:window
      严格模式	this:obj	this:1	this:undefined	this:null	this:undefined

       

3. 举例

   var firstName = 'san'
   var lastName  = 'zhang'
   
   var getName= function(){
       var firstName = 'si'
       var lastName  = 'li'
       var getFullName= function(){
           console.log(firstName  + lastName  )
       }
   }
   
   var persion = {
       firstName: 'wu',
       lastName  = 'wang'
   }
   
   getName.getFullName()                 // this指向getName本身,输出lisi
   getName.getFullName.call()            // this指向window,输出zhangsan
   getName.getFullName.apply(persion)    // this指向persion,输出wangwu
   getName.getFullName.bind(persion)()   // this指向persion,输出wangwu

    

4. 总结
   1. bind和call的区别就在于,call是立即执行的,bind只是声明,没有调用,所以要加个括号立即执行
   2. call和apply只是参数传递不一样,apply第二个参数是数组,将其传递给调用的方法,call第二个参数开始都是传给函数的参数
   3. bind不兼容IE6~8
   4. 从es6开始，已经支持箭头函数了，我建议大家用箭头函数，就不会出现this指向的问题了