如何动态执行 JS 脚本

场景

在实际的业务开发中,我们可能需要将一段字符串代码动态执行,我们看一个例子:

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

exec('console.log("Hello world")')

eval 函数

eval()函数 是一种接受字符串作为参数,并且可以将接受的字符串转换成js表达式并且立即执行该表达式。

ini 复制代码
const a = 1;
function exec(code) {
  const a = 2;
  eval(code);
}

exec('console.log(a)');
console.log('sync');

// 执行结果:先输出 2,再输出 sync

特点:同步执行,其作用域为当前执行作用域

setTimeout

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

ini 复制代码
const a = 1;
function exec(code) {
  const a = 2;
  setTimeout(code);
}

exec('console.log(a)');
console.log('sync');

// 执行结果:先输出 sync,再输出 1

特点:异步执行,其作用域为全局作用域

动态 script 标签

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

ini 复制代码
const a = 1;
function exec(code) {
  const a = 2;
  var script = document.createElement('script');
  script.innerHTML = code;
  document.body.appendChild(script);
}

exec('console.log(a)');
console.log('sync');

// 执行结果:先输出 1,再输出 sync

特点:同步执行,其作用域为全局作用域

new Function

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

javascript 复制代码
const a = 1;
function exec(code) {
  const a = 2;
  new Function(code)();
}

exec('console.log(a)');
console.log('sync');

// 执行结果:先输出 1,再输出 sync

特点:同步执行,其作用域为全局作用域

总结

具体的实现方案可根据当前的业务场景来选择,但是不推荐 动态script标签 ,毕竟是通过操作 Dom 实现的。

方法 同步/异步 作用域
eval 同步 当前执行作用域
setTimeout 异步 全局作用域
动态 script 标签 同步 全局作用域
new Function 同步 全局作用域
相关推荐
南玖i5 小时前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗,可修改大小
前端·javascript·vue.js
YAY_tyy5 小时前
Three.js 开发实战教程(五):外部 3D 模型加载与优化实战
前端·javascript·3d·three.js
Zuckjet_8 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
bitbitDown10 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
YAY_tyy10 小时前
【JavaScript 性能优化实战】第六篇:性能监控与自动化优化
javascript·性能优化·自动化
gnip11 小时前
实现AI对话光标跟随效果
前端·javascript
闭着眼睛学算法12 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od
烛阴12 小时前
【TS 设计模式完全指南】构建你的专属“通知中心”:深入观察者模式
javascript·设计模式·typescript
lumi.13 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰13 小时前
vue核心原理实现
前端·javascript·vue.js