如何动态执行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 同步 全局作用域
相关推荐
10年前端老司机1 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
晓13137 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
烛阴8 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7898 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼9 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
阳火锅10 小时前
Vue 开发者的外挂工具:配置一个 JSON,自动造出一整套页面!
javascript·vue.js·面试
每天吃饭的羊10 小时前
react中为啥使用剪头函数
前端·javascript·react.js
多啦C梦a10 小时前
【适合小白篇】什么是 SPA?前端路由到底在路由个啥?我来给你聊透!
前端·javascript·架构
薛定谔的算法10 小时前
《长安的荔枝·事件流版》——一颗荔枝引发的“冒泡惨案”
前端·javascript·编程语言
轻语呢喃11 小时前
每日LeetCode : 两数相加--链表操作与进位的经典处理
javascript·算法