javascript - eval(fn) 和 eval(arrowFn) 返回不同的值

Question

根据Mozilla docs为了使用 eval 执行函数，它必须被包装在 ( ) 中，即如果您不使用它们，那么它将被视为字符串.

eval as a string defining function requires "(" and ")" as prefix and suffix

当我执行普通函数时，它会按预期返回undefined，但在 ES6 函数的情况下则不会。我的问题是 JavaScript 引擎对 ES6 函数的处理方式不同，或者仅在 eval 函数内处理不同。

var fn = "function a(){}";
var es6fn = "()=>{}";

console.log(eval(fn)); // undefined
console.log(eval(es6fn)); // ()=>{}
console.log(typeof eval(es6fn)); // ()=>{} i.e. a function

Answer 1

让我们退后一步，看看这里到底发生了什么。我认为您误解了 MDN 试图表达的观点。在您的示例中执行的唯一函数是eval。文档提到的 (...) 不是用于执行字符串内的函数，而是用于更改如何评估函数定义。

函数调用将function a(){}()，但文档讨论将函数定义放在括号内:(function(){} )。

<小时/>

基本上有三种定义函数的主要方法:

1. 函数声明

   function foo() {}
   

2. 函数表达式

   var foo = function() {}
   

3. 箭头函数

   var foo = () => {}
   

要理解函数声明和函数表达式之间的区别，我们必须理解语句和表达式之间的区别(声明基本上就像一个声明)。

语句是具有副作用并且不产生值的东西。 if、for、switch等都是语句。

表达式是产生值的东西。例如。 5 是一个产生值 5 的数字文字。5 + 3 是一个计算两个文字之和的表达式，即对其求值将返回值 8。

函数声明就像一个语句。它本身不会产生值，但作为副作用，定义了一个变量，其值为函数(you can see in the specification that nothing happens when a function declaration is evaluated(此时它们已被处理))。

函数表达式非常相似，但不是定义变量，而是对其求值，结果只是函数对象。

这就是原因

eval('function a() {}') // undefined, but a is defined as side effect
eval('(function a() {})') // a function object

产生不同的结果。第一个被解释为函数声明。将创建变量 a，但不会创建 eval 可以返回的值。在第二种情况下，分组运算符 ((...)) 强制将函数定义解释为函数表达式，这意味着eval 生成并返回一个值。

<小时/>

现在关于箭头函数:这里没有歧义。箭头函数定义始终是表达式，即对它们求值总是产生一个值。

eval(`() => {}`) // a function object

<小时/>

总结

虽然箭头函数和函数声明/表达式之间存在差异，但这种差异并不是您使用 eval 看到结果的原因。这里的区别是因为 eval 语句/声明和表达式。