动态执行JS的四种方式&区别

1. eval()函数

eval()函数会将传入的字符串当做 JavaScript 代码进行执行。

eval() 是一个危险的函数，它使用与调用者相同的权限执行代码，主要原因包括：
1. 安全性问题： eval() 函数允许执行任意字符串作为代码，这可能导致恶意用户注入恶意代码，从而造成安全漏洞。
2. 性能问题：动态执行代码会增加程序的复杂性，影响代码的性能和可维护性。
3. 难以追踪问题：使用 eval() 会使代码难以调试和追踪问题，因为它在运行时动态创建代码。
4. 潜在错误：由于 eval() 中的代码是在运行时动态生成的，因此容易出现语法错误或逻辑错误，增加了代码出错的可能性。

因此，在开发过程中，应尽量避免使用 eval() 函数，除非必要情况下并且能够确保输入的安全性。

js 复制代码

    const codeStr = "console.log('123')"
    eval(codeStr); // 123

eval()函数是同步执行还是异步执行？它的作用域又是什么呢？

js 复制代码

    const a = 'abc'
    const codeStr = "console.log('a', a)";

    function fun(codeStr) {
        var a = 'xyz'
        eval(codeStr)
    }
    
    console.log('start');
    fun(codeStr)
    console.log('end');

从运行结果可知：【同步】局部作用域

2. setTimeout(code, delay)、 setTimeout(functionRef, delay)

setTimeout(code, delay) 这是一个可选语法，允许你包含在定时器到期后编译和执行的字符串而非函数。使用该语法是不推荐的，原因和使用 eval() 一样，有安全风险。

js 复制代码

    const a = 'abc'
    const codeStr = "console.log('a', a)";

    function fun(codeStr) {
        var a = 'xyz'
        setTimeout(codeStr,0)
    }
    
    console.log('start');
    fun(codeStr)
    console.log('end');

从运行结果可知：【异步】全局作用域

3. script标签

js 复制代码

    const a = 'abc'
    const codeStr = "console.log('a', a)";
    


    function fun(codeStr) {
        var a = 'xyz'
        const script = document.createElement('script');
        script.innerHTML = codeStr
        document.body.appendChild(script)
    }
    
    console.log('start');
    fun(codeStr)
    console.log('end');

从运行结果可知：【同步】全局作用域

4. Function 构造函数

接收一段代码片段作为函数体，然后动态创建一个函数并返回

js 复制代码

    const a = 'abc'
    const codeStr = "console.log('a', a)";
    
    function fun(codeStr) {
        var a = 'xyz'
        const fn = new Function(codeStr)
        fn()
    }
    
    console.log('start');
    fun(codeStr)
    console.log('end');

从运行结果可知：【同步】全局作用域

与动态创建script标签一致，前者创建了额外了script标签，推荐使用当前方式