JS中如何让动态对象的自定义代码调用自身方法？

你当前开发的编辑器允许用户为动态对象绑定自定义函数，例如选择Baby对象后输入move(1)，但执行时出现ReferenceError: move is not defined错误。原Baby对象代码如下：

const Baby = {
  move(number){
    // some action here...
  },
  initActions(code){
    this.init = Function(code)
    this.init()
  }
};

问题根源：Function(code)创建的函数默认在全局作用域执行，而move是Baby实例的方法，不在全局作用域中，因此无法直接调用。

方案1：用with语句注入实例上下文（用户无需修改输入代码） #

通过with(this)将当前实例的上下文注入到自定义代码的执行环境中，让代码中的方法名优先从实例上查找：

const Baby = {
  move(number) {
    // some action here...
  },
  initActions(code) {
    // 将用户代码包裹在with块中，绑定当前实例上下文
    this.init = new Function(`with(this) { ${code} }`);
    // 确保函数执行时的this指向Baby实例
    this.init.call(this);
  }
};

// 测试：用户输入'move(1)'即可正常调用
Baby.initActions('move(1)');

注意：with语句在严格模式下会被禁用，且可能存在作用域解析性能问题，适合对用户体验要求优先的场景。

方案2：绑定函数执行上下文，让用户代码使用this调用方法 #

这种方式符合JavaScript常规写法，安全性更高，只需在调用函数时绑定实例作为this，用户输入时需添加this.前缀：

const Baby = {
  move(number) {
    // some action here...
  },
  initActions(code) {
    this.init = new Function(code);
    // 绑定当前实例作为函数执行的this
    this.init.call(this);
  }
};

// 用户需要输入'this.move(1)'
Baby.initActions('this.move(1)');

优点：无语法兼容性问题，作用域清晰；缺点：用户需要了解this的用法，增加学习成本。

方案3：显式注入需要调用的方法（安全可控） #

如果只需要暴露特定方法给用户，可以将这些方法作为参数传入新创建的函数，用户直接调用方法名即可：

const Baby = {
  move(number) {
    // some action here...
  },
  initActions(code) {
    // 提取实例的move方法，作为函数参数传入
    const { move } = this;
    this.init = new Function('move', code);
    // 调用时传入绑定了当前实例的move方法
    this.init(move.bind(this));
  }
};

// 用户输入'move(1)'即可调用
Baby.initActions('move(1)');

优点：精确控制暴露的方法，安全性高；缺点：需要提前预知要暴露的方法，扩展性较差。

选择建议 #

• 追求用户体验优先：选方案1（注意环境是否允许with）
• 追求代码规范和安全性：选方案2
• 需要严格控制暴露的方法：选方案3

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