Global eval. What are the options?

David Flanagan最近写了一个关于全局eval的简单表达式，可以用一行式子表示：

var geval = this.execScript || eval;

       尽管看起来很简短，但是跨浏览器的兼容性并不好。仔细考虑了下这个话题，我觉得还有一些方法来实现代码的全局执行。而且有些方法--间接eval--并不为人所熟知，而且它们的内涵也不容易让人们所接受，本文主要介绍下该技术。

       为了可以更清晰的讲解间接eval，我打算先回顾”全局eval“的方法，并回顾它们是如果起作用的，我也会提到刚刚的单行实现全局eval的缺点。

eval是如何工作的

我们先定义一个概念，“全局eval”也就是将代码放到全局上下文来执行。

       我们之所以将”全局eval“这个概念弄得那么复杂，主要还是由于全局内建的eval函数，是在调用eval函数的作用域下执行函数代码。

var x = 'outer';
  (function() {
    var x = 'inner';
    eval('x'); // "inner"
  })();

   上述例子的结果就是”inner“，eval的代码是在调用eval的上下文中执行。这个行为在ECMAScript3和ECMAScript5中是一样的。

       而在EC5中还有一些有趣的事情，eval的行为还依赖两个两件事--其一是否是直接调用，其二调用是否在严格模式下。直接调用和间接调用下文会讨论，而关于在非严格模式并且直接调用eval，与上文提到的行为一样的，代码在调用上下文中执行。

全局上下文下eval

       内建的eval并不会在全局上下文中执行代码，我们来看看其他的一些选项，来实现跨浏览器的全局代码执行。

间接eval调用理论

在EC5中的eval执行时提到了间接eval执行。之所以我们提到间接eval，是因为在EC5中间接eval调用可以使代码在全局上下文中执行。我们先看看直接eval调用的定义：

A direct call to the eval function is one that is expressed as a CallExpression that meets the following two conditions: The Reference that is the result of evaluating the MemberExpression in the CallExpression has an environment record as its base value and its reference name is "eval". The result of calling the abstract operation GetValue with that Reference as the argument is the standard builtin function defined in 15.1.2.1.

— 15.1.2.1.1 Direct Call to Eval [ES5]

（其实，直接eval调用与引用类型Reference有关，首先调用括号的左边必须为引用类型，而且还有一些条件，即引用类型的base必须为环境上下文对象（AO，VO，Global），而且propertyName必须为“eval”，其他字符串不可以。）

看起来不容易理解，其实按规范来说，eval(“1+1”)就是直接eval调用，（1，eval）（”1+1“）就是间接eval调用。如果我们分隔第一个表达式—eval(“1+1”)--这就是一个调用表达式，由成员表达式（eval）和参数（（”1+1”））构成，并且成员表达式由标识符eval组成。

eval             ( '1+1' )
  |______|
  Identifier

  |______|          |________|
  MemberExpression  Arguments

  |__________________________|
  CallExpression

       这就是直接eval调用方式，在调用括号的左边是标识符，而标识符在操作过程中会创建一个引用类型（Reference），该结构包含base和propertyName属性，在这里，base的值为当前作用域的活动对象AO，propertyName为eval。

       关于（1，eval）（“1+1”），我们也可以同样的形式分析：

(     1        ,         eval  )        ( '1+1' )
     |____|   |_____|    |_____|
     Literal  Operator   Identifier

     |_________________________|
     Expression

  |______________________________|
  PrimaryExpression

  |______________________________|        |________|
  MemberExpression                        Arguments

  |________________________________________________|
  CallExpression

       在调用括号左边并不仅仅是eval标识符，它是一个完整的表达式，包括组操作符，数字字面量，eval标识符。虽然这样调用eval也能执行，但是这是间接eval调用，为什么这样是间接eval调用，下文会分析。

间接eval调用的例子

        如果你还是不确定哪些是间接eval调用，那么请看下列情况：

