- 作用域包含了一系列的“气泡”,每一个都可以作为容器。其中包含了标识符(变量、函数)的定义。
函数中的作用域
- 属于这个函数的全部变量都可以在整个函数的范围内使用及复用。
隐藏内部实现
- 对函数的传统认知就是先声明一个函数,再向里面添加代码。反过来也可以认为:从所写的代码中挑选一个任意的片段,然后用函数声明对它进行包装(隐藏)。
规避冲突
全局命名空间
- 程序中加载多个第三方库时,这些库通常会在全局作用域中声明一个名字足够独特的变量,通常是一个对象。这个对象被用作库的命名空间,所有需要暴露给外界的功能都会称为这个对象(命名空间)的属性,而不是将自己的标识符暴露在顶级的词法作用域中。
模块管理
函数作用域
- 命名函数将内部的变量和函数定义“隐藏”起来,外部作用域无法访问包装函数内部的任何内容。这种方法并不理想,因为首先函数名会污染所在作用域,其次必须显式地通过函数名调用函数才能运行代码。
(function foo(){
// some code
})()
- 函数会被当作函数表达式而不是函数声明
- 区分函数声明与函数表达式的方法在于
function
出现的位置,如果是声明中的第一个词,那么就是一个函数声明,否则就是一个表达式。 - 函数声明和函数表达式之间最重要的区别是它们的名称标识符会被绑定在何处。
- 函数声明的
foo
被绑定在函数所处的词法作用域中,通过查找词法作用域中的标识符来进行调用。而函数表达式的foo
被绑定在函数表达式自身的函数的词法作用域中,也就是foo
变量隐藏在自身中。
匿名和具名
匿名函数通常在回调函数中可以见到。
- 匿名函数在栈追踪中不会显示出有意义的函数名,使得调试很困难。
- 没有函数名,函数需要引用自身需要使用已经不再建议使用的
arguments.callee
。 - 匿名函数可读性差。
行内函数表达式
setTimeout(function timeoutHandler(){
// some code
},1000)
- 行内函数表达式只能在函数作用域中被访问。在外部作用域中无法访问。
立即执行函数表达式(IIFE)
- 将函数包含在一对
()
中,使之成为一个表达式,末尾再加另一个()
可以立即执行这个函数。 - 函数名对IIFE不是必须的,IIFE最常见的用法是使用一个匿名函数表达式。
- 函数名作为标识符只能在IIFE内部作用域中被查询到。
- 倒置代码的运行顺序:将函数作为IIFE的参数传递进去。这种模式在UMD项目中被广泛使用。
(function (fn) {
fn(window);
})(function def(global) {
global.a = 3;
});
console.log(a); // 3
块作用域
with
用with
从对象中创建出的作用域仅在with
声明中而非外部作用域中有效。
try/catch
try {
undefined();
} catch (err) {
console.log(err);
}
console.log(err); // RwferenceError RHS查询错误
catch
分句会创建一个块作用域,其中声明的变量仅在catch内部有效。
- 有些旧的浏览器会因为同一作用域下多个
catch(err){}
中使用同样的err
作为标识符而报错。但这并不是错误,因为每一个catch
块内的err标识符都被限定在当前作用域中,这只是浏览器的问题。所以有的开发者会把标识符设定为不同的名字。 - 经测试,在最新版谷歌和火狐中没有相关问题。
let
- let关键字可以将变量绑定到所在的任意作用域中,通常是
{...}
内部。let将这个变量隐藏在了所在的块作用域中。
var foo = 7;
if (foo) {
{
let bar = foo * 2;
console.log(bar); // 14
} {
let baz = foo * 3;
console.log(baz); // 21
try {
console.log(bar);
} catch (err) {
console.log(err); // ReferenceError: bar is not defined
}
}
}
- 通过在代码中显式地添加额外的
{}
来使代码清晰。 - 使用
let
进行的声明不会在块作用域中进行提升。声明的代码被运行之前,声明并不存在。
垃圾回收
function process(data) {
// some code
}
var someBigData = {
// some code
};
process(someBigData);
var oBtn = document.getElementById('btn');
oBtn.addEventListener('click', function fn() {
console.log(typeof fn); // function
}, false);
- 这段代码很有趣,可以清晰地看出块作用域对于垃圾回收的意义。
- 事件监听回调函数是一个行内函数表达式,
addEventListener
本身也是一个函数,其接收一个函数作为参数,但行内函数表达式实际上也是一个闭包函数(它作为addEventListener
函数的内部函数,引用着外部函数作用域的变量),那么javascript引擎极有可能依然保存着这个结构(取决于具体实现),外部数据在使用后依然存在而不被删除。 - 通过块作用域让引擎清楚地知道没有必要保留
someBigData
变量了。
{
var someBigData = {
// some code
};
process(someBigData);
}
let循环
- 将计数器重新绑定到了循环的每一个迭代中,确保使用上一个循环迭代结束时的值重新进行赋值。
- 每次迭代时重新绑定行为:
{
let j;
for (j = 0; j < 10; j++) {
let i = j;
console.log(i);
}
}
const
- 它同let一样创建的是块作用域变量,但其值是固定的常量,赋值操作之后不可再修改。