前端如何动态执行JavaScript代码?

今天来聊一聊javascript如何动态执行js代码,我总结了以下四种方法。

第一种方式:eval

eval函数会将传入的字符串作为js代码执行,并且返回最后一个表达式的值。

javascript 复制代码
eval('console.log(1)') // 1

eval的特点:

  1. 同步执行;
  2. 执行环境为当前作用域
ini 复制代码
let a = 1;
function test() {
  let a = 2;
  eval('console.log(a)'); // 2
}
test();

使用eval需要注意:

  • 安全风险:任何时候都不要把用户的输入放入eval中执行,可能被注入恶意代码(如 eval('alert("XSS")'))。
  • 性能差:eval 会中断 JavaScript 引擎的优化,导致执行速度变慢。
  • 可读性和维护性差:动态生成的代码难以调试和维护。

第二种方式:new Function

可以通过构造函数Function动态创建一个函数,然后主动执行它。

Function的函数签名如下:

javascript 复制代码
new Function([arg1, arg2, ...argN], functionBody)

其中,arg1, arg2, ...argN 是参数名,functionBody 是函数体。

ini 复制代码
let a = 1;
function test() {
  let a = 2;
  let fn = new Function('console.log(a)');
  fn(); // 1
}
test();

new Function的特点:

  1. 同步执行;
  2. 执行环境为全局作用域

第三种方式:setTimeout

平常我们使用setTimeout第一个传递的是一个函数,第二个参数是延迟执行的时间。

scss 复制代码
setTimeout(functionRef, delay);

但其实,setTimeout的第一个参数也可以是一个字符串,表示要执行的代码。

javascript 复制代码
setTimeout('console.log(1)', 1000); // 1

来看看setTimeout执行的作用域:

ini 复制代码
let a = 1;
function test() {
  let a = 2;
  setTimeout('console.log(a)', 1000); // 1
}
test();

所以setTimeout的特点如下:

  1. 异步执行;
  2. 执行环境为全局作用域

第四种方式:script标签

在浏览器环境中,我们可以动态创建script标签来执行代码。

ini 复制代码
var a = 1;
let script = document.createElement('script');
script.textContent = 'console.log(1)';
document.body.appendChild(script); // 1

这个都不用多说了,肯定是全局作用域,所以script动态执行的特点如下:

  1. 同步执行;
  2. 执行环境为全局作用域

应用场景

动态执行js这个功能在业务开发几乎不用用到,但在一些打包工具中会用到,比如webpack

1. devtool使用eval

webpack的配置文件webpack.config.js,有一项关于devtool的配置。

java 复制代码
// webpack.config.js
module.exports = {
  devtool: 'eval-source-map',
}

当把devtool设置为eval-source-map时,webpack打包出来的代码会使用eval进行包裹。

打包前的代码:

arduino 复制代码
// ./src/index.js
console.log(1)

打包后的产物长这样,这里我使用的是webpack5

ini 复制代码
// bundle.js
(() => {
  var __webpack_modules__ = ({
    "./src/index.js":
      (() => {
        eval("console.log(1)//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9zcmMvaW5kZXguanMiLCJtYXBwaW5ncyI6IkFBQUEiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly93ZWJwYWNrLWRlbW8vLi9zcmMvaW5kZXguanM/YjYzNSJdLCJzb3VyY2VzQ29udGVudCI6WyJjb25zb2xlLmxvZygxKSJdLCJuYW1lcyI6W10sInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///./src/index.js\n");

      })

  });
  var __webpack_exports__ = {};
  __webpack_modules__["./src/index.js"]();
})();

这样的好处是:

  1. source-map映射内置在打包后的js文件中,不会生产单独的source-map文件;
  2. 由于是用eval直接包裹,所以构建速度快,适合开发环境调试使用。

顺便提一下,开发环境一般会使用eval-cheap-module-source-map,相比于eval-source-map

  1. cheap: 不生成列映射,只生成行映射,生成的映射文件体积更小;
  2. module: 生成映射文件时,会保留模块的路径信息,方便调试。

生产环境如果需要调试的话,一般会使用全量的最完整的sourcemap,也就是devtool: 'source-map',这样生成的映射文件虽然体积最大,但调试体验最好。

2. tapable中使用 new Function

webpack的编译过程中,tapable 实现了在编译过程中的一种发布订阅者模式的插件 Plugin 机制。在tapable的源码中,就用到了new Function

简单举个例子:

javascript 复制代码
// Tapable 动态生成的调用函数(伪代码)
const hook = new SyncHook(["arg1", "arg2"]);
hook.tap("plugin1", (arg1, arg2) => console.log(arg1, arg2));
hook.tap("plugin2", (arg1, arg2) => console.log(arg2, arg1));

这里用到了SyncHook做了一个监听,按传统的发布订阅的实现的话,内部会用callbacks.forEach(fn => fn(...args)))进行调用,每次触发事件都需要动态遍历回调数组,性能较低,所以tapablenew Function做了优化。

javascript 复制代码
// 动态生成的调用逻辑
const compiledFn = new Function("arg1", "arg2", `
 plugin1Fn(arg1, arg2);
 plugin2Fn(arg2, arg1);
`);
compiledFn("a", "b");

这里直接用new Function把逻辑进行动态组装成一个函数,节省了上下文开销,实现更加高效的事件触发逻辑,尤其是在处理大量钩子(Hooks)和插件时。

总结

主要介绍了四种动态执行js的方法:

  1. eval: 同步,当前作用域;
  2. new Function: 同步,全局作用域;
  3. script标签: 同步,全局作用域;
  4. setTimeout: 异步,全局作用域。

还简单介绍了动态执行的应用场景,比如webpackdevtool配置使用到了evaltapable中使用new Function

相关推荐
AntBlack7 分钟前
闲谈 :AI 生成视频哪家强 ,掘友们有没有推荐的工具?
前端·后端·aigc
花菜会噎住43 分钟前
Vue3核心语法进阶(computed与监听)
前端·javascript·vue.js
I'mxx1 小时前
【vue(2)插槽】
javascript·vue.js
花菜会噎住1 小时前
Vue3核心语法基础
前端·javascript·vue.js·前端框架
全宝1 小时前
echarts5实现地图过渡动画
前端·javascript·echarts
vjmap1 小时前
MCP协议:CAD地图应用的AI智能化解决方案(唯杰地图MCP)
前端·人工智能·gis
simple_lau2 小时前
鸿蒙设备如何与低功耗蓝牙设备通讯
前端
啃火龙果的兔子3 小时前
解决 Node.js 托管 React 静态资源的跨域问题
前端·react.js·前端框架
ttyyttemo3 小时前
Compose生命周期---Lifecycle of composables
前端
以身入局3 小时前
FragmentManager 之 addToBackStack 作用
前端·面试