(1, eval)('...')
(eval, eval)('...')
(1 ? eval : 0)('...')
(__ = eval)('...')
var e = eval; e('...')
(function(e) { e('...') })(eval)
(function(e) { return e })(eval)('...')
(function() { arguments[0]('...') })(eval)
this.eval('...')
this['eval']('...')
[eval][0]('...')
eval.call(this, '...')
eval('eval')('...')

       以上所列出的全是间接eval示例，它们都可全局执行代码。

       注意第五行var e = eval; e('...') ；这正是Flanagan所实现--var geval = window.execScript || eval的一部分。当调用geval函数，geval标识符被解析为全局内建函数eval，但是在调用括号左边，标识符并不是eval而是geval，因此这是间接eval调用，在全局上下文中执行。

       有没有注意到ES5中定义调用表达式中的eval“应该是全局的内建的函数”？这意味着eval（”1+1”）也不一定是直接调用，看下面一例：

eval = (function(eval) {
    return function(expr) {
      return eval(expr);
    };
  })(eval);

  eval('1+1'); // It looks like a direct call, but really is an indirect one.
               // It's because `eval` resolves to a custom function, rather than standard, built-in one

       虽然仅仅看eval(“1+1”)，应该是直接调用无疑，但是此处eval并不是内建的函数，因此它是间接eval调用。

       我们看看直接eval调用有哪些方式：

  eval('...')
  (eval)('...')
  (((eval)))('...')
  (function() { return eval('...') })()
  eval('eval("...")')
  (function(eval) { return eval('...'); })(eval)
  with({ eval: eval }) eval('...')
  with(window) eval('...')

        对于（eval）（“…”）,((eval))(“…”)为什么是直接调用呢？其实，对于组操作符”()”,它并不执行表达式，（eval）返回的仍旧是引用类型，同理((eval))也是返回引用类型，而且这两个引用类型的propertyName都是“eval”，而且eval函数也都是全局的，内建的函数。

        而对于上文中提到的间接调用形式(1,eval)(“…”)，逗号操作符和复制运算符会执行表达式，导致eval创建的引用类型调用内部方法[[getValue]]，返回函数对象而不再是引用类型，因此就不满足规范中提到的直接调用eval的条件，为间接调用。

  eval(); // <-- expression to the left of invocation parens — "eval" — evaluates to a Reference
  (eval)(); // <-- expression to the left of invocation parens — "(eval)" — evaluates to a Reference
  (((eval)))(); // <-- expression to the left of invocation parens — "(((eval)))" — evaluates to a Reference
  (1,eval)(); // <-- expression to the left of invocation parens — "(1, eval)" — evaluates to a value
  (eval = eval)(); // <-- expression to the left of invocation parens — "(eval = eval)" — evaluates to a value

间接eval调用练习

我们已经知道在ES5下，间接eval调用可以将代码放到全局上下文中执行，但是还有2件事情需要考虑--ES3中的情形和实际js引擎实现情况。在ES3中，准许间接eval调用抛出错误。而且ES3中也没有规定代码需在全局上下文中执行。那么在具体的实现中呢？

大多数浏览器是按照ES5的规范去实现的，当然也有一些不是。IE<=8下，这两种方式是一样的，都是在调用上下文中执行代码。Safari<=3.2的行为和IE的一样。Older Opera (~9.27)遇到间接eval调用时会抛错，这是ES3规范准许的。

        种种行为提醒我们，间接eval调用的兼容性并不理想，不适合作为全局代码执行的一种方式。因此我们要寻找解决方案。

window.execScript

幸运的是在IE下有一个window.execScript()函数（IE10中没有）。它可以将代码放到全局上下文中执行，但是该函数并不会有返回值。

window.eval

另一个的全局执行代码的方式是window.eval.看起来eval作为window的属性，因此代码在全局执行，其实并不是那样的。window.eval仅仅是作为间接eval调用的一种形式而已，和（1，eval）(“…”),(eval=eval)(“…”)差不太多。

var foo = {
    eval: eval
  };

  foo.eval('...',this); // behaviorally identical to `window.eval('...')`
                   // both are indirect calls and so evaluate code in global scope

        上述的调用方式和window.eval是一样的，因此不要误解window.eval()这种形式。

