Javascript 判断函数定义与变量函数定义

发布于08月03日

如果我们在eval(...)中定义一个function f() { ... }，为什么它不适用于其余代码，比如#Button3的onClick？

作为比较，如果我们将该函数定义为f = () => { ... };，则它可用于#Button3的onClick.

为什么这个差异看起来和var functionName = function() {} vs function functionName() {}有点矛盾(这里的概念是function f() { ... }比f = () => { ... };的范围更广).

点击1和3(Uncaught ReferenceError: f is not defined)，然后点击2和3(工作中):

document.getElementById('button1').onclick = () => eval("function f() { alert('hello'); }");
document.getElementById('button2').onclick = () => eval("f = () => { alert('hello'); };");

<div id="button1">1 Click me to define f as a function</div>
<div id="button2">2 Click me to define f as a variable function</div>
<div id="button3" onclick="f();">3 Click to run f()</div>

推荐答案

所有的MDN says on eval个人:

如果没有以严格模式解释源字符串，则var-声明的变量和函数声明将进入周围作用域--对于间接计算，它们将成为全局变量.如果它是严格模式上下文中的直接求值，或者如果eval源字符串本身处于严格模式，则var和函数声明不会"泄漏"到周围的作用域中.

在这里，您直接使用了直接计算(因为您引用了eval)，而"周围范围"是点击处理程序的内部.要查看此方法的工作情况，请单击，然后查看function f方法如何在稍后的单击处理程序中(但不能在其外部)定义可引用的f:

document.getElementById('button1').onclick = () => {
  eval("function f() { alert('hello'); }");
  f();
}

// scope doesn't extend to out here
setTimeout(() => console.log(typeof f), 3000);

<div id="button1">1 Click me to define f as a function</div>

vbl.做，做

f = () => { ... };

就像在普通代码中那样做，没有eval-没有使用const、let、var或function声明它，而是隐式地赋值给全局对象，所以

eval("f = () => { alert('hello'); };");

相当于

eval("window.f = () => { alert('hello'); };");

如果当时作用域中不存在f变量.

// runs
(() => {
  f = () => console.log('f');
})();
f();


// doesn't run
(() => {
  function g() {
    console.log('g');
  }
})();
g();

内联处理程序只能引用全局变量(99%的情况下)，因此要使onclick="f();"正常工作，必须存在window.f.

您使用的是直接求值.请注意，如果您使用间接val，则值代码将不会在调用eval引用的范围内运行，而是在顶层运行-因此，在这样的val中的任何变量声明都将随处可见.

// both work
const indirectEval = eval;
document.getElementById('button1').onclick = () => indirectEval("function f() { alert('hello'); }");
document.getElementById('button2').onclick = () => indirectEval("f = () => { alert('hello'); };");

<div id="button1">1 Click me to define f as a function</div>
<div id="button2">2 Click me to define f as a variable function</div>
<div id="button3" onclick="f();">3 Click to run f()</div>