eval() 和 new Function() 执行JS代码

发表于

DEMO

1
2
3
4
5
6
7
8
9
10
11
var a = 'global scope'
function b(){
   var a = 'local scope'
   eval('console.log(a)')   //local scope
   ;(new Function('','console.log(a)'))()  //global scope
}
 
b()
 
local scope
global scope

eval中的代码执行时的作用域为当前作用域。它可以访问到函数中的局部变量。

new Function中的代码执行时的作用域为全局作用域，不论它的在哪个地方调用的。所以它访问的是全局变量a。它根本无法访问b函数内的局部变量。

eval()

以 str 的方式运行 JavaScript 代码，比如：

1
2
3
> var a = 12;
> eval( 'a+5' );
> 17

注意语句上下文 eval()的解析：

1
2
3
4
> eval( '{ foo: 123 }' );
> 123
> eval( '({ foo: 123 })' );
> { foo: 123 }

严格模式下的 eval()

对于 eval()，理应当在严格模式下使用。在松散模式下运行代码会在当前的作用域中创建局部变量：

function f(){ 
       eval( 'var foo = 1' );
       console.log( foo ); // 1
    }

严格模式下就不会出现该情况。但是，运行代码仍然具有读写当前作用域中变量的权限。你需要通过间接调用 eval() 来阻止这种权限。

全局作用域下间接执行 eval() 有两种调用 eval() 的方式：

  1. 直接方式：通过直接调用名为 “eval” 的函数。

  2. 间接方式：使用其他的一些方式。（通过 call 调用，将其以其他名字作为 window 下的一个方法存储，在那里进行调用） 之前已经看过，在当前作用域直接使用 eval 执行代码

    1
    2
    3
    4
    5
    6
    var x = 'global'; 
       function directEval(){
           'use strict';
            var x = 'local';
            console.log( eval('x') ); // local
       }

    反之，在全局作用域中间接调用 eval。 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var x = 'global'; 
    function indirectEval(){
        'use strict';
        var x = 'local';
        // 不同方式调用 call 
        console.log( eval.call(null, 'x') ); // global
        console.log( window.eval('x') ); // global
        console.log( (1,eval)('x') ); // global (1)
        var xeval = eval;
        console.log( xeval('x') ); // global
        var obj = { eval: eval }
        console.log( obj.eval('x') ); // global
    }

说明：当你通过一个名称来引用一个变量的时候，其初始值为一个所谓的引用，数据结构分为两部分：

  1. 基础是指向存储变量的值的数据结构。
  2. 引用名是变量的名称
    在一个函数调用 eval 的时候，该函数的调用操作符（括号）遇到一个对 eval 的引用可以确定被调用函数的名称。所以此时函数会触发一个直接的 eval 调用。当然你可以不给调用操作符引用来强制间接调用 eval。这是由于在操作符运行之前获取引用的值来实现的。在 （1）标注的那一行，逗号操作符为我们实现的这点。这个运算符运行了第一个运算元并返回了第二个运算元的结果。运算结果总是返回 值 的，意味着引用已经被解析。 间接的运行代码总是松散的。这是由于代码被独立的在当前环境中运行的结果。 
    1
    2
    3
    4
    5
    6
    7

    function strictFunc(){ 
        'use strict';
        var code = '(function(){ return this; }())';
        var result = eval.call( null, code );
        console.log( result !== undefined ); // true sloppy mode
    }

new Function()

Function 构造函数的函数签名。
new Function( param1, param2, …, paramN,funcBody );
它创建一个包含0个或者过个参数名为 param1 等的函数，函数体为 funcBody。相当于如下方式创建函数：

1
2
3
function ( (param1), (param2), ..., (paramN) ){ 
        (funcBody)
    }

例如：

1
2
var f = new Function('x', 'y', 'return x+y'); 
f( 3, 4 )

与间接 eval 调用类似，newFunction() 创建的函数作用域也是全局的。 

var x = 'global'; 
function strictFunc(){
   'use strict';
   var x = 'local';
   var f = new Function('return x');
   console.log( f() ); //global
}

以下的函数也是默认松散模式 

function strictFunc(){ 
    'use strict';
    var sl = newFunction( 'return this' );
    console.log( sl() !== undefined ); // true, sloppy modevar st = newFunction( '"use strict"; return this;' );
    console.log( st() !== undefined ); // true, strict mode
}
  1. eval() 对比 new Function()一般来说，使用 new Function() 运行代码比 eval() 更为好一些：函数的参数提供了清晰的接口来运行代码，而没有必要使用较为笨拙的语法来间接的调用 eval() 确保代码只能访问自己的和全局的变量。
  2. 最佳实践
    通常：避免使用 eval() 和 new Function() 。动态运行代码不但速度较慢，还有潜在的安全风险。一般都可以找到更好地替代方案。
    你也不应该使用 eval() 或者 newFunction() 来解析 JSON格式的数据。那也是不安全的。要么使用 ECMAScript 5 内置的对JSON的支持方法，要么使用一个类库。
    合理使用实例。依旧有一些较为合理，对 eval() 和 newFunction() 使用较为高级的：配置函数数据（JSON 不允许），模板库，解析，命令行和模块系统。