Function Declarations Within Blocks according to the Google JavaScript style guide

问题

According to the Google JavaScript style guide, function declarations should not be declared within blocks since this is not a part of ECMAScript. However, I'm not entirely clear on what counts as a block.

Specifically, I have a constructor function and I want to define a function within the scope of that constructor. Would this count as a function within a block, since it is within a set of {}? If so, does that mean every function declaration must be global?

Some code for good measure:

WRONG (?)

function Constructor() {
    function Shout () { alert('THE BEST UX IS IN ALL CAPS.'); }
}

RIGHT (?)

function Constructor() {
    var Shout = function () { alert('THE BEST UX IS IN ALL CAPS.'); };
}

回答1:

A function is not a block. A block is (for example) what follows a while, for, or if.

First, understand that function declarations (function foo() {}) are hoisted to the top of the scope of their containing function (i.e., you can access a declared functions by name anywhere in the same scope as the declaration).:

foo();
function foo() { }

This out-of-order code is 100% legal because the declaration of foo is hoisted to above the foo() invocation. However, now imagine you have a conditional declaration:

if(false) {
    function foo() { }
}

From a language-design perspective, should foo be hoisted? The program flow will never enter the block, but we customarily hoist all declarations. Due to this confusion, declarations inside blocks are not part of the grammar defined by the ECMAScript spec (though each implementation does support this grammar, but causes a different, nonstandard effect in each).

Having a function inside another function does not carry this confusion:

function bar() {
    function foo() { }
}

It's obvious that foo will be hoisted to the top of bar (whenever it runs).

Thus, your first example is perfectly fine.

来源：https://stackoverflow.com/questions/17409945/function-declarations-within-blocks-according-to-the-google-javascript-style-gui

标签

javascript

ecmascript-5

google-style-guide