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;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术点滴

编译器构造

编译器构造 一、 编译器简介 前面谈到静态链接器构造的基本流程,最后提到所构造的链接器若要能正常工作的前提是需要构造一个能生成符合链接器输入文件格式的编译器,本...

2458
来自专栏C/C++基础

将模板申明为友元

严格来说,函数模板(类模板)是不能作为一个类的友元的,就像类模板之间不能发生继承关系一样。只有当函数模板(或类模板)被实例化之后生成模板函数(或模板类),该函数...

1011
来自专栏光变

Redis持久化文件RDB的格式解析

Redis的RDB文件是对内存存储的一种表示。这个二进制文件足以完全恢复Redis当时的运行状态。 RDB文件格式针对快速读写进行了优化。LZF压缩被用于减小文...

1381
来自专栏小樱的经验随笔

C/C++中peek函数的原理及应用

C++中的peek函数   该调用形式为cin.peek() 其返回值是一个char型的字符,其返回值是指针指向的当前字符,但它只是观测,指针仍停留在当前位置,...

2955
来自专栏恰童鞋骚年

你必须知道的指针基础-8.栈空间与堆空间

一个由C/C++编译的程序占用的内存分为以下几个部分:  1、栈区(stack):又编译器自动分配释放,存放函数的参数值,局部变量的值等,其操作方式类似于...

602
来自专栏linux运维学习

linux学习第六十五篇:for循环,while循环, break跳出循环,continue结束本次循环

for循环 语法:for 变量名 in 条件; do …; done for循环会以空格作为分隔符 案例1 #!/bin/bash sum=0 for i ...

28710
来自专栏技术小站

编程填空:第i位替换 编程填空:第i位取反 编程填空:左边i位取反

写出函数中缺失的部分,使得函数返回值为一个整数,该整数的第i位和m的第i位相同,其他位和n相同。

2091
来自专栏程序员互动联盟

【编程基础第十一讲】代码如何写才最漂亮第一篇

存在问题: 好多小伙伴对编码的格式作用模糊,以为只要完成功能就行,其实这种观点是错误的,一定要重视代码规范,不然你哭的地都找不到。 如何实施: 良好的代码开发习...

2777
来自专栏Java帮帮-微信公众号-技术文章全总结

Java面试系列2

六、&和&&的区别? &是位运算符,表示按位与运算,&&是逻辑运算符,表示逻辑与(and) 七、swtich是否能作用在byte上,是否能作用在long上,是否...

2946
来自专栏高性能服务器开发

Redis应用总结

首先, 我带大家简单的了解一下Redis Redis常用数据类型(最为常用的数据类型主要有以下五种) ●String ●Hash ●List ●Set ●Sor...

3357

扫码关注云+社区

领取腾讯云代金券