如何在类内部用eval修改AppComponent的arrTest为['Back to Original']？

我明白你的困扰：在Angular组件类内部试了各种eval写法，都没法让传入的字符串代码修改组件实例的arrTest属性，而且你只想要类内部的实现方案，不想改动外部调用的方式。

问题根源 #

Angular默认启用严格模式，在严格模式下，eval的作用域和this绑定规则会变得苛刻：

• 直接调用eval(pString)时，即便作用域是当前箭头函数，类实例的属性也无法在eval的严格模式代码里通过this正确访问；
• 间接调用eval（比如赋值给变量、用call绑定上下文）时，代码会跑到全局作用域执行，自然碰不到组件实例的this。

可行的内部解决方案 #

在TestClass.Run方法里，用new Function替代eval，并通过call绑定当前组件实例作为执行上下文。这样能确保传入的字符串代码精准访问到实例的this。

修改后的代码如下：

export class AppComponent {
  arrTest = ['Original'];
  constructor() {
    this.TestClass.Run("this.arrTest = ['Back to Original'];");
    console.log(this.arrTest); // 现在会输出 ['Back to Original']
  };
  TestClass = {
    Run : (pString) => {
      this.arrTest = ['Changed'];
      // 用new Function替代eval，并绑定当前组件实例
      new Function(pString).call(this);
    }
  };
}

为什么这个方案有效 #

new Function创建的函数默认在全局作用域执行，但通过call(this)可以强制把函数内部的this绑定到当前组件实例，这样字符串代码里的this.arrTest就能精准指向实例属性，完成修改。

额外提醒 #

虽然这个方案解决了你的问题，但eval和new Function都存在安全风险（如果传入的字符串代码不可信，可能引发代码注入攻击），生产环境里尽量避免用这类动态执行代码的方式。如果有其他实现需求，优先考虑更安全的静态代码方案。

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