网站怎样做移动端适配自媒体发布平台
个人博客：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.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指向的问题，现在基本上都是能用箭头函数就用箭头函数。