为什么在bloxk范围之外调用函数时没有收到ReferenceError？

Question

I have the following code snippet. I do not understand why the last sayHello function runs, when instead I would aspect a ReferenceError as sayHello it is declared within a bracket scope.

 { sayHello(); // works! function sayHello() { console.log('Hellow world!'); } } sayHello(); // why it is not // ReferenceError 

Answer 1

You are hitting an unfortunate backward-compatibility edge-case of the JavaScript language.

The ES2015 (ES6) spec of the language was the first to add support for functions inside blocks { ... } like you have. Unfortunately most implementations of the language supported them anyway, because it was technically allowed as an extension to the language.

To allow for old code relying on this extended behavior, the newer versions of the language include Annex B , and in this case specifically B.3.3 Block-Level Function Declarations Web Legacy Compatibility Semantics , which defined the behavior you are seeing.

Note the header in the annex:

The ECMAScript language syntax and semantics defined in this annex are required when the ECMAScript host is a web browser. The content of this annex is normative but optional if the ECMAScript host is not a web browser.

meaning that implementing this behavior is optional and definitely not something you should rely on.

The easiest way to never have to sorry about Annex B optional features is to run your code in strict mode at all times. Generally I'd say this is always the right call regardless.

If you're not familiar, "use strict"; is what is called a "directive" and you can include it at the top of your JS file, or at the top of an individual function. In this case doing

"use strict";

{
  sayHello();

  function sayHello() {
    console.log('Hellow world!');
  }
}

sayHello();

will throw the errors you expected to see.

Moving forward, JavaScript import / export module syntax is also automatically strict, so in the long run the vast majority of code will be strict anyway and not run into this issue.