js如何动态生成变量、函数并使用

在项目中，为了实现一个需求，走入了误区。然后实现了动态创建变量和函数这么个操作，想了想还是分享出来，有需要的盆友还可以参考下。

目的：

let a = 'x'

// 根据变量a，动态声明一个名为x的变量 let x

首先把坑列出来吧：

1.利用window创建全局变量

window[a] = 'xxx'

// 结果就是利用了全局变量都挂载在window的特点

首先我们并不一定希望创建全局变量，其次此变量若为一个构造函数的话，通过此构造函数声明的变量，最终的构造函数会是一个匿名函数。

2.利用创建对象属性实现

此方法与window下创建差不多，并且不会创建全局变量，但表现形式上不是我们想要的，而且作为构造函数也会有问题。

3.eval 动态声明变量

eval('let '+a+'=1')
console.log(x) // 报错，变量未声明

eval('let '+a+'=1;console.log(x)')
// 打印 1

相信这个是大多数人的第一反应，但是实际上事与愿违，eval的作用域恐怕是独立的，我们在之外是拿不到的，这样只声明成功却不能使用肯定不是我们想要的。

最终方案：

其实这么多方法，还是eval最贴合我们想要的结果，所以对其稍微改动下，实现我们的目的：

let a = 'x'
function callBack(variable){
    console.log(variable) // 打印1
}
eval(`let ${a} = 1;callBack( ${a} )`)

通过回调函数的方式，我们就可以顺利拿到动态创建的变量了

同理，自定义function

 let a = 'x'
function callBack(variable){
    let obj = new variable
    console.log(obj.constructor.name) // 打印x
}
eval(`let ${a}= function(){ };callBack( ${a} )`)