动态执行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标签,推荐使用当前方式

相关推荐
gnip2 小时前
Jst执行上下文栈和变量对象
前端·javascript
excel2 小时前
🐣 最简单的卷积与激活函数指南(带示例)
前端
醉方休2 小时前
npm/pnpm软链接的优点和使用场景
前端·npm·node.js
拉不动的猪2 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do2 小时前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript
奇舞精选3 小时前
超越Siri的耳朵:ASR与Whisper零代码部署实战指南
前端·人工智能·aigc
奇舞精选3 小时前
Nano Banana 如何为前端注入 AI 控制力
前端·aigc
一支鱼3 小时前
基于 Node.js 的短视频制作神器 ——FFCreator
前端·node.js·音视频开发
DT——3 小时前
前端登录鉴权详解
前端·javascript
李姆斯3 小时前
复盘上瘾症:到底什么时候该“复盘”,什么时候不需要“复盘”
前端·后端·团队管理