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

相关推荐
SUPER52663 小时前
FastApi项目启动失败 got an unexpected keyword argument ‘loop_factory‘
java·服务器·前端
sanx183 小时前
专业电竞体育数据与系统解决方案
前端·数据库·apache·数据库开发·时序数据库
你的人类朋友5 小时前
【Node】认识一下Node.js 中的 VM 模块
前端·后端·node.js
Cosolar5 小时前
FunASR 前端语音识别代码解析
前端·面试·github
@大迁世界8 小时前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
芭拉拉小魔仙8 小时前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump8 小时前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD8 小时前
Echarts单轴坐标系散点图
前端·javascript·echarts
不做无法实现的梦~9 小时前
jetson刷系统之后没有浏览器--解决办法
开发语言·javascript·ecmascript
德育处主任Pro9 小时前
前端玩转大模型,DeepSeek-R1 蒸馏 Llama 模型的 Bedrock 部署
前端·llama