我可以在javascript中使用花括号来分隔代码段

Question

这是一些示例代码.我想知道为什么我不应该这样做.

//some code
var x = "hello";

{
    var y = "nice";

    function myfunction() {
        //do stuff . . .
    }
}

我看到这样做的好处是能够以块的形式组织代码段并让自动格式化程序做一些工作...

在我的测试中,{}在创建var或函数时不会影响范围.

Answer 1

这个答案是在早期的JavaScript实现中编写的.虽然相同的var应用规则,ECMAScript 2015(又名ES6)引入了let变量声明语句,该声明遵循"传统的"块范围规则.

let使用块进行作用域的示例,其中记录"1","2","1":

{ let x = 1; console.log(x); { let x = 2; console.log(x) }; console.log(x) }

块上的MDN参考总结了块的用法:

重要提示: JavaScript并不会有块范围.使用块引入的变量的范围限定为包含函数或脚本,并且设置它们的效果将持续超出块本身.换句话说,块语句不引入范围.虽然"独立"块是有效的语法,但您不希望在JavaScript中使用独立块,因为如果您认为它们在C或Java中执行类似块的操作,则它们不会按照您的想法执行操作.

正如在MDN上讨论的那样,语法完全有效,因为{ StatementList }(aka Block)是一个有效的Statement生产.

然而; 因为这是非常重要的:一个新的块并不会引入新的范围.只有函数体引入了新的范围.在这种情况下,两者的x和y变量具有相同的范围.

另外,a FunctionDeclaration 应仅作为顶级语句出现 - 也就是说,它必须是直接在程序或函数体下的语句,而不是块.在这种情况下的声明myfunction是"没有实现而可靠的笔记本电脑".

有一个IIFE(立即调用函数表达式)模式可以使用,虽然它解决了上面的技术问题,但我不推荐它,因为它使代码复杂化.相反,我会简单地创建更多命名函数(命名函数可以嵌套!),可能在不同的模块或对象中,视情况而定.

var x = "hello";

;(function () {
   // New function, new scope
   // "y" is created in scope, "x" is accessible through the scope chain
   var y = "nice";

   // Now VALID because FunctionDeclaration is top-level of Function
   function myfunction() {
   }
})(); // Invoke immediately

// No "y" here - not in scope anymore