在前端开发中，通常我们需要创建函数来处理各种逻辑。但是有时候我们需要在运行时动态地创建一个函数，然而这个函数的名称要根据程序运行时的变量值来确定。比如说，在某些场景下，我们需要将一组函数分别绑定到不同的按钮上，以便在用户点击按钮时执行相应的函数。此时，我们就需要在运行时动态地创建这些函数并给它们命名。
传统的做法是使用 eval 函数来实现这个功能，但是 eval 函数会带来一些安全问题。那么有没有其他的方式来避免使用 eval 呢？本文将介绍两种不使用 eval 的方式来创建运行时确定名字的函数。
使用对象属性
第一种方式是通过对象属性来创建运行时确定名字的函数。我们可以将需要创建的函数作为对象的属性，然后使用中括号访问器来动态设置属性名。例如：
const obj = {};
const functionName = 'myFunction';
obj[functionName] = function() {
console.log('hello world');
};
obj[functionName]();这样就创建了一个名为 myFunction 的函数，并通过 obj[functionName]() 的方式调用它。需要注意的是，如果属性名中包含特殊字符（比如空格或者中文字符），则需要使用引号将属性名包裹起来。
使用函数构造器
第二种方式是使用函数构造器 Function 来创建运行时确定名字的函数。我们可以将需要创建的函数体作为字符串传递给函数构造器，并在字符串中使用占位符 {name} 来表示函数名，然后使用 replace 方法将占位符替换成实际的函数名。例如：
const functionName = 'myFunction';
const functionBody = 'console.log("hello world");';
const dynamicFunction = new Function(functionBody.replace('{name}', functionName));
dynamicFunction();这样就创建了一个名为 myFunction 的函数，并通过 dynamicFunction() 的方式调用它。需要注意的是，使用函数构造器来创建函数会带来一些安全问题，因为它可以执行任意的 JavaScript 代码。因此，应该避免使用非常量字符串来构造函数体，以及避免将用户输入直接传递给函数构造器。
总结
本文介绍了两种不使用 eval 的方式来创建运行时确定名字的函数：使用对象属性和使用函数构造器。虽然这两种方式都可以实现相应的功能，但是它们都存在一定的安全风险。因此，我们在使用这些方式时需要特别注意安全性，并尽量避免使用动态构造函数的方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30660