【译】节选--揭秘命名函数表达式（Named function expressions ）

时间 2019-11-16

标签节选揭秘命名函数表达式 named function expressions 繁體版

原文原文链接

做者：Juriy "kangax" Zaytsev
原文连接：kangax.github.io/nfe/

简介

使人惊讶的是，在网上，关于命名函数表达式的讨论彷佛并很少。这可能由于有不少误解在流传。在本文中，我会试着从理论和实践两个方面总结这些精彩的Javascript构念，包括其中好的、坏的以及“丑陋”的部分。javascript

简单说，命名函数表达式只对一种东西有用——调试工具(debugger)和分析器(profiler)中的描述性函数名。在递归时也可能用到函数名，但你很快会发现这种用法在当今每每不怎么实用。若是你不关心调试代码的体验，那就不用操心；否则的话，就往下读，你会看到一些你必须处理的跨浏览器问题，以及关于如何处理它们的建议。html

I’ll start with a general explanation of what function expressions are how modern debuggers handle them. 请随意跳到最终方案,该方案解释了如何安全使用这些构念。java

函数表达式和函数声明

ECMAScript中有两种最多见的方式能够建立function对象：函数声明和函数表达式。两者的区别确实很让人迷惘，至少对我来讲是这样的。ECMA规范惟一明确的就是，函数声明必须带有一个标识符(Identifier)，或者说函数名，而函数表达式则能够省略它：git

FunctionDeclaration : function Identifier ( FormalParameterList_opt ){ FunctionBody }github

FunctionExpression : function Identifier_opt ( FormalParameterList_opt ){ FunctionBody }web

咱们能够看到，当标识符被省略，那段代码就是表达式了。但若是标识符存在呢？怎么能分清它是一个表达式仍是一个声明？它们看起来如出一辙。ECMAScript彷佛是经过上下文来区分它们。若是function foo(){}是一个赋值表达式的一部分，那它就是一个函数表达式。相反地，若是function foo(){}被包含在一个函数体内，或在一个程序（顶层）自己中，那它就是一个函数表达式。express

function foo(){} //函数声明
(function foo(){}); //函数表达式:由于被分组操做符括号包围

try {
  (var x = 5); //分组操做符只能包含表达式,不能包含语句
} catch(err) {
  // SyntaxError
}
复制代码

你可能会想到在用eval计算JSON时，字符串一般被括号包围——eval('(' + json + ')')。这固然也是出于相同缘由——分组操做符，圆括号强制把JSON括号解析为表达式，而不是一个代码块。(原文：grouping operator, which parenthesis are, forces JSON brackets to be parsed as expression rather than as a block)：json

try {
  { "x": 5 }; // "{"和"}"解析为代码块
} catch(err) {
  // SyntaxError
}

({ "x": 5 }); //分组操做符强制把"{"和"}"解析为对象字面量
复制代码

声明和表达式的行为有个微妙的不一样浏览器

首先，即便声明位于源代码的最后，函数声明仍然要比做用域中其余表达式先被解析和计算。下面例子示范了fn函数在alert执行时就已经被定义了，即便它在alert后面：缓存

alert(fn());

function fn() {
  return 'Hello world!';
}
复制代码

函数声明的另外一个重要特性就是，根据条件声明函数是不符合标准的，而且在不一样环境中表现不一样。绝对不要使用根据条件声明的函数，而应该使用函数表达式。

// 千万别这么写！
//有些浏览器会声明“foo”为返回“first”的那个，
// 另外一些则会声明为返回“second”的那个

if (true) {
  function foo() {
    return 'first';
  }
}
else {
  function foo() {
    return 'second';
  }
}
foo();

// 应该用表达式方式：
var foo;
if (true) {
  foo = function() {
    return 'first';
  };
}
else {
  foo = function() {
    return 'second';
  };
}
foo();
复制代码

若是你对函数声明的实际生成规则好奇的话，就往下看。不然能够跳过下面的摘录。

函数声明只容许出如今程序或另外一个函数体中。按照语法，它们不能出如今代码块中（{..}）——例如if，while或for语句。由于代码块只能包含语句，不能包含SourceElement，也就是函数声明。若是仔细观察生成规则，就能发现，只有当表达式是表达式语句（ExpressionStatement）的一部分时，它才被容许直接包含在代码块中。然而，表达式语句明肯定义了不能以“function”开头，这就是为什么函数声明不能直接出如今语句或代码块中（记住，代码块也只是一系列语句）。

由于这些限制，无论是函数声明仍是函数表达式，只要直接出如今代码块中（如上例），就会被认为是一个语法错误（syntax error）。问题是，我见到的几乎全部实现都没有严格听从该规则（BESEN和DMDScript是例外）。他们用专有方式来解释（原文：They interpret them in proprietary ways instead）。

