如何在JavaScript中替代eval()实现按钮点击访问不同对象？

API 探路者

2026-5-14

替代eval()访问对象的安全方案

嘿，我明白你现在的需求——通过按钮的value值来对应不同的对象，之前用eval()确实能实现，但这玩意儿真的不推荐，不仅有安全风险（万一传入的字符串是恶意代码就麻烦了），性能也不如直接属性访问。给你几个更靠谱的替代方案：

方案1：用容器对象统一管理（最推荐）

把所有需要访问的对象都放到一个专门的容器里，然后通过方括号语法来根据字符串获取对应的对象，这是最安全、最清晰的方式。

修改后的代码如下：

// 用一个容器对象管理所有需要访问的目标对象
const dataContainer = {
  tests: { name:'lee', age:34 },
  test123: { name:'leess', age:36 }
};

function test2(e){ 
  const x = e.value;
  // 直接通过容器的方括号访问属性，替代eval
  const y = dataContainer[x]; 
  const results = document.getElementById('results');
  results.innerHTML = `name ${y.name} age ${y.age}`;
}

HTML部分无需修改：

<button value="tests" onClick="test2(this)">Button</button>
<button value="test123" onClick="test2(this)">cta2</button>
<div id="results"></div>

方案2：访问全局对象（不推荐，仅作了解）

如果你的对象是挂载在全局作用域（浏览器环境下就是window对象）的，也可以通过window[x]来获取，但这种方式会污染全局作用域，而且如果有同名变量容易出冲突，所以尽量不用。

示例代码：

var tests={ name:'lee', age:34 }
var test123={ name:'leess', age:36 }

function test2(e){ 
  const x = e.value;
  const y = window[x]; // 直接从全局对象获取对应变量
  const results = document.getElementById('results');
  results.innerHTML = `name ${y.name} age ${y.age}`;
}