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	返回新函数	分阶段传递参数	绑定后的新函数	延迟执行或固定上下文

关键区别

1. 执行方式：
   • call/apply：​立即执行函数。
   • bind：返回新函数，​需手动调用。
2. 参数传递：
   • call：参数逐个传递（如 arg1, arg2）。
   • apply：参数以数组传递（如 [arg1, arg2]）。
   • bind：可分阶段传递参数（绑定时传部分，调用时传剩余）。
3. 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.callbackIdlet funcName = result.funcNamelet funcParam = result.funcParamDfhLogUtils.info("DfhWebView", `callbackId:${callbackId},funcName:${funcName},funcParam:${funcParam}`)if (this.iDfhJsFunction == null) {//请先调用initJsFunction初始化iDfhJsFunctionreturn ""}let func = this.iDfhJsFunction.getRegisterJsFunction(funcName)if (!func) {//没有js方法，查看方法名称有没有写错。查找是否已经注册该方法:registerJsFunctionreturn ""}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指向的问题，现在基本上都是能用箭头函数就用箭头函数。