手记

【金秋打卡】第七天 call,apply,bind区别

第一模块:

课程名称:直面JavaScript中的30个疑难杂症

章节:7-7

讲师名称:公明2020

第二模块:

  • call,apply,bind都是是干什么用的?

call,apply,bind都是可以改变普通函数的this指向(不能改变箭头函数的this指向)的方法,这三个函数实际上都是绑定在Function构造函数的prototype上,而每一个函数都是Function的实例,因此每一个函数都可以直接调用call\apply\bind

第三模块:

// call的第一个参数是this要指向的对象,并且第二个参数开始,可以接收多个参数作为改造后的函数参数,使用call方法,改造后的函数会立即执行。call的返回值是使用调用者提供的 this 值和参数调用该函数的返回值。若该方法没有返回值,则返回 undefined。
const obj = {
	name: '张三',
	age: 20,
}
function fn(params1, params2) {
	console.log(this.name, this.age, params1, params2);
}
const result = fn.call(obj, '参数1', '参数2'); // 打印:张三, 20, 参数1, 参数2
console.log(result); // 打印undefined

// apply接收两个参数,第一个参数是this要指向的对象,第二个参数是一个数组(或一个类数组对象),数组或者类数组对象中包裹的是要传递给改造后的函数的参数,使用apply方法,改造后的函数会立即执行。apply的返回值是使用调用者提供的 this 值和参数调用该函数的返回值。若该方法没有返回值,则返回 undefined。
const obj = {
	name: '张三',
	age: 20,
}
function fn(params1, params2) {
	console.log(this.name, this.age, params1, params2);
}
const result = fn.apply(obj, ['参数1', '参数2']); // 打印:张三, 20, 参数1, 参数2
console.log(result); // 打印undefined

// bind的第一个参数是this要指向的对象,并且第二个参数开始,可以接收多个参数作为改造后的函数参数,使用bind方法,改造后的函数并不会立即执行,而是作为bind方法的返回值return出来,因此需要额外调用。bind的返回值就是改造后的函数。
const obj = {
	name: '张三',
	age: 20,
}
function fn(params1, params2) {
	console.log(this.name, this.age, params1, params2);
}
const resultFun = fn.bind(obj, '参数1', '参数2');
resultFun(); // 打印:张三, 20, 参数1, 参数2

第四模块:

0人推荐
随时随地看视频
慕课网APP