【日常记录】【JS】动态执行JS脚本

news2024/11/20 11:38:03

文章目录

- 1、第一种方式：eval
- 2、第二种方式：setTimeout
- 3、第三种方式：创建script 标签插入body
- 4、第四种方式：创建 Function
- 5、对比
- 6、参考链接

1、第一种方式：eval

语法

eval(string)

参数

string：一个表示 JavaScript 表达式、语句或一系列语句的字符串。表达式可以包含变量与已存在对象的属性。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    var blockName = 'window作用域'
    function exec(jsCode) {
      var blockName = '函数作用域'
      eval(jsCode)
    }

    exec(`
      console.log('动态执行脚本里面执行 输出blockName',blockName)
      const res = new Promise((resolve,reject)=>{
        setTimeout(()=>{
          resolve('动态执行脚本里面执行 promise 更改状态为 成功')
        },1000)
      })
      res.then(res=>{
        console.log(res)
      })
    
    `)
    console.log('动态执行代码后继续执行');

  </script>
</body>

</html>

可以看到，eval 是 同步执行，采用的 当前作用域 ，在哪执行的就引用那个作用域

2、第二种方式：setTimeout

语法

setTimeout(code)
setTimeout(code, delay)

setTimeout(functionRef)
setTimeout(functionRef, delay)
setTimeout(functionRef, delay, param1)
setTimeout(functionRef, delay, param1, param2)
setTimeout(functionRef, delay, param1, param2, /* … ,*/ paramN)

参数

functionRef：当定时器到期后，将要执行的 function
code：一个可选语法，允许你包含在定时器到期后编译和执行的字符串而非函数
delay：延迟时间，可选，单位是毫秒

    var blockName = 'window作用域'
    function exec(jsCode) {
      var blockName = '函数作用域'
      // eval(jsCode)
      setTimeout(jsCode)
    }

    exec(`
      console.log('动态执行脚本里面执行 输出blockName',blockName)
      const res = new Promise((resolve,reject)=>{
        setTimeout(()=>{
          resolve('动态执行脚本里面执行 promise 更改状态为 成功')
        },1000)
      })
      res.then(res=>{
        console.log(res)
      })
    
    `)
    console.log('动态执行代码后继续执行');

在这里插入图片描述

可以看到 setTimeut 是异步执行，作用域是 全局作用域

3、第三种方式：创建script 标签插入body

    var blockName = 'window作用域'
    function exec(jsCode) {
      var blockName = '函数作用域'
      // eval(jsCode)
      // setTimeout(jsCode)
      let scriptEl = document.createElement('script')
      scriptEl.innerHTML = jsCode
      document.body.appendChild(scriptEl)
    }

    exec(`
      console.log('动态执行脚本里面执行 输出blockName',blockName)
      const res = new Promise((resolve,reject)=>{
        setTimeout(()=>{
          resolve('动态执行脚本里面执行 promise 更改状态为 成功')
        },1000)
      })
      res.then(res=>{
        console.log(res)
      })
    
    `)
    console.log('动态执行代码后继续执行');

在这里插入图片描述

可以看出，这个方式，也是 全局作用域，同步执行代码

缺点是会在 body 标签里面你创建 script 标签

在这里插入图片描述

4、第四种方式：创建 Function

举个例子

const sum = new Function('a', 'b', 'return a + b');

console.log(sum(2, 6));
// 输出: 8

语法

new Function(functionBody)
new Function(arg0, functionBody)
new Function(arg0, arg1, functionBody)
new Function(arg0, arg1, /* …, */ argN, functionBody)

参数

argN：被函数用作形参的名称。每个名称都必须是字符串，对应于一个有效的 JavaScript 参数（任何一个普通的标识符、剩余参数或解构参数，可选择使用默认参数），或用逗号分隔的此类字符串的列表。
functionBody：一个包含构成函数定义的 JavaScript 语句的字符串。就是函数体

    var blockName = 'window作用域'
    function exec(jsCode) {
      var blockName = '函数作用域'
      // eval(jsCode)
      // setTimeout(jsCode)
      // let scriptEl = document.createElement('script')
      // scriptEl.innerHTML = jsCode
      // document.body.appendChild(scriptEl)
      new Function(jsCode)()
    }

    exec(`
      console.log('动态执行脚本里面执行 输出blockName',blockName)
      const res = new Promise((resolve,reject)=>{
        setTimeout(()=>{
          resolve('动态执行脚本里面执行 promise 更改状态为 成功')
        },1000)
      })
      res.then(res=>{
        console.log(res)
      })
    
    `)
    console.log('动态执行代码后继续执行');

在这里插入图片描述

可以看出也是 同步执行 ，全局作用域

5、对比

方式	代码执行顺序	代码执行时作用域	缺点
`eval`	同步执行	执行时候的作用域
`setTimeout`	异步执行	全局作用域
`创建 script 标签插入body`	同步执行	全局作用域	会在浏览器控制台元素里面看到这个插入的script 标签内容
`创建 Function`	同步执行	全局作用域