[JavaScript知识库]javaScript中call()、bind()和apply()的用法和区别

了解call()、bind()、apply()之前我们需要先了解一下this的指向
案例1：

var name = "王五",age =20; 
    var Person ={
      name:"张三",
      age:18,
      message:function(){
        console.log("姓名："+name+"  年龄："+age)  
      }
    }
Person.message();	//姓名：王五  年龄：20

案例1 的结果似乎和所想的结果有些差别，name和age所输出的是window下的name和age的值，而不是当前对象里面的值

案例2：

var name = "王五",age =20; 
    var Person ={
      name:"张三",
      age:18,
      message:function(){
        console.log("姓名："+this.name+"  年龄："+this.age)
      }
    }
    Person.message();//姓名：张三  年龄：18

案例1 和案例2 的区别，可以看出加了this，name和age对象变成了当前对象Person里面的值，所以this是指向当前对象

案例3：

 var name = "王五",age =20; 
    var Person ={
      name:"张三",
      perAge:this.age,
      message:function(){
        console.log("姓名："+this.name+"  年龄："+this.age)
      }
    }
 Person.message();//姓名：张三  年龄：undefined

案例3 我们可以看出，this只会在当前对象(Person)中找age，没有找到age,那么结果就是undefined

了解了this，我们来看一下call()、bind()、apply()

1. 改变this的指向，重定义this这个对象

 var name = "王五",age =20; 
    var Person ={
      name:"张三",
      perAge:this.age,
      message:function(sex,address,){
        console.log("姓名："+this.name+"  年龄："+this.age)
      }
    }
    var person = {
      name:"赵六",
      age:25
    }
  Person.message.call(person);//姓名：赵六  年龄：25
  Person.message.bind(person)();//姓名：赵六  年龄：25
  Person.message.apply(person);//姓名：赵六  年龄：25

共同点 ：call()、bind()、apply()都是改变this的指向
区别 ：bind 返回的是一个新的函数，你必须调用它才会被执行

2. 三者传入参数问题

var name = "王五",age =20; 
    var Person ={
      name:"张三",
      perAge:this.age,
      message:function(sex,address,){
        console.log("姓名："+this.name+"  年龄："+this.age+"  性别："+sex+"  住址："+address)
      }
    }
    var person = {
      name:"赵六",
      age:25
    }
    Person.message.call(person,"男","上海");
    Person.message.bind(person,"男","上海")();
    Person.message.apply(person,["男","上海"]);

共同点： 第一个参数传入的都是所要指向的对象
不同点： 从第二个参数开始，就是三者的区别。

• call和bind传入的参数都是以 字符串 形式传入，多个参数之间用逗号隔开
• apply从第二个参数开始，后面的参数都需要放在 一个数组中，每个参数之间同样需要用逗号隔开。如果没有放在数组中则会报错