值得一提的是，按照规范，实现（implementations）容许引入语法扩展（见第十六章），但仍然彻底一致。这正是现现在这么多客户端存在的状况。Some of them interpret function declarations in blocks as any other function declarations —只是为了把函数声明提高到做用域顶端；另外一些引入不一样的语法，遵循稍微复杂的规则。

函数语句

其中一个语法扩展就是函数语句，目前在基于Gecko的浏览器中实现（测试于Mac OS X中的Firefox 1-3.7a1pre）。不知为什么，不管好的坏的方面，这个扩展彷佛并不广为人知（MDC说起了该扩展，但很简单）。请记住，咱们在此仅以学习为目的讨论，知足咱们的好奇心；除非你正在写针对基于Gecko的环境的脚本，不然我不推荐依赖该扩展。

因此，这些非标准的构念有这些特性：

在任何容许使用纯语句的地方，均可以使用函数语句。这也固然包括代码块：
```
if (true) {
  function f(){ }
}
else {
  function f(){ }
}
复制代码
```

函数语句像任何其余语句同样解析，包括条件执行：

if (true) {
  function foo(){ return 1; }
}
else {
  function foo(){ return 2; }
}
foo(); // 1
// 注意，其余环境把这里的“foo”解读为函数声明,
//第二个“foo”覆写了第一个, 并产生结果"2",而不是“1”
复制代码

函数声明并不在变量实例化的时候被声明。它们被声明于运行时，就像函数表达式同样。然而，一旦声明了，函数语句的标识符在函数做用域内就可用了。该标识符的可用性使得函数语句区别于函数表达式（你会在下一章看到命名函数表达式的确切行为）。

//此时，“foo”尚未被声明
typeof foo; // "undefined"
if (true) {
  // 一旦进入代码块，“foo”就变成被声明状态，
  //在整个做用域内可用
  function foo(){ return 1; }
}
else {
  // 没进入这个代码块，
  //这里的“foo”永远不会被声明
  function foo(){ return 2; }
}
typeof foo; // "function"
复制代码

一般来讲，咱们能够根据以前的例子，用标准代码模拟函数语句行为：

var foo;
if (true) {
  foo = function foo(){ return 1; };
}
else {
  foo = function foo() { return 2; };
}
复制代码

函数语句的字符串表示与函数声明以及命名函数表达式相似（在本例中包括“foo”标识符）：
```
if (true) {
  function foo(){ return 1; }
}
String(foo); // function foo() { return 1; }
复制代码
```

最终，在早期（低于FireFox 3）基于Gecko的实现中出现了一个bug，那就没法用函数语句覆写函数声明：

//函数声明
function foo(){ return 1; }
if (true) {
  //用函数语句覆写
  function foo(){ return 2; }
}
foo(); // 低于FF 3的结果是1，FF 3.5及更高版本是2
// 然而，覆写函数表达式就不会这样
var foo = function(){ return 1; };
if (true) {
  function foo(){ return 2; }
}
foo(); // 在全部版本中结果都是2
复制代码

注意，旧版Safari（至少1.2.3, 2.0到2.0.4以及3.0.4,更早版本也可能）中，执行函数语句的方式与SpiderMonkey相同。本章全部例子，除了最后一个“bug”例子，在这些版本的Safari中产生与Firefox相同的结果。另外一个遵循相同语法的浏览器就是黑莓浏览器（8230机型起，9000和9350机型）。这种行为的多样性，再次印证了依赖这些扩展是多么糟糕的主意。

命名函数表达式

函数表达式确实常见。web开发中的一个常见模式就是，基于某种功能测试复刻函数定义，以得到最佳实践。这些复刻一般出如今相同做用域，因此老是颇有必要使用函数表达式。总之，如目前所知，函数声明不该该按条件执行：

// `contains` is part of "APE Javascript library" (http://dhtmlkitchen.com/ape/) by Garrett Smith
var contains = (function() {
  var docEl = document.documentElement;

  if (typeof docEl.compareDocumentPosition != 'undefined') {
    return function(el, b) {
      return (el.compareDocumentPosition(b) & 16) !== 0;
    };
  }
  else if (typeof docEl.contains != 'undefined') {
    return function(el, b) {
      return el !== b && el.contains(b);
    };
  }
  return function(el, b) {
    if (el === b) return false;
    while (el != b && (b = b.parentNode) != null);
    return el === b;
  };
})();
复制代码

很明显，当一个函数表达式有一个名字（标识符），它就是命名函数表达式（named function expression)了。你在的一个例子中看到的——var bar=function foo(){};——偏偏就是一个命名函数表达式，其名字是foo。一个重要细节须要谨记：它的名字只在新定义的函数的做用域中可用；规范要求一个标识符不应跨做用域使用：

