如何动态执行js脚本

动态执行js脚本,就是将一段字符串代码当成js代码来执行。 我们直接来个案例,如下

javascript 复制代码
function dynamicFn(code) {
    // 如何将字符串当成js代码执行
}

dynamicFn("console.log(123)")

解决方案

eval

遇到这样的问题,或许我们首先想到就是 eval 方法

eval() 函数计算 JavaScript 字符串,并把它作为脚本代码来执行。 如果参数是一个表达式,eval() 函数将执行表达式。如果参数是Javascript语句,eval()将执行 Javascript 语句。

那么 dynamicFn 方法可修改如下

javascript 复制代码
function dynamicFn(code) {
    eval(code); // 123
}
dynamicFn("console.log(123)")

很简单,另外我们从 同步/异步作用域 两个方面来拓展一下吧。

javascript 复制代码
var a = 10;
function dynamicFn(code) {
    var a =20;
    eval(code);
}

dynamicFn("console.log(a)")
console.log(30)

// 执行结果
// 20
// 30

我们可以看出 eval 方法是同步执行,其作用域为当前执行作用域

setTimeout

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

setTimeout 的第一个参数,可以是一个函数,也可以是一个代码串,那么我们就可以利用其特点来实现动态js脚本

javascript 复制代码
var a = 10;
function dynamicFn(code) {
    var a = 20;
    setTimeout(code, 0)
}

dynamicFn("console.log(a)")
console.log(30)

// 执行结果
// 30
// 10

我们可以看出 setTimeout 方法是异步执行,其作用域为全局作用域

动态script标签

动态script标签 方法就是我们创建一个script标签元素对象,将其插入到当前Dom里

javascript 复制代码
var a = 10;
function dynamicFn(code) {
    var a = 20;
    var script = document.createElement('script');
    script.innerHTML = code;
    document.body.appendChild(script);
}

dynamicFn("console.log(a)")
console.log(30)

// 执行结果
// 10
// 30

我们可以看出 动态script标签 方法是同步执行,其作用域为全局作用域

new Function()

所有函数方法的原型对象是 Function ,我们可以通过 new Function() 示例来生成一个方法,再执行就可动态执行js了

javascript 复制代码
var a = 10;
function dynamicFn(code) {
    var a = 20;
    var fn = new Function(code);
    fn();
}

dynamicFn("console.log(a)")
console.log(30)
console.log(Object.getPrototypeOf(dynamicFn)) // ƒ () { [native code] }

// 执行结果
// 10
// 30

我们可以看出,new Function() 方法是同步执行,其作用域为全局作用域

总结

具体的实现方案可根据当前的业务场景来选择,但是不推荐 动态script标签,毕竟是通过操作Dom实现的。 另外呢,感兴趣的可以看下 webpackdevelopment 环境下的打包结果,也是在大量应用 eval 来实现代码的加载和执行。

方法 同步/异步 作用域
eval 同步 当前执行作用域
setTimeout 异步 全局作用域
动态script标签 同步 全局作用域
new Function 同步 全局作用域
相关推荐
我想说一句5 分钟前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom11 分钟前
JavaScript reduce()函数详解
javascript
小飞悟13 分钟前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子19 分钟前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手1 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
前端康师傅1 小时前
JavaScript 中你不知道的按位运算
前端·javascript
tianchang1 小时前
策略模式(Strategy Pattern)深入解析与实战应用
前端·javascript·代码规范
best6662 小时前
JavaScript的Math内置对象,到底是何方神圣?
javascript
掘金安东尼2 小时前
技术解析:高级 Excel 财务报表解析器的架构与实现
前端·javascript·面试
每天开心2 小时前
一文教你掌握事件机制
前端·javascript·ai编程