1、function.bind(obj[,param1,param2,...])
obj
是要设置为函数内部的 this 的对象。param1,param2,...
是可选的参数列表,如果在绑定时提供,那么在调用新函数时可以传递更多参数。bind
方法返回一个新函数,可在稍后调用这个新函数。
bind
方法不会立即执行函数,而是创建一个新的函数,该函数的 this
值被永久地绑定到指定的上下文,而且在调用时可以传递参数。
2、function.call(context, arg1, arg2, ...)
context
是要设置为函数内部的 this 的对象。arg1, arg2, ...
是要传递给函数的参数列表。call
方法会立即执行函数。
call
是一个函数的方法,可以在调用函数的同时显式指定函数内部的 this 值,以及以参数列表的形式传递参数。
使用参考:Js(Javascript)中的call方法的使用
3、function.apply(obj,[arg1, arg2, ...])
obj
是要设置为函数内部的 this 的对象,[arg1, arg2, ...]
是一个数组,包含要传递给函数的参数。apply 方法会立即执行函数。
apply
与 call
类似,也可以显式设置函数内部的 this 值,并传递参数,但参数以数组的形式传递。
使用参考:Js(Javascript)中的apply方法的使用
4、总结
call
和 apply
是用于立即调用函数并设置 this
上下文的方法,它们的主要区别在于参数传递的方式。bind
不会立即执行函数,而是创建一个新的函数,将 this 绑定到指定的上下文,并可选地预设参数,然后你可以稍后调用这个新函数。区别如下,
特性 | bind | apply | call |
---|---|---|---|
调用方式 | 创建新函数 | 立即执行函数 | 立即执行函数 |
this 绑定 | 是 | 是 | 是 |
参数传递方式 | 可选 | 数组 | 参数列表 |
参数个数 | 可选 | 可变 | 可变 |
返回值 | 新函数 | 函数执行结果 | 函数执行结果 |
示例代码:
function displayInfo(job, city) {
console.log(`Name: ${this.name}, Job: ${job}, City: ${city}`);
}
const person1 = { name: 'Levi' };
const person2 = { name: 'John' };
// 使用 call 和 apply 动态绑定上下文并传递参数
displayInfo.call(person1, 'Engineer', 'Shanghai');
displayInfo.apply(person2, ['Doctor', 'BeiJing']);
// 使用 bind 动态绑定上下文并创建新函数
const infoToA = displayInfo.bind(person1, 'Designer');
const infoToB = displayInfo.bind(person2, 'Teacher');
infoToA('ShenZhen');
infoToB('GuangZhou');