如何动态执行 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 同步 全局作用域
相关推荐
烛阴9 小时前
TypeScript 进阶必修课:解锁强大的内置工具类型(一)
前端·javascript·typescript
Zayn9 小时前
前端路径别名跳转和提示失效?一文搞懂解决方案
前端·javascript·visual studio code
程序员小续10 小时前
告别重复造轮子!看 ahooks 如何改变你的代码结构
前端·javascript·react.js
大力yy10 小时前
从零到一:VS Code 扩展开发全流程简介(含 Webview 与 React 集成)
前端·javascript·react.js
猪哥帅过吴彦祖10 小时前
JavaScript Set 和 Map:现代 JavaScript 的数据结构双雄
前端·javascript·面试
ldj202011 小时前
下拉默认全选,选择展示对象的字段list
前端·javascript
掘金安东尼12 小时前
React 19 发布:useTransition 平滑异步过渡!
前端·javascript·github
用户479492835691512 小时前
ESLint支持多线程Linting啦
前端·javascript·面试
SleepyZone12 小时前
使用 Async Generator 实现 Agent 流式输出与流程控制
javascript·agent·ai编程
猪哥帅过吴彦祖12 小时前
JavaScript Symbol:那个被忽视的"隐形"数据类型
前端·javascript·面试