函数作用域和块作用域

本章讨论的问题是,是否只有函数会生成新的作用域,在Javas中其他的结构能生成作用域吗?

函数中的作用域

考虑一下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
function foo(a){
var b = 2
//一些代码

function bar (){
//...

}

//更多的代码

var c = 3
}

在这个代码片段中,foo(…) 的作用域气泡中包含了标识符a、b、c和bar,无论标志服声明出现在作用域中的何处,这个标识符所代表的变量或函数都将属于所处作用域的气泡。

所以,这些在foo中定义的标识符无法从全局作用域中进行访问,这会导致ReferenceError

总结一下函数作用域,属于这个函数的全局变量都可以在整个函数的范围内使用以及复用。但与此同时,如果不细心处理那些可以在整个作用域范围内被访问的变量,可能导致意想不到的问题。

隐藏内部实现

对函数的传统认知就是先声明一个函数,然后再向里面添加代码。但反过来想也可以带来 一些启示:从所写的代码中挑选出任意一个片段,然后利用函数声明对它进行包装,实际上就是把代码隐藏起来了。

这其实就是在这个代码片段周围创建了一个作用域气泡,也就是说任何声明(变量或者函数)都将绑定在这个新创建的包装函数的作用域中。

出发点以及目的,为什么要对代码进行隐藏:应该最小限度的暴露必要内容,而将其他内容都“隐藏起来”,这类似于某个模块或者对象的API设计。

规避冲突

“隐藏”作用域中的变量和函数所带来的另一个好处是,是可以避免同名标识符之间的冲突。

1
2
3
4
5
6
7
8
function foo() { function bar(a) {
i = 3; //修改for循环所属作用域中的i
console.log( a + i );
}
for (var i=0; i<10; i++) {
bar( i * 2 ); // 糟糕,无限循环了!
} }
foo();

这段代码的问题在于,函数bar修改了变量i,这会导致for循环没法满足终止的条件,出现无限循环。

解决这问题的几种方法:

  • 将函数bar中的i,声明为var i= 3; 这个i就是之前提过的“遮蔽变量”,及在当前作用域和上层作用域重复定义的变量,屏蔽上层的作用域定义的变量。
  • 但是更好的方法,是应该讲作用域“隐藏”起来,内部声明是唯一最佳的选择。

以下是在软件开发中常见的需要进行冲突管理的情况:

全局命名空间

变量冲突的一个典型例子存在于全局作用域中。当程序中加载了多个第三方库时,如果它 们没有妥善地将内部私有的函数或变量隐藏起来,就会很容易引发冲突。

这些库通常会在全局作用域中声明一个名字足够独特的变量,通常是一个对象,这个对象就被用作库的命名空间,所有需要暴露给外界的功能都会成为这个对象(命名空间的)属性。

例如:

1
2
3
4
5
6
7
8
9
var MyreallyCoolLibrary = {
awesome: "stuff",
dosometing: functino () {
//...
},
doAnoterhThing: fucntion() {
//..
}
}

模块管理

另外一种避免冲突的办法和现代的模块机制很接近,就是从众多模块管理器中挑选一个来 使用。使用这些工具,任何库都无需将标识符加入到全局作用域中,而是通过依赖管理器 的机制将库的标识符显式地导入到另外一个特定的作用域中。

两种模式的共性

显而易见,这些工具并没有能够违反词法作用域规则的“神奇”功能。它们只是利用作用 域的规则强制所有标识符都不能注入到共享作用域中,而是保持在私有、无冲突的作用域 中,这样可以有效规避掉所有的意外冲突。

函数作用域

虽然利用函数可以生成作用域,但这种方法有两个弊端,首先必须声明一个具名函数foo,这意味着这个名称本身“污染”了所在的作用域,这是不必要的。其实,必须显示地通过函数名(foo())调用这个函数才能运行其中代码。

为解决以上问题,Javas提供了方案:

1
2
3
4
5
6
7
8
var a = 2

(function foo() {
var a = 3
console.log(a) //3
})()

console.log(a) //2

将函数用()包裹起来,这会将函数当做函数表达式而不是一个标准的函数声明来处理。

如果 function 是声明中 的第一个词,那么就是一个函数声明,否则就是一个函数表达式。

函数声明和函数表达式的区别

函数声明和函数表达式之间最重要的区别是它们的名称标识符将会绑定在何处

比较一下前面两个代码片段。第一个片段中 foo 被绑定在所在作用域中,可以直接通过
foo() 来调用它。第二个片段中 foo 被绑定在函数表达式自身的函数中而不是所在作用域中。
换句话说,(function foo(){ .. })作为函数表达式意味着foo只能在..所代表的位置中 被访问,外部作用域则不行。foo 变量名被隐藏在自身中意味着不会非必要地污染外部作 用域。

参考:详解Javascript 函数声明和函数表达式的区别

匿名和具名

1
2
3
     setTimeout( function() {
console.log("I waited 1 second!");
}, 1000 );

这叫做匿名函数表达式,因为声明也名称标识符。函数表达式可以是匿名的,而函数声明则不可以省略函数名——在 JavaScript 的语法中这是非法的。

