JavaScript eval 函数用法与词法作用域

作用

eval() 函数会将传入的字符串当做 JavaScript 代码进行执行。

• 返回值：返回字符串中代码的返回值。如果返回值为空，则返回 undefined。

示例

::: demo [vanilla]

<script>
  eval(console.log('控制台会输出此段文字'));
</script>

{
  "show": true
}

:::

如果 eval() 的参数不是字符串， eval() 会将参数原封不动地返回

console.log(eval(new String('2 + 2'))); // 返回了包含"2 + 2"的字符串对象
console.log(eval('2 + 2')); // returns 4

**放在 eval 中的字符串，应该有独自存在的意义或者可以当成语句运行，不能用来与 eval 以外的命令配合使用 **

eval('3x'); // Uncaught SyntaxError: Invalid or unexpected token
eval('return;'); // Uncaught SyntaxError: Illegal return statement

eval 最常见的场合是解析 JSON 数据的字符串，不过正确的做法应该是使用原生的 JSON.parse 方法

eval 修改词法作用域

如下代码：最后输出 a 的值是 1，b 的值是 3 ::: demo [vanilla]

<html>
  <body>
    <p class="evalTestOne">11</p>
    <p class="evalTestTwo"></p>
  </body>
  <script>
    window.onload = function () {
      function foo(str, a) {
        eval(str); // 欺骗！ console.log( a, b );
        document.getElementsByClassName('evalTestOne')[0].innerHTML =
          'a的值：' + a;
        document.getElementsByClassName('evalTestTwo')[0].innerHTML =
          'b的值：' + b;
      }

      var b = 2;
      foo('var b = 3;', 1); // 1, 3
    };
  </script>
</html>

{
  "show": true
}

::: 原因：eval(..) 调用中的 var b = 3;。由于这段代码声明了一个新的变量 b，因此它对已经存在的 foo(..) 的词法作用域进行了修改。 事实上这段代码实际上在 foo(..) 内部创建了一个变量 b，并遮蔽了外部（全局）作用域中的同名变量。

• 非严格模式下，如果 eval(..) 中所执行的代码包含有一个或多个声明（无论是变量还是函数），就会对 eval(..) 所处的词法作用域进行修改。
• 在严格模式的程序中，eval(..) 在运行时有其自己的词法作用域，意味着其中的声明无法修改所在的作用域。