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

相关推荐
DaMu2 分钟前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员2 分钟前
一文读懂Font文件
前端
Asort4 分钟前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer5 分钟前
什么是 React 中的远程组件?
前端·react.js
真夜5 分钟前
关于rngh手势与Slider组件手势与事件冲突解决问题记录
android·javascript·app
我是日安8 分钟前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js
知了一笑8 分钟前
「AI」网站模版,效果如何?
前端·后端·产品
艾小码11 分钟前
用了这么久React,你真的搞懂useEffect了吗?
前端·javascript·react.js
知觉12 分钟前
实现@imput支持用户输入最多三位整数,最多一位小数的数值
前端
RoyLin12 分钟前
TypeScript设计模式:状态模式
前端·后端·typescript