有条件的创建函数

缘起

本文始于同事在群里提出的一道技术问题：

var a = 0
if (true) {
  a = 1
  function a() {}
  function b() {}
  var c = 3
  a = 21
  b = 2
  c = 4
}
console.log(a, b, c)

在 Chrome 浏览器中执行结果为：

1 ƒ b() {} 4

即打印结果中，a 为 1，b 为函数 f b() {}，c 为 4。

why

结合作用域和变量提升（【翻译】JavaScript Scoping and Hoisting）的分析，不是应该结果为 a===21 b===2 c===4 吗？

不行，换个浏览器试试，在 Safari 中的执行结果：

21 – 2 – 4

WHAT???

两个浏览器执行结果居然不一致，Safari 中才是我预期的结果，这是为啥呢？

分析

查阅相关文档，原来在 ECMAScript2015 之前，由于不存在语法上的块级作用域，所以 ECMAScript 规范并未定义在块级作用域中声明函数，即函数只能在顶层作用域和函数作用域中声明，所以这样的写法应该是非法的：

if (true) {
  function a() {}
}

然而大多数浏览器实际上是没有遵守这个规范的，而到了 ECMAScript2015 中，由于有了语法上块级作用域的存在，函数就可以在块级作用域中声明，但这样的函数定义行为就和以前的不兼容了，所以为了保证兼容性，在 ecma-262 附录 B.3.3 中说明了对这种形式的函数声明的支持是一个允许的扩展，大多数浏览器中对 ECMAScript 的实现都允许这样写，也允许在不同的浏览器中有自己的行为方式。

分析本文开始的代码片段，可以发现存在 if 语句块，不同浏览器中结果不同的分歧应该出现在 if 语句块内部的块级作用域中。

有条件的创建函数

引用 MDN 中关于函数声明的 Conditionally created functions 说明：

Functions can be conditionally declared, that is, a function statement can be nested within an if statement, however the results are inconsistent across implementations and therefore this pattern should not be used in production code. For conditional function creation, use function expressions instead.

函数允许被有条件的声明，也就是说一个函数声明可以内嵌在 if 语句块中，但是，这种声明方式在不同的浏览器里可能导致的结果是不一致的。因此，不应该在生产环境代码中使用这种声明方式，应该使用函数表达式来代替。

看个简单示例：

var hoisted = 'a' in this
console.log(`'a' name ${hoisted ? 'is' : 'is not'} hoisted. typeof a is ${typeof a}`)
if (true) {
  function a() {}
}

运行结果：

// In Chrome
'a' name is hoisted. typeof a is undefined

// In Safari
'a' name is hoisted. typeof a is function

Chrome 浏览器与 Safari 浏览器的结果显示，名称 a 都提升到了顶层作用域中，但在 Chrome 中 a 类型为 undefined，而 Safari 中 a 的类型为 function，这应该是由于不同浏览器对 ECMAScript 实现的差异导致的。

将 if 的条件表达式修改为 false 再来看看：

var hoisted = 'a' in this
console.log(`'a' name ${hoisted ? 'is' : 'is not'} hoisted. typeof a is ${typeof a}`)
if (false) {
  function a() {}
}

运行结果：

// In Chrome
'a' name is hoisted. typeof a is undefined

// In Safari
'a' name is hoisted. typeof a is function

与条件表达式为 true 时结果一致，由此看来，条件表达式的结果并不会影响变量提升。对于 Safari 浏览器来说，不管条件表达式结果如何，a 都会提升为全局函数，那条件结构的存在就并无意义了。因此，不应该在生产环境代码中使用这种声明方式，应该使用函数表达式来代替。

要实现有条件的创建函数，即仅在条件满足的情况下才创建函数，应该使用函数表达式的方式来定义函数：

var a
if (false) {
  a = function() {}
}

调试

下面我们来调试一下本文开始的代码片段：

var a = 0
if (true) {
  a = 1
  function a() {}
  function b() {}
  var c = 3
  a = 21
  b = 2
  c = 4
}
console.log(a, b, c)

在上述代码的第1条语句行号前打上断点，然后单步执行，观察在单步执行过程中作用域中变量的变化过程。

Chrome 浏览器

刷新页面，代码在断点位置处暂停下来，准备执行断点所在行的语句，此时暂不向下执行，先观察作用域情况。

首先在顶层全局作用域中，我们观察到如下图所示变量：

chrome_1

在全局作用域中，有三个自定义的变量 a、b、c，由于还未执行到赋值语句就已经能看到全局作用域中存在这三个变量名称，所以应该是变量提升到作用域顶部的原因。再看看变量 b，在 if 语句块内部首先是函数声明所定义出来的变量，而目前全局作用域中 b 的值为 undefined，说明仅提升了变量名称，并未提升函数主体，这一点和以前的函数声明提升有矛盾，应该是块级作用域中函数声明写法的锅（目前仅从表象上分析，未深入预编译过程的分析）。

单步执行：