JS函数可拥有子函数的原理、运行逻辑及相关技术问询

嘿，这个问题问得太到位了！刚好触及了JavaScript里函数最核心的特性——函数本质上是对象，而且是一等公民。咱们分两部分来唠明白：

这种写法本质是利用了函数的对象特性，主要有这些实用价值：

• 模块化与命名空间：把相关的工具函数收拢在主函数上，不用乱定义全局变量。比如大家熟悉的jQuery，$既是可以直接调用的函数（比如$('.box')），又能挂载$.ajax、$.extend这类方法，所有相关功能都集中在一个“容器”里，代码更整洁。
• 静态方法/通用工具集：对于构造函数来说，挂载在函数本身上的方法就是静态方法。比如Array.from()、Object.assign()，这些方法属于构造函数本身，不需要实例化就能调用，专门处理该类型的通用逻辑。
• 增强函数功能：给主函数附加辅助逻辑，比如缓存、日志、统计等，不用把这些杂项混进主函数里，保持主函数的单一职责。比如给一个计算函数加个缓存方法：

  function calculateSum(a, b) {
    return a + b;
  }
  calculateSum.cache = {};
  calculateSum.getCached = function(a, b) {
    const key = `${a}-${b}`;
    return this.cache[key] || (this.cache[key] = calculateSum(a, b));
  }
  

  调用calculateSum.getCached(2,3)时会先查缓存，没有再计算，提升性能。

先看你的代码：

let myObject = {};
myObject.someFunction = function(){return 'sample function';};
myObject.someFunction.someOtherFunction = function(){return 'this somehow works';};

核心逻辑：函数就是特殊的对象 #

说白了，在JavaScript里函数是Function构造函数的实例，本质上就是一种特殊的对象。和普通对象一样，函数对象可以动态添加任意属性和方法——不管这个函数是挂载在另一个对象上（比如myObject.someFunction），还是独立存在的。

所以当你给myObject.someFunction赋值一个函数时，这个函数本身就是一个对象，你自然能给它加someOtherFunction这个属性（值是另一个函数）。

调用的时候：

• myObject.someFunction()：执行的是这个函数本身的逻辑，返回'sample function'；
• myObject.someFunction.someOtherFunction()：执行的是这个函数对象上的someOtherFunction方法，返回'this somehow works'。
  这两个调用完全互不干扰，因为它们指向的是不同的函数实体。

这种写法的影响 #

• 优点：
  • 把相关功能聚合在一起，减少全局变量污染，代码结构更清晰；
  • 可以给函数附加辅助功能，不用修改主函数的核心逻辑；
  • 适合创建小型工具集，比如一个处理日期的函数，同时挂载格式化、解析等方法在它身上。
• 注意点：
  • 如果这个函数是作为构造函数（用new调用），挂载在函数本身上的方法是静态方法，不会被实例继承。比如：

    function Person(name) {
      this.name = name;
    }
    Person.sayHello = function() { console.log('Hello!'); };
    const p = new Person('Alice');
    p.sayHello(); // 报错：p.sayHello is not a function
    

    只有挂载在Person.prototype上的方法才会被实例继承，这点要区分清楚。
  • 别过度使用这种写法，如果功能复杂，建议用ES6模块或类来组织代码，可读性更强。

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