如何定义可通过function1().function2()链式调用的函数？

嘿，这个问题问得挺典型的！要实现function1().function2()这种链式调用，核心逻辑其实非常清晰——让每个函数执行完成后，返回一个包含后续可调用方法的对象。下面我给你拆解几种实用的实现方式：

1. 基础版：普通函数返回含方法的对象 #

最直接的方式就是让function1执行后，返回一个带有function2的对象：

function function1() {
  console.log("执行 function1");
  // 返回包含function2的对象，供后续调用
  return {
    function2: function() {
      console.log("执行 function2");
      // 如果想支持更长的链式调用，这里可以返回this（当前对象）
      return this;
    }
  };
}

// 直接调用，完美实现链式
function1().function2();

// 如果function2返回了this，还能继续扩展
// 比如给返回的对象加function3，就能这么用：function1().function2().function3();

2. 进阶版：类/构造函数的链式调用 #

在封装工具类或者复杂逻辑时，更常用的是让类的实例方法返回this（当前实例），这样就能无限链式调用：

class ChainableTool {
  function1() {
    console.log("执行 function1");
    return this; // 返回当前实例，让后续方法可以接着调用
  }

  function2() {
    console.log("执行 function2");
    return this; // 同样返回实例，保持链式能力
  }

  // 还能继续加更多方法
  function3() {
    console.log("执行 function3");
    return this;
  }
}

// 调用示例
new ChainableTool().function1().function2().function3();

这种思路就是jQuery等库实现链式调用的核心，比如你熟悉的$('.box').addClass('active').fadeOut()，本质就是每个方法都返回了当前的jQuery实例。

3. 小提醒 #

• 别用箭头函数写实例方法！箭头函数没有自己的this，它会继承外层作用域的this，如果在类里用箭头函数写function1，返回的this会不是你想要的实例，导致链式调用失败。
• 如果某个方法是链式的最后一步，也可以选择不返回this，但为了保持灵活性，建议所有方法都返回this，这样用户可以自由组合调用顺序。

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