JavaScript 中 apply、call 和 bind 的区别

JavaScript 中 apply、call 和 bind 的区别

1. 相同之处

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

2. 区别

var tom = {
	name: 'Tom',
	gender: 'male',
	age: 24,
	say: function() {
		console.log(`我是${this.name}，${this.gender}，今年${this.age}岁`);
	}
}

var jerry = {
	name: 'Jerry',
	gender: 'male',
	age: 26
}

tom.say(); // 我是Tom，male，今年24岁

• 如何用 tom 的 say 方法显示 jerry 的数据。

2.1 call 方法

var tom = {
	name: 'Tom',
	gender: 'male',
	age: 24,
	say: function() {
		console.log(`我是${this.name}，${this.gender},今年${this.age}岁`);
	}
}

var jerry = {
	name: 'Jerry',
	gender: 'male',
	age: 26
}

tom.say.call(jerry); // 我是Jerry，male，今年26岁

2.2 apply 方法

var tom = {
	name: 'Tom',
	gender: 'male',
	age: 24,
	say: function() {
		console.log(`我是${this.name}，${this.gender}，今年${this.age}岁`);
	}
}

var jerry = {
	name: 'Jerry',
	gender: 'male',
	age: 26
}

tom.say.apply(jerry); // 我是Jerry，male，今年26岁

2.3 bind 方法

var tom = {
	name: 'Tom',
	gender: 'male',
	age: 24,
	say: function() {
		console.log(`我是${this.name}，${this.gender}，今年${this.age}岁`);
	}
}

var jerry = {
	name: 'Jerry',
	gender: 'male',
	age: 26
}

tom.say.bind(jerry)(); // 我是Jerry，male，今年26岁

2.4 call 和 apply 的区别

var tom = {
	name: 'Tom',
	gender: 'male',
	age: 24,
	say: function(school, grade) {
		console.log(`我是${this.name}，${this.gender}，今年${this.age}岁，在${school}上${grade}`);
	}
}

var jerry = {
	name: 'Jerry',
	gender: 'male',
	age: 26
}

// call 方法传参
tom.say.call(jerry, '实验中学', '三年级'); // 我是Jerry，male，今年26岁，在实验中学上三年级

// apply 方法传参
tom.say.apply(jerry, ['实验中学', '三年级']); // 我是Jerry，male，今年26岁，在实验中学上三年级

// bind 方法传参
tom.say.bind(jerry, '实验中学', '三年级')();
tom.say.bind(jerry)('实验中学', '三年级');

• 两者区别：
• call 方法中之后的参数与 say 方法中的参数一一对应
• apply 方法中的第二个参数为数组，数组中的值与 say 方法中的参数一一对应