js中call、apply、bind的区别?

156 阅读2分钟

call和apply和bind的
共同点:新对象改变调用对象的this指向
不同点:call(newObject,...args); call的第一个参数是新对象,第二个参数是扩展参数
       apply(newObject,[...args]); apply的第一个参数新对象,第二个参数是数组类型,数组里面也是扩展参数
       bind(newObject,...object);bind的第一个参数是新对象,第二个参数是Object类型,你可以放string、function、array都可以,bind会返回一个新的函数,需要它本身才能执行


上代码咯:
var person={
	info:function(){
	    return "name:"+this.name+",age:"+this.age
	}
}
var person1={
	name:"z乘风",
	age:21
}
var  person2={
	name:"王八",
	age:10 
}
var  person3={
	name:"哈哈哈",
	age:1000 
}

/**person对象本身就没有name和age属性,所以person的this.name和this.age都是用的
person1对象的属性,而person中的this指向的是person1对象
*/
console.log(person.info.call(person1));//name:z乘风,age:21

/**不用多说了apply作用和call、bind一样的,只不过apply方法的第二个参数是数组类型*/
console.log(person.info.apply(person2));//name:王八,age:10

/**由于bind返回一个新的函数,所以要使用()执行它 */
conso.log(person.info.bind(person3)());//name:哈哈哈,age:1000

call、apply、bind入参

var cat={
 info:function(city,breed){
    return "name:"+this.name+",age:"+this.age+",city:"+city+",品种:"+breed
  }
}
var cat1={name:"琪琪",age:2}
//结果是:name:琪琪,age:2,city:上海,品种:波斯猫
console.log(cat.info.call(cat1,"上海","波斯猫"));

//结果是:name:琪琪,age:2,city:上海,品种:波斯猫
console.log(cat.info.apply(cat1,["上海","波斯猫"]));

//结果是:name:琪琪,age:2,city:上海,品种:波斯猫
console.log(cat.info.bind(cat1,"上海","波斯猫")());

//结果是:name:琪琪,age:2,city:上海,品种:波斯猫
console.log(cat.info.bind(cat1,["上海"],["波斯猫"])());

//结果是:name:琪琪,age:2,city:上海,波斯猫,品种:undefined
console.log(cat.info.bind(cat1,["上海","波斯猫"])());

总结:call、apply、bind的区别,首先call、apply、bind都能使用新对象改变调用对象的this指向,
但他们第二个参数类型不同,call第二个参数是扩展参数,apply第二个参数是数组(里面也是扩展参数),
bind第二个参数可以是扩展参数,也可以是数组,bind会返回一个新的函数,使用它时你必须调用它才能执行。