命名的 JavaScript 函数表达式的"name"属性返回分配的函数的变量名称背后的原因是什么？

Question

我很好奇为什么命名函数表达式的name属性是函数声明构造的名称的值，而不是可用于执行函数的变量。

function functionDeclaration(){
return;
}
var anonymousFunctionExpression = function(){
return;
}
var namedFunctionExpression = function functionName(){
return;
}
console.log(functionDeclaration.name);//As expected, function name is 'functionDeclaration'
console.log(anonymousFunctionExpression.name);//As expected, function name is 'anonymousFunctionExpression'
console.log(namedFunctionExpression.name);//Why is the function's name 'functionName' and not 'namedFunctionExpression?'

Answer 1

这就是它的工作原理。如果函数表达式中的函数已命名，则将使用该名称(位于=右侧)，否则，如果未命名，则.name将为您提供创建函数时分配给函数的变量名称。(如果它是函数声明而不是函数表达式，则.name只是声明函数的名称。

请注意，如果重新分配匿名创建的函数，其name将保留为函数分配到的原始变量名称。这就是情况 2 中发生的情况，当解释器必须推断变量名时：

const fn = () => {};
const fn2 = fn;
console.log(fn.name);
console.log(fn2.name);

在情况 1 和 3 中，解释器不需要推断变量名，因为函数在定义时已经有一个显式名称：

function functionDeclaration(){
//   ^^^^^^^^^^^^^^^^^^^
return;
}
// and
var namedFunctionExpression = function functionName(){
return;                            ^^^^^^^^^^^^
}

解释器只有在需要从其创建上下文(这是 ES2015 功能)推断函数名称时才会跟踪namedFunctionExpression- 并且此推理仅在情况 2中完成。