Block-level function

Posted on In

在某个论坛有人问了下面的一段代码

1
2
3
4
5
6
7
8
9
10
11
12
function f() {
  console.log("outside")
}
function a() {
  f()
  {
    function f() {
      console.log("inside")
    }
  }
}
a()

问的是为什么在浏览器中是f is not a function。
这个问题其实很好回答，存在函数提升，但是仔细想想又不对，因为函数提升是把整个函数都提升到当前作用域，所以按理来说 f 并不会是undefined。
如果按照函数提升的话，结果应该是像这样：

1
2
3
4
5
6
7
8
9
10
11
function f() {
  console.log("outside")
}

function a() {
  function f() {
    console.log("inside")
  }
  f() { }
}
a()

所以结果应该是inside才对，用 IE7 可以发现结果确实是 inside。
那这里为什么是 undefined 呢？
后面那位兄弟说在阮一峰的《ES6 入门》中说道，ES6 规定块级作用域中的函数定义规定为函数表达式。如果是定义为函数表达式的话，那就会像这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function f() {
  console.log("outside")
}

function a() {
  var f
  f()
  {
    var f = function f() {
      console.log("inside")
    }
  }
}
a()

这么一来这个undefined就可以解释了，因为只存在变量提升，而还未定义，所以就会出现undefined。但是那本书后还加了一句，浏览器并未遵循实现。
后面在 starkoverflow 上找到了一个老哥的回答，他的解释为这是因为strict & non-strict mode的不同。

  • let 和 const 在两种模式下行为一样
  • function 在两种模式下的行为就不是一样的，因为浏览器会扩展非严格模式，从而兼容老代码。

所以，在strict mode中，第一段代码输出的是outside，non-strict mode中就会报错，因为会变成下面这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function f() {
  console.log("outside")
}

function a() {
  var f // function-scoped
  f()
  {
    let f1 = function () {
      console.log("inside")
    } // block-scoped
    f = f1
  }
}
a()

MDN 中关于Block-level functions in non-strict code的也只有一句话： Don't.