如何为const定义的JS函数结构添加可外部调用的自定义函数

1. 这个结构的本质 #

你写的是一个普通的函数表达式，既不是ES6标准的Class类，也不是前端框架里的函数组件：

• 类需要用class关键字声明，普通函数虽然可以作为构造函数使用，但你当前的写法没有按照构造函数的规范实现
• 函数组件是React/Vue等框架中的特定概念，作用是返回UI渲染结果，和你的代码场景不符
  从参数p的写法来看，大概率是p5.js实例模式的封装函数。

2. 调用报错的原因 #

你在item函数内部声明的nextGame是函数局部作用域内的函数，默认只能在item函数体内部访问，既没有挂载到item函数对象上，也没有对外暴露，外部自然无法访问，所以调用item.nextGame()会报错。

3. 对外暴露函数的实现方式 #

根据你的使用场景可以选以下三种方案：

方案1：挂载为函数的静态方法 #

如果不需要依赖item内部的变量、直接作为工具方法调用，可以直接把方法挂载到item函数对象上：

const item = function(p) {
  let model;
  p.setup = function() {
  }
}
// 挂载静态方法
item.nextGame = function(){
  console.log("test");
}
// 外部调用
item.nextGame(); // 正常输出test

方案2：挂载到传入的p对象上（适配p5.js场景） #

如果是p5.js的实例模式用法，把方法挂载到传入的p实例上即可，后续通过p5实例调用：

const item = function(p) {
  let model;
  p.setup = function() {
  }
  // 把自定义方法挂载到p对象上
  p.nextGame = function(){
    console.log("test");
  }
}
// 初始化p5实例
const myp5 = new p5(item);
// 外部调用
myp5.nextGame(); // 正常输出test

方案3：作为构造函数使用 #

如果要把item作为类的替代、生成多个独立实例，把它改造为构造函数，方法挂载到原型或者实例上即可：

// 构造函数惯例首字母大写
const Item = function(p) {
  let model;
  this.p = p;
  p.setup = function() {
  }
}
// 原型上挂载公共方法
Item.prototype.nextGame = function() {
  console.log("test");
}
// 实例化后调用
const myItem = new Item({});
myItem.nextGame(); // 正常输出test

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