如何将函数合并至已有的JavaScript对象中？

现有如下JavaScript对象：

const obj = {
  i: 0,
  foo(){ 
    console.log(this.i) 
    this.i +=1
  }
}

obj.foo() // => 0

能否将下面的函数合并到该对象中，使得合并后同时支持两种调用方式：

// 需要添加至`obj`的函数
function obj(){
  this.foo()
}

// 合并后预期效果：
obj.foo() // => 1
obj() // => 2

可以实现，核心思路是利用JavaScript中函数本身也是对象的特性，把原对象的属性和方法直接挂载到目标函数上，同时调整函数内部的调用逻辑以确保上下文正确。

具体实现代码：

// 定义作为函数的obj
function obj() {
  // 直接调用函数对象上的foo方法，确保上下文指向obj自身
  obj.foo();
}

// 给函数obj添加属性和方法
obj.i = 0;
obj.foo = function() {
  console.log(this.i);
  this.i += 1;
};

// 初始调用对应原问题的输出
obj.foo(); // => 0

// 验证合并后的两种调用
obj.foo(); // => 1
obj();     // => 2

原理说明 #

• JavaScript里的函数本质是Function构造函数的实例，属于对象类型，因此可以像普通对象一样给它添加属性（如i）和方法（如foo）。
• 当调用obj()作为函数执行时，内部直接通过obj.foo()调用方法，确保foo中的this指向函数对象obj本身，从而共享同一个i值实现累加。

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