JavaScript Promise化中为何使用call方法？

先看个实际场景：假设我们有一个挂载在对象上的loadScript方法，它内部依赖this来获取基础URL：

const scriptLoader = {
  baseUrl: 'https://cdn.example.com/',
  loadScript(src, callback) {
    // 这里依赖this.baseUrl拼接完整地址
    const fullUrl = this.baseUrl + src;
    let script = document.createElement('script');
    script.src = fullUrl;
    script.onload = () => callback(null, script);
    script.onerror = () => callback(new Error(`加载失败: ${fullUrl}`));
    document.head.append(script);
  }
};

如果我们用promisify把它转成Promise风格的函数，要是直接在promisify里调用f(...args)，问题就来了——原函数的this指向会丢失：

直接调用f(...args)的问题 #

// 错误的promisify实现
function badPromisify(f) {
  return function(...args) {
    return new Promise((resolve, reject) => {
      // 直接调用f，this会变成全局对象（浏览器里是window）或undefined（严格模式）
      f(...args, (err, result) => {
        if (err) reject(err);
        else resolve(result);
      });
    });
  };
}

const badLoadScript = badPromisify(scriptLoader.loadScript);
// 调用时，this.baseUrl不存在，直接报错
badLoadScript('app.js').catch(err => console.log(err));

用f.call(this, ...args)的原因 #

正确的promisify会用call绑定上下文，核心是保留原函数执行时的this指向：

// 正确的promisify实现
function promisify(f) {
  return function(...args) {
    return new Promise((resolve, reject) => {
      // 用call把当前的this传给原函数f
      f.call(this, ...args, (err, result) => {
        if (err) reject(err);
        else resolve(result);
      });
    });
  };
}

const goodLoadScript = promisify(scriptLoader.loadScript);
// 调用时，this依然指向scriptLoader，能正确获取baseUrl
goodLoadScript('app.js').then(script => console.log('加载成功', script));

具体来说，这么做有两个关键作用：

• 适配对象方法的场景：如果原函数是某个对象的方法，它内部依赖this访问对象的属性/方法，call(this)能确保this依然指向原对象，不会导致逻辑出错。
• 保持调用一致性：不管原函数是独立函数还是对象方法，promisify后的函数都能和原函数在相同的上下文环境下执行，行为完全一致，不会出现“原函数能跑，promisify后就报错”的情况。

内容的提问来源于stack exchange，提问作者Elbasel