JavaScript：如何让对象兼具函数调用与属性访问功能？

这个需求其实和jQuery的$实现思路完全一致，本质就是利用JS里函数本身也是对象的特性来玩的小技巧，我给你一步步拆解怎么实现：

核心实现代码 #

// 先定义一个函数，它就是我们要的"obj"
function obj() {
  // 调用obj()时返回一个自定义函数，这里可以根据你的需求修改返回逻辑
  return function() {
    console.log("我是obj()调用后返回的函数~");
  };
}

// 给这个函数挂载属性，就像给普通对象加属性一样
obj.x = 2;
obj.y = 4;

测试效果 #

试试执行下面的代码，完全符合你的需求：

// 调用obj()，得到返回的函数
const fn = obj();
fn(); // 输出：我是obj()调用后返回的函数~

// 访问obj的属性
console.log(obj.x); // 输出：2
console.log(obj.y); // 输出：4

原理说明 #

在JavaScript里，函数是一等公民，它的本质是Function类型的实例，而Function又继承自Object。这意味着：

• 你可以像调用普通函数一样调用它（obj()）
• 你也可以像操作普通对象一样给它添加、修改、删除属性（obj.x = 2）

这正是jQuery中$的实现逻辑——$本身是一个用于选择DOM元素的函数，同时$.fn、$.ajax这些常用的属性/方法，都是直接挂载在$这个函数上的。

进阶写法：批量挂载属性 #

如果需要添加的属性很多，可以用Object.assign批量挂载，更简洁：

function obj() {
  return function() {
    console.log("返回的函数");
  };
}

// 批量添加属性和方法
Object.assign(obj, {
  x: 2,
  y: 4,
  // 还可以挂载自定义方法
  greet: function() {
    console.log(`x的值是${this.x}，y的值是${this.y}`);
  }
});

// 测试自定义方法
obj.greet(); // 输出：x的值是2，y的值是4

内容的提问来源于stack exchange，提问作者number.okta