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

相关推荐
驭风少年君16 分钟前
《搭建属于自己的网站之网页前端学习》基础入门
前端·学习
刘一说1 小时前
深入理解 Spring Boot 嵌入式 Web 容器:从原理到性能调优
前端·spring boot·firefox
你的人类朋友1 小时前
设计模式的原则有哪些?
前端·后端·设计模式
!执行2 小时前
Web3 前端与合约交互
前端·web3·1024程序员节
潘小安2 小时前
跟着 AI 学(二)- Quill 接入速通
前端
十里-2 小时前
在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能
前端·vue.js·ui
shada2 小时前
从Google Chrome商店下载CRX文件
前端·chrome
左耳咚2 小时前
项目开发中从补码到精度丢失的陷阱
前端·javascript·面试
D_C_tyu2 小时前
Vue3 + Element Plus 实现前端手动分页
javascript·vue.js·elementui
黑云压城After3 小时前
vue2实现图片自定义裁剪功能(uniapp)
java·前端·javascript