了解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()
- 改变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 返回的是一个新的函数,你必须调用它才会被执行
- 三者传入参数问题
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从第二个参数开始,后面的参数都需要放在 一个数组中,每个参数之间同样需要用逗号隔开。如果没有放在数组中则会报错