call()、apply()、bind()的区别

121 阅读2分钟

摘要:

apply和call都是为了改变函数体内部的this指向

讲解:

  1. 方法定义:

apply:调用一个对象的一个方法,用另一个对象替换当前对象。

例如:B.apply(A,arguments);即 A 对象应用 B 对象的方法。

call:调用一个对象的一个方法,用另一个对象替换当前对象。

例如:B.call(A, args1,args2);即 A 对象调用 B 对象的方法。

  1. call与apply的相同点:
  • 方法的含义是一样的,即方法功能是一样的。
  • 第一个参数的作用是一样的。
  1. call与apply的不同点:两者传入的列表形式不一样
  • call可以传入多个参数
  • apply只能传入两个参数,所以其第二个参数往往是作为数组形式传入
  1. 存在的意义:实现(多重)继承

  2. 举例:

例1:

var name = '小张',
	age = 17;
var obj = {
	name: '小刘',
	objAge: this.age,
	myFun: function() {
		console.log(this.name + "年龄" + this.age);
	}
};
console.log(obj.objAge);
obj.myFun();	
/*
  17
  小刘年龄undefined
*/

例2:

var fav="盲僧";
function shows(){
  console.log(this.fav);
}
shows();
/*
盲僧
*/

比较一下这两者this的差别,第一个打印里面this指向obj,第二个全局声明的shows()函数this是window。

5.1 call()、apply()、bind()都是用来重定义this这个对象的。

例:

var name = "小张",age =17var obj = {
  name: "小刘",
  objAge: this.age,
  myFun: function(){
    console.log(this.name+"年龄"+this.age);
  }
}
var db = {
  name: "德玛",
  age: 99
};
obj.myFun(); // 小刘年龄undefinend --> this 指向 对象 obj
obj.myFun().call();  // 小刘年龄17 --> this 指向 对象 window
obj.myFun().call(db); // 小刘年龄99 --> this 指向 对象 db
obj.myFun().apply(db); // 小刘年龄99 
obj.myFun().bind(db)(); // 小刘年龄99--> bind返回的是一个新函数,必须调用才会被执行。

5.2 对比call、bind、apply传参情况

var name = "小张",age =17;
var obj = {
  name: "小刘",
  objAge: this.age,
  myFun: function(){
    console.log(this.name+"年龄"+this.age,"来自"+fm+"去往"+t);
  }
}
var db = {
  name: "德玛",
  age: 99
};
obj.myFun().call(db,"江西","深圳");   
obj.myFun().apply(db,["江西","深圳"]);  
obj.myFun().bind(db,"江西","深圳")();  
obj.myFun().bind(db,["江西","深圳"])();  
/*
  德玛年龄99 来自江西去往深圳
  德玛年龄99 来自江西去往深圳
  德玛年龄99 来自江西去往深圳
  德玛年龄99 来自江西去往undefined
*/

三者之间差距很小! 从上面的结果来看:

call、 bind、 apply 这三个函数的第一个参数都是this的指向对象,第二个参数差别就来了:

call 的参数是直接放进去的,第二第三第n个参数全都用逗号分隔,直接放到后面obj.myFun.call(db,'江西', ..., 'string')。

apply的所有参数都必须放在一个数组里面传进去。

bind除了返回函数以外,它的参数和call 一样。

当然,三者的参数不限定是String 类型,允许是各种类型,包括函数,对象等等。