webkit中的eval上下文

        值得一提的是webkit系列中的一些浏览器的实现—Safari 5和Chrome 9--当设定确切的上下文时（比如this），eval会抛错。确切的上下文，意味着不是window或者全局上下文。抛出的错误是这样的：EvalError: The “this” object passed to eval must be the global object from which eval originated.

window.eval('1+1'); // works
  eval.call(window, '1+1'); // works
  eval.call(null, '1+1'); // works, since eval is invoked with "this" object referencing global object

  eval.call({ }, '1+1'); // EvalError (wrong "this" object)
  [eval][0]('1+1'); // EvalError (wrong "this" object)
  with({ eval: eval }) eval('1+1'); // EvalError (wrong "this" object)

new Function

         我们也都知道通过Function构造函数也可将代码放到全局上下文中执行。但其实这是一个误导。用new Function创建的代码并不是真在全局上下文中执行，而是在创建的函数中执行，只不过该函数的作用域链只包括全局上下文（当然函数的AO是在此之前的）而已。这样，代码看起来像是在全局上下文中执行一样，尽管全局上下文是作用域链中仅有的一个对象。

         通过new Function创建的变量等保存在函数的AO中，而不是全局上下文中。

function globalEval(expression) {
    return Function(expression)();
  }

  var x = 'outer';
  (function() {
    var x = 'inner';
    globalEval('alert(x)'); // alerts "outer"
  })();

  // but!

  globalEval('var foo = 1');
  typeof foo; // "undefined" (`foo` was declared within function created by `Function`, not in the global scope)

另外，new Function还会造成标识符泄露。它可以将“arguments”标识符解析为对象：

  eval('alert(arguments)'); // ReferenceError
  Function('alert(arguments)')(); // alerts representation of an `arguments` object

综上来看，new Function也不能解决代码全局执行的问题。

setTimeout

当给setTimeout传递一个字符串时，会将其放在全局上下文中解析执行。

Script Insertion

这种方法兼容性非常好。jQuery中也是这样实现全局eval的，但是也存在一个缺点，那就是没有返回值。

var el = document.createElement('script');
  el.appendChild(document.createTextNode('1+1'));
  document.body.appendChild(el)

window.execScript || eval的问题

之前提到了Flanagan的这种方式也有一些问题，现在详细指出。

•   间接eval调用是否可行，并没有做特性检测
•   非标准属性execScript在标准属性eval之前

      之前提到有些浏览器并不支持间接eval，可能会抛错，也可能没有效果，因此宽泛的使用间接eval实不可取的。

      另外，互用性的其中一个规则是“标准特性应该在非标准特性之前”。因此execScript放在eval之前不可取。

      最后，如果浏览器都不值这两种方式，方案并没有提供一种降级的方法。在这里，建议使用兼容性最好的 Script Insertion方案作为最后的降级处理。

间接eval的特性检测

        对浏览器是否支持间接eval调用其实很简单。

var globalEval = (function() {

  var isIndirectEvalGlobal = (function(original, Object) {
    try {
      // Does `Object` resolve to a local variable, or to a global, built-in `Object`,
      // reference to which we passed as a first argument?
      return (1,eval)('Object') === original;
    }
    catch(err) {
      // if indirect eval errors out (as allowed per ES3), then just bail out with `false`
      return false;
    }
  })(Object, 123);

  if (isIndirectEvalGlobal) {

    // if indirect eval executes code globally, use it
    return function(expression) {
      return (1,eval)(expression);
    };
  }
  else if (typeof window.execScript !== 'undefined') {

    // if `window.execScript exists`, use it
    return function(expression) {
      return window.execScript(expression);
    };
  }

  // otherwise, globalEval is `undefined` since nothing is returned
})();

这里仍然没有做最后的降级处理，需要你自己添加额外的代码。

总结

所以，我们学到了什么？

•   我们应该知道什么情况下调用eval可以使代码在全局执行；
•   window.eval使代码在全局执行的原理和其他的间接eval调用一样；
•   ES3和ES5对间接eval调用的处理不同；
•   只依靠间接eval调用时不可靠的；
•   不要忘记特性检测；
•   不要忘记最后的降级方案 Script Insertion；