JS—call,apply,bind：1分钟掌握三者的区别
个人博客：haichenyi.com。感谢关注
一. 目录
- 一–目录
- 二–call
- 三–apply
- 四–bind
- 五–三者对比
二. call
作用： 立即调用函数，显式指定this值，并逐个传递参数。
语法： func.call(thisArg, arg1, arg2, …)
特点：
1.参数按顺序传递。
2.适合参数数量固定的场景。
示例：
const person = { name: 'Alice' };
function greet(greeting) {
console.log(`${greeting}, ${this.name}!`);
}
greet.call(person, 'Hello'); // 输出：Hello, Alice!
三. apply
作用： 立即调用函数，显式指定this值，并以数组形式传递参数。
语法： func.apply(thisArg, [argsArray])
特点：
1.参数以数组或类数组对象传递。
2.适合参数数量不固定或需动态传递的场景。
示例：
const numbers = [5, 6, 2, 3, 7];
const max = Math.max.apply(null, numbers); // ES5写法
console.log(max); // 输出：7
// ES6可用扩展运算符替代：
const maxES6 = Math.max(...numbers);
四. bind
作用： 返回一个新函数，永久绑定this值和部分参数，不立即执行。
语法： func.bind(thisArg, arg1, arg2, …)
特点：
1.参数可分阶段传递（绑定时传部分，调用时传剩余）。
2.适合需要延迟执行或固定上下文的场景（如事件处理）。
示例：
const car = { brand: 'Toyota' };
function showDetails(year, color) {
console.log(`${this.brand} made in ${year}, color: ${color}`);
}
const boundFunc = showDetails.bind(car, 2020);
boundFunc('red'); // 输出：Toyota made in 2020, color: red
五. 三者对比
对比表格
| 方法 | 执行时机 | 参数形式 | 返回值 | 应用场景 |
|---|---|---|---|---|
| call | 立即执行 | 参数列表 (arg1, …) | 原函数的返回值 | 明确参数数量，快速调用的场景 |
| apply | 立即执行 | 参数数组([args]) | 原函数的返回值 | 参数动态或数量不固定的场景 |
| bind | 返回新函数 | 分阶段传递参数 | 绑定后的新函数 | 延迟执行或固定上下文 |
关键区别
- 执行方式：
- call/apply：立即执行函数。
- bind：返回新函数，需手动调用。
- 参数传递：
- call：参数逐个传递（如 arg1, arg2）。
- apply：参数以数组传递（如 [arg1, arg2]）。
- bind：可分阶段传递参数（绑定时传部分，调用时传剩余）。
- this绑定
- bind返回的函数永久绑定this，后续无法修改。
- call/apply仅对本次调用生效。
这里我还想说一点，我在鸿蒙开发中遇到的一个问题。关于this指针的问题。
背景是这样的： 我之前开发Android的时候与H5通信，我写完H5，写Android，通过JS拦截prompt实现通信。简单的来说，就是H5端触发这个方法之后，通过传参告诉我需要执行哪个方法。我知道方法名字，Android里面可以通过反射去获取了之后执行。鸿蒙里面不行啊，没有反射这个概念。鸿蒙是ArkTS是TS的超类，TS是JS的扩展。
问题就出在执行的方法的这里：
prompt(param: ESObject): string {
let result = JSON.parse(param) as Record<string, string>
let callbackId = result.callbackId
let funcName = result.funcName
let funcParam = result.funcParam
DfhLogUtils.info("DfhWebView", `callbackId:${callbackId},funcName:${funcName},funcParam:${funcParam}`)
if (this.iDfhJsFunction == null) {
//请先调用initJsFunction初始化iDfhJsFunction
return ""
}
let func = this.iDfhJsFunction.getRegisterJsFunction(funcName)
if (!func) {
//没有js方法，查看方法名称有没有写错。查找是否已经注册该方法:registerJsFunction
return ""
}
if (!callbackId) {
//同步方法
return func(param)
} else {
func(param)
//异步方法
return ""
}
}
我在项目启动的时候，通过容器存储我有哪些方法，说白了就是一个map，key是方法名，value是方法。H5给我方法名的时候，我通过map去获取，获取到了就说明有这个方法，没获取到就说明没有。获取到了之后，就直接加小括号执行就可以了。
我第一个版本这些方法全都写的静态，静态方法会有一个问题，那就是我如果启动了两个webview，只有一个对象去通信，理论上是有问题。因为，我要是存在局部变量，就会乱。然后，后面遇到了这个问题，我就改成了非静态的。
静态的变量通过类。对象名去调用。非静态的就是通过this。对象去使用变量。这里就有问题，静态的我就不写了。
/**
* 显示加载对话框
* @param param
*/
showLoading(param: ESObject): void {
this.dfhLoadingBean.showLoading()
}
我最开始执行的位置，是没有对象。方法的。而是，直接方法()执行的。这样，就会在执行方法的时候，this指向的不是我实际的对象。
我用bind解决了这个问题。
this.mDfhJsFunctionMap.set("showLoading", this.showLoading.bind(this))
这里还遇到了另一个小插曲，我注册这个容器的方法是在父类中写的，我直接在父类的构造方法里面去初始化容器。而我的这些实现类都是在子类里面。这就有另一个问题，子类构造方法还没有初始化，这里的方法this的指向就不是子类。必须要在子类构造方法初始化了之后，在初始化这个容器。
constructor(mController: webview.WebviewController) {
super(mController)
//要放在子类中调用，不要放在父类中调用。父类调用的时候this指向会有问题
this.registerJsFunction();
}
以上，问题都解决了。但是，ArkTS不推荐使用call，apply，bind方法。那怎么办呢？箭头函数呀。
/**
* 显示加载对话框
* @param param
*/
showLoading = (param: ESObject): void => {
this.dfhLoadingBean.showLoading()
}
把方法全都写成箭头函数，就解决了这个问题。
this指向的问题，现在基本上都是能用箭头函数就用箭头函数。