var f = function foo(){
  return typeof foo; // "foo"在最近的大括号内可用
};
// `foo`在外面无效
typeof foo; // "undefined"
f(); // "function"
复制代码

因此命名函数表达式有什么特别吗？为何咱们要给它们命名？

由于命名了的函数可以提高代码调试体验。当咱们调试一个程序时，有一个描述性的子项的调用栈很是有用。

调试工具（debugger）中的函数名

当一个函数有一个相关链的标识符，调试工具在检查调用栈时将其做为函数名。某些调试工具（好比Firebug）会帮你显示函数名，即便是匿名函数。不幸的是，这些调试工具一般依赖简单的解析规则；这种抽象一般脆弱，常常产生错误结果。

来看一个简单例子：

function foo(){
  return bar();
}
function bar(){
  return baz();
}
function baz(){
  debugger;
}
foo();
//这里，咱们用函数声明定义三个函数
// 当调试工具停在“debugger”语句,
// （firebug中的）调用栈很具备描述性：
baz
bar
foo
expr_test.html()
复制代码

可见expr_test.html的全局做用域调用foo，foo调用bar，bar调用baz。Firebug也会匿名函数解析一个名字：

function foo(){
  return bar();
}
var bar = function(){
  return baz();
}
function baz(){
  debugger;
}
foo();

// Call stack
baz
bar()
foo
expr_test.html()
复制代码

但不足之处在于，若一个函数表达式变得很是复杂，调试工具所作的工做就会变得无用；咱们以一个闪亮的问号来代替函数名:

function foo(){
  return bar();
}
var bar = (function(){
  if (window.addEventListener) {
    return function(){
      return baz();
    };
  }
  else if (window.attachEvent) {
    return function() {
      return baz();
    };
  }
})();
function baz(){
  debugger;
}
foo();

// Call stack
baz
(?)()
foo
expr_test.html()
复制代码

当一个函数被赋值给多个变量，另外一个混乱出现了：

function foo(){
  return baz();
}
var bar = function(){
  debugger;
};
var baz = bar;
bar = function() {
  alert('spoofed');
};
foo();

// Call stack:
bar()
foo
expr_test.html()
复制代码

你会发现，调用栈显示了foo调用了bar。很明显实际上并不是如此。这是由于baz和另外一个函数交换了引用——报出“spoofed”的那个。这样的解析——简单状况下很棒——在复杂脚本中无用。

综上，命名函数表达式是得到可靠、健壮调用栈检查的惟一方式。让咱们来重写一下以前的例子：

function foo(){
  return bar();
}
var bar = (function(){
  if (window.addEventListener) {
    return function bar(){
      return baz();
    };
  }
  else if (window.attachEvent) {
    return function bar() {
      return baz();
    };
  }
})();
function baz(){
  debugger;
}
foo();

// 调用栈恢复了描述性
baz
bar
foo
expr_test.html()
复制代码

JScript bug

不幸的是，JScript（IE的ECMAScript实现）完全搞乱了命名函数表达式。那时候命名函数表达式被不少人反对，JScript要为负责。可悲的是，即便是上一个版本的JScript（5.8，IE 8），仍然保留着每个下面说到的怪癖。

让咱们来看看这个破玩意到底哪里不对劲。理解这些问题能使咱们正确处理它们。注意，我把这些差别拆分到不一样例子中——清晰起见——即便它们更像是一个主要bug的一系列后果。

例#1: 函数表达式标识符泄漏进封闭做用域

var f = function g(){};
typeof g; // "function"
复制代码

记得吗？我提到过，一个命名函数的标识符在封闭做用域中无效。可是，JScript并不认同这点——上面例子中的g解析到了一个函数对象上。这是最普遍观察到的差别。这种污染封闭做用域的行为是危险的——由于做用域多是全局的。这种bug不容易排查。

例#2: 命名函数表达式被当成是声明和表达式

typeof g; // "function"
var f = function g(){};
复制代码

正如我以前解释的，一个特定上下文中的函数声明要比其余表达式先被解析。上面的例子证实了JScript确实把命名函数表达式看成是函数声明。你能够看到，在声明以前能够解析了。

例#3: 命名函数表达式建立两个不一样的函数对象

var f = function g(){};
f === g; // false

f.expando = 'foo';
g.expando; // undefined
复制代码

这里事情就变得有趣了，或者说，彻底扯蛋了。在这里咱们要面对这样的危险性：两个对象，给一个赋值并不会修改另外一个；若是你要使用诸如缓存机制之类的，或者在f的属性中存储东西再以g的属性去读取，就会很麻烦，由于你觉得是同一个对象。

例#4: 函数声明是按序解析的，不受条件代码块影响

var f = function g() {
  return 1;
};
if (false) {
  f = function g(){
    return 2;
  };
}
g(); // 2
复制代码

这种例子甚至可能更难追踪bug。