日常学习笔记 - JS中call、apply、bind的异同

一、概括

1.相同点：

1）都是用于改变函数内的this指向。
2）首个参数都是改变后this指向的对象（或函数）。

2.不同点：

1）call、apply调用后会在改变this指向后立即执行一次，而bind函数执行后则会返回一个新函数，需要手动再次调用才能执行。
2）接收首个参数外的其他参数时，call和bind直接在函数中传入多个参数；apply则需要传入一个数组，数组的元素为需要传入的参数。

二、基础用法

const obj1 = {
	name: "Jack",
	getName: function(){
		console.log(this.name);
	}
};

const obj2 = {
	name: "Susan"
};

obj1.getName(); 		   // "Jack"  此时obj1.getName的this指向obj1本身，所以输出obj1.name
obj1.getName.call(obj2);   // "Susan" 此时obj1.getName的this指向对象obj2，且会立即执行一次，所以输出obj2.name
obj1.getName.apply(obj2);  // "Susan" 此时obj1.getName的this指向对象obj2，且会立即执行一次，所以输出obj2.name
obj1.getName.bind(obj2)(); // "Susan" 此时obj1.getName的this指向对象obj2，会返回一个新的函数，需要手动调用才能执行，输出obj2.name

三、传参方法

const obj1 = {
	name: "Jack",
	getInfo: function(sex,age){
		console.log(`我叫${this.name}，性别${sex}，今年${age}岁`);
	}
};

const obj2 = {
	name: "Susan"
};

obj1.getInfo("女",18);				// "我叫Jack，性别女，今年18岁"
obj1.getInfo.call(obj2,"女",18);	// "我叫Susan，性别女，今年18岁"
obj1.getInfo.apply(obj2,["女",18]); // "我叫Susan，性别女，今年18岁"
obj1.getInfo.bind(obj2,"女",18)();  // "我叫Susan，性别女，今年18岁"

四、总结

call和apply方法调用后会立即执行一次，bind方法调用后需要手动执行；apply方法传参需以数组形式传入。