如何实现兼具直接调用功能与子方法的JavaScript对象函数？

嘿，这个需求其实很好实现！核心原因就是JavaScript里的函数本身也是对象——所以你完全可以给Sys.log这个函数直接添加子方法，同时保留它被直接调用的能力。

具体实现代码 #

直接看最直观的写法：

// 先定义基础的Sys对象和log方法
const Sys = {
  log: function() {
    // 这里写你原本log方法的逻辑，比如打印内容
    console.log("执行Sys.log()的核心逻辑");
  }
};

// 给log函数添加clear子方法
Sys.log.clear = function() {
  // 这里写clear方法的逻辑，比如清空日志缓存之类的
  console.log("执行Sys.log.clear()的逻辑");
};

测试调用 #

现在你就可以两种方式都调用了：

• 直接调用主方法：Sys.log() → 输出"执行Sys.log()的核心逻辑"
• 调用子方法：Sys.log.clear() → 输出"执行Sys.log.clear()的逻辑"

原理说明 #

在JavaScript中，函数是「一等公民」，本质上也是对象类型。这意味着函数不仅可以被调用，还能像普通对象一样拥有自己的属性和方法。我们给Sys.log添加clear属性，其实就是给这个函数对象挂载了一个新的方法，完全不会影响它本身的调用能力。

其他写法参考 #

如果你喜欢更紧凑的写法，也可以先定义函数再挂载属性：

// 先定义log函数并添加子方法
function logFunction() {
  console.log("主log逻辑");
}
logFunction.clear = () => {
  console.log("箭头函数版clear");
};

// 再把它放到Sys对象里
const Sys = {
  log: logFunction
};

这种写法和上面的效果完全一致，选你觉得更清晰的方式就好～

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