javascript - 为什么事件处理程序能够劫持我对 eval 的直接调用？

Question

我已经知道，在 event handler content attribute 中，范围被元素遮蔽。

因此，在下面的代码片段中，(1,eval) 解析为按钮的自定义 eval 属性，因此背景变为绿色而不是红色。

document.querySelector('button').eval = function(){ return 'green'; };

<button onclick="document.body.style.background = (1,eval)('red')">Click me</button>

此行为在 step 10 中定义的 getting the current value of the event handler并且有道理。

但在下面的代码片段中，我使用了一个名为 eval 的引用，因此它应该是对原生 eval 的直接调用。但是，调用的函数是按钮的自定义eval，就好像是间接调用:

document.querySelector('button').eval = function(){ return 'green'; };

<button onclick="document.body.style.background = eval('red')">Click me</button>

Answer 1

问题是，为了直接调用 eval，使用名为 eval 的引用是不够的。该引用还需要解析为内置的 eval。

在 ES5 中，这在 15.1.2.1.1 - Direct Call to 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 built-in function defined in 15.1.2.1.

在 ES6 中，它在 12.3.4.1 - Runtime Semantics: Evaluation 中指定

1. Let ref be the result of evaluating MemberExpression.
2. Let func be GetValue(ref).
3. ReturnIfAbrupt(func).

4. If Type(ref) is Reference and IsPropertyReference(ref) is false and GetReferencedName(ref) is "eval", then

   1. If SameValue(func, %eval%) is true, then

实际上，事件处理程序是无关的。如果覆盖全局 eval，您会遇到同样的问题。

window.eval = function(){ return "green"; };
alert(eval('red')); // "green"