JavaScript技术问题：如何用变量指定方法名及间接引用对象属性？

嘿，这两个问题其实都是JavaScript对象属性访问的基础知识点，我来给你详细拆解下：

1. 能否在JavaScript中使用变量作为方法名？ #

当然可以！而且有几种非常靠谱的方式，完全不用依赖eval这类不太安全的写法：

• 方括号语法调用对象方法：这是最常用也最推荐的方式。只要把方法名存在变量里，就可以通过对象[变量名]()的形式调用方法。举个简单例子：

const targetMethod = 'sayHi';
const myObject = {
  sayHi: function() {
    console.log('Hi there!');
  },
  sayBye: function() {
    console.log('See you later!');
  }
};
myObject[targetMethod](); // 输出 "Hi there!"

• 如果是全局作用域下的函数，浏览器环境里也可以用window[变量名]()调用，但更建议把函数封装在对象或模块里，避免污染全局空间。

2. 如何间接引用JavaScript对象属性（以你的dataset示例为例） #

先看你写的代码，this.dataset.tempVariable之所以不行，是因为点语法会把tempVariable当成字面量属性名去查找，而不是取变量tempVariable的值。解决这个问题根本不需要eval或者window，用方括号语法就完美解决了，这也是JavaScript里间接访问属性的标准做法。

修改后的代码如下：

<div id="foo" data-munchy="bar" data-crunchy="baz">FooBar</div>
<script>
document.getElementById("foo").onclick = function() {
  const tempVariable = 'munchy';
  console.log(this.dataset[tempVariable]); // 输出 "bar"
}
</script>

原理说明： #

JavaScript访问对象属性有两种方式：

• 点语法（obj.property）：要求属性名是固定的标识符（不能是变量或动态字符串）
• 方括号语法（obj[propertyKey]）：可以接受任意表达式，包括变量、字符串拼接甚至计算结果，会把表达式的求值结果作为属性名去查找

所以这里this.dataset[tempVariable]会先读取tempVariable的值'munchy'，然后去dataset里找对应的属性，正好得到'bar'。

至于eval，除非你有极其特殊的场景（几乎不存在），否则完全没必要用——它会执行字符串形式的代码，不仅性能差，还存在安全风险（如果变量内容不可控的话）。而window在这里更是完全不相关，因为this.dataset是一个绑定到DOM元素的DOMStringMap对象，和全局作用域没有关系。

补充一句：这种方括号语法适用于所有JavaScript对象，不管是普通对象、数组、DOM元素属性，都是通用的间接引用方式，非常实用！

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