匿名函数书写起来简单便捷,但是有几个确定需要考虑:

  • 匿名函数在栈追踪中不会显示出有意义的函数名,调试变得困难
  • 如果没有函数名,当函数需要引用自身时只能使用已经过期的arguments.callee引用, 比如在递归中。另一个函数需要引用自身的例子,是在事件触发后事件监听器需要解绑 自身。
  • 匿名函数省略了对于代码可读性/可理解性而言很重要的函数名,一个描述性的名称可以让代码不言自明。

行内函数表达式

行内函数表达式非常强大且有用——匿名和具名之间的区别并不会对这点有任何影响。给函 数表达式指定一个函数名可以有效解决以上问题。始终给函数表达式命名是一个最佳实践:

1
2
3
setTimeout( function timeoutHandler() { // <-- 快看,我有名字了! 
console.log( "I waited 1 second!" );
}, 1000 );

立即执行函数表达式

1
2
3
4
5
6
7
var a = 2 
(function foo() {
var a = 3
console.log(a) //3
})()

console.log(a) //2

由于函数被包含在一对()内部,一次成为一个表达式,通过在欧威加上另一个()可以立即执行这个函数,比如 (function foo(){ .. })()。第一个 ( ) 将函数变成表 达式,第二个 ( ) 执行了这个函数。

IIFE(立即执行函数表达式)

这种模式很常见,几年前社区给它规定了一个术语:IIFE,代表立即执行函数表达式 (Immediately Invoked Function Expression);

函数名对 IIFE 当然不是必须的,IIFE 最常见的用法是使用一个匿名函数表达式。虽然使 用具名函数的 IIFE 并不常见,但它具有上述匿名函数表达式的所有优势,因此也是一个值 得推广的实践。

1
2
3
4
var a = 2; (function IIFE() {
var a = 3; console.log( a ); // 3
})();
console.log( a ); // 2

相较于传统的 IIFE 形式,很多人都更喜欢另一个改进的形式:(function(){ .. }()), 第一种形式中函数表达式被包含在( )中,然后在后面用另一个()括 号来调用。第二种形式中用来调用的()括号被移进了用来包装的( )括号中。
这两种形式在功能上是一致的。选择哪个全凭个人喜好。

IIFE 的另一个非常普遍的进阶用法是把它们当作函数调用并传递参数进去。

1
2
3
4
5
6
var a = 2;
(function IIFE( global ) {
var a = 3;
console.log( a ); // 3 console.log( global.a ); // 2
})( window );
console.log( a ); // 2

IIFE 还有一种变化的用途是倒置代码的运行顺序,将需要运行的函数放在第二位,在 IIFE 执行之后当作参数传递进去。

1
2
3
4
5
6
var a = 2
(function IIFE( def ) { def( window );
})(function def( global ) {
var a = 3;
console.log( a ); // 3 console.log( global.a ); // 2
});

函数表达式 def 定义在片段的第二部分,然后当作参数(这个参数也叫作 def)被传递进 IIFE 函数定义的第一部分中。最后,参数 def(也就是传递进去的函数)被调用,并将 window 传入当作 global 参数的值。

块级作用域

块作用域是一个用来对之前的最小授权原则进行扩展的工具,将代码从在函数中隐藏信息 扩展为在块中隐藏信息。

try/catch

非常少有人会注意到 JavaScript 的 ES3 规范中规定 try/catch 的 catch 分句会创建一个块作
用域,其中声明的变量仅在 catch 内部有效。

1
2
3
4
5
6
try {
undefined(); // 执行一个非法操作来强制制造一个异常
}
catch (err) {
console.log( err ); // 能够正常执行! }
console.log( err ); // ReferenceError: err not found

err仅仅存在于catch分句内部,当视图从别处引用它时会抛出错误

let

let关键字可以将变量绑定到任意作用域中,通常是{…}内部,换句话说,let为其生命的变量隐式生成所在块作用域

1
2
3
4
5
6
var foo = true;
if (foo) {
let bar = foo * 2;
bar = something( bar ); console.log( bar );
}
console.log( bar ); // ReferenceError

变量提升:提升是指声明会被视为存在于其所出现的作用域的整个范围内

const

除了 let 以外,ES6 还引入了 const,同样可以用来创建块作用域变量,但其值是固定的 (常量)。之后任何试图修改值的操作都会引起错误。

小结

函数是 JavaScript 中最常见的作用域单元。本质上,声明在一个函数内部的变量或函数会
在所处的作用域中“隐藏”起来,这是有意为之的良好软件的设计原则。

但函数不是唯一的作用域单元。块作用域指的是变量和函数不仅可以属于所处的作用域,
也可以属于某个代码块(通常指{ .. }内部)。

从 ES3 开始,try/catch 结构在 catch 分句中具有块作用域。

在 ES6 中引入了 let 关键字(var 关键字的表亲),用来在任意代码块中声明变量。if (..) { let a = 2; }会声明一个劫持了if的{ .. }块的变量,并且将变量添加到这个块中。