javascript中call、apply、bind的区别

一、call、apply、bind的共同点

1、都是用来改变函数this对象的指向。
2、第一个参数都是this要指向的对象。
3、都可以利用后续参数进行传参

二、例子

//例子1
var data1 = {
    name:'我',
    time:'早上',
    eat:'馒头',
    fnc:function(){
      console.log(this.name + this.time+ "吃的" + this.eat);  
    }
};
var param1 = {
    name:'小明',
    time:'中午',
    eat:'火锅',
};
data1.fnc();//我早上吃的馒头
data1.fnc.apply(param1);//小明中午吃的火锅
data1.fnc.call(param1);//小明中午吃的火锅
data1.fnc.bind(param1)();//小明中午吃的火锅


//例子2
var data2 = {
    name:'我',
    time:'早上',
    eat:'馒头',
    fnc:function(who){
      console.log(this.name + this.time+ "和"+ who +"吃的" + this.eat);  
    }
};
var param2 = {
    name:'小明',
    time:'中午',
    eat:'火锅',
};
data2.fnc('同事');//我早上和同事吃的馒头
data2.fnc.apply(param2,['同事']);//小明中午和同事吃的火锅
data2.fnc.call(param2,'同事');//小明中午和同事吃的火锅

//bind方法1
data2.fnc.bind(param2,'同事')();//小明中午和同事吃的火锅

//bind方法2
data2.fnc.bind(param2)('同事');//小明中午和同事吃的火锅

三、细节

1. call中的细节

   //非严格模式,如果不传参数，或者第一个参数是null或undefined，this都指向window
   function fnc1(){
       console.log(this);
   }
   fnc1.call(); // Window
   fnc1.call(null); // Window
   fnc1.call(undefined); // Window
   
   
   //严格模式,第一个参数是谁，this就指向谁
   'use strict'
   function fnc2(){
       console.log(this);
   }
   fnc2.call(); // undefined
   fnc2.call(null); // null
   fnc2.call(undefined); // undefined

2. bind中的细节

   //bind的多次绑定只有第一次是有效的
   function fnc(){
       console.log(this.type);
   }
   var name1 = {
       type: "我"
   }
   var name2 = {
       type: "小明",
   }
   
   var item1 = fnc.bind(name1);
   item1();//我
   
   //再次使用bind绑定无效
   var item2 = item1.bind(name2);
   item2();//我
   
   // 使用call绑定也无效
   item1.call(name2); //我
   
   // 使用apply绑定也无效
   item1.apply(name2); //我

四、总结

1. apply和call的区别就是后续传参不一样，apply的参数列表通过数组传递
2. bind的传参方式和call一样
3. bind和call的区别在于bind不会调用函数，而是把函数作为返回值，如果需要执行，只需要在后面加一个小括号，好处就是方便多次调用