JavaScript 学习笔记 之 作用域 (三) - 函数作用域和块作用域

3.1 函数中的作用域

函数作用域的含义是指，属于这个函数的全部变量可以在整个函数的范围内使用及复用（事实上在嵌套的作用域中也可以使用）。

 

3.2 隐藏内部实现

从所写代码中挑出一个任意的片段，然后用函数声明进行包装，实际上就是把这些代码隐藏起来了。

也就是说这段代码中的任何声明（变量或函数）都将绑定在这个新创建的包装函数的作用域中，然后用这个作用域来“隐藏”他们

 

为什么要隐藏他们？

很多原因促成了这种方法，大都是从最小特权原则引申出来的，也叫最小授权或最小暴露原则。

这个原则是指在软件设计中，应该最小限度的暴露必要内容，而将其他内容都“隐藏”起来，比如模块或者API设计

规避冲突

“隐藏”作用域中的变量和函数所带来的另一个好处，是可以避免同名标识符之间的冲突，两个标识符可能具有相同的名字但用途却不一样，无意间可能造成命名冲突，冲突会导致变量的值被意外覆盖。

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

bar(..)内部的复制表达式 i=3 意外的覆盖了foo(..)内部for循环中的i。导致无限循环。

解决方案：

定义一个本地变量，var i （遮蔽了foo作用域中的i）或者使用完全不同的一个标识名，但是有些情况下要求同样的标识符名，在这种情况下，只用作用域来隐藏内部声明是唯一的最佳选择

1、全局命名空间

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

这些库通常会在全局作用域中声明一个名字足够独特的变量，通常是一个对象。这个对象被用作库的命名空间，所有需要暴露给外界的功能都会成为这个对象（明明空间）的属性，而不是把自己的标识符暴露在顶级词法作用域中。

2、模块管理

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

 

3.3 函数作用域

我们已经知道，在任意代码片段外部添加包装函数，可以将内部的变量和函数定义“隐藏”起来，外部作用域无法访问包装函数内部的任何内容。

 

var a = 2;

function foo() {//<--添加这一行
	var a = 3;
	console.log(a);
}//<--以及这一行
foo();//<--以及这一行

console.log(a);

虽然这种技术可以解决一些问题，但是它并不理想，因为会导致一些额外的问题。首先，必须声明一个具名函数foo（），意味着foo这个名称本身污染了所在作用域。其次，必须通过显示的通过函数名（foo（））调用这个函数才能运行其中的代码。

如果不需要函数名（至少函数名可以不污染所在作用域），并且能够自动运行，这将会更加理想。

JavaScript提供了以下方法：

var a = 2;
(function foo() { //<--添加这一行
	var a = 3;
	console.log(a) //3
})(); //<--添加这一行
console.log(a); //2

首先，包装函数的声明以（function...开始而不仅仅以function开始。这导致函数会被当做函数表达式而不是一个标准的函数声明来处理。

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

• 函数声明的名称标识(foo)被绑定在所采作用域中，可以直接通过foo()来调用他
• 函数表达式的foo则被绑定在函数表达式自身的函数中，而不是所在作用域中

换句话说，（function foo（）{...}）作为函数表达式意味着foo只能在...代表的位置中被访问。foo变量名被隐藏在自身中意味着不会非必要的污染外部作用域。

3.3.1 匿名和具名

函数表达式最常见的应用（回调函数）

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

这叫做匿名函数表达式，因为function()..没有任何名称标识符。函数表达式是可以匿名的，但函数声明不可以省略函数名（在JavaScript里是非法的）

缺点：

1. 匿名函数在栈追踪中不会显示有意义的函数名，不利于调试。
2. 如果没有函数名，函数需要调用自身的时候只能使用已经过期的arguments.callee引用，比如在递归中，比如在事件触发后事件侦听器需要解绑自身。
3. 匿名函数省略了对于代码可读性/可理解性很重要的函数名。

解决方式：

添加函数名，匿名和具名之间的区别不会对行内函数表达式造成影响。

3.3.2 立即执行函数表达式

var a = 2;
(function foo() {
	var a = 3;
	console.log(a) //3
})();//<--加括号
console.log(a); //2

通过在末尾加上另一个（）可以立即执行这个函数，比如（function foo（）{..}）（）。

第一个（）将函数变成表达式，第二个（）执行了这个函数。

这种模式有一种专门的术语：IIFE（Immediately Invoked Function Expression），代表立即执行函数表达式。

很多人喜欢另一个改进的形式：(function(){..}()) 。将用来调用的()移进了用来包装的()中，功能是一致的，使用哪种凭自己喜好。

 

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

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

将windows作为对象引用传递进去，但将参数命名为global，来改进代码风格。

IIFE还有一个用法是用来解决undefined标识符的默认值被错误覆盖导致的异常（不常见，了解为主）

(function(undefined){})()

这样就可以确保代码块中undefined真的是undefined；

IIFE还有一种变化的用法用来倒置代码的运行顺序，将需要运行的代码放在第二位，在IIFE执行后当做参数传递进去。

(function IIFE(def){
    def(window);
})(function def(global){
    ..
})

 

3.4 块作用域

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

for 循环 和 if 语句不管 var 声明变量写在哪里都会属于外部作用域，写在作用域里只是为了风格更易读而伪装的形式作用域。

3.4.1 with

用with从对象中创建出的作用域仅在with声明中而非外部作用域有效。

3.4.2 try/catch

ES3规范中规定，try/catch分句中会创建一个块作用域，其中声明的变量仅在catch中有效。

try{
	undefined();
}catch(err){
	//TODO handle the exception
	console.log(err);//能正常执行
}
console.log(err);//ReferenceError: err not found

3.4.3 let

ES6引入了新的let关键字，提供了var以外的另一种变量声明。

let可以将变量绑定到所在的任意作用域中（通常是{..}内部）。换句话说，let为其声明的变量隐式地劫持了所在的块作用域。

用let将变量附加在一个已经存在的块作用域上是隐式的，如果没有密切关注哪些块作用域有绑定的变量，习惯性的移动这些块或者将其包含在其他块中会导致代码混乱。

解决方法：显式的创建块可以部分的解决这个问题

var foo = true;
if(foo) {
	{//<--显式的块
		let bar = foo * 2;
		bar = somthing(bar);
		console.log(bar);
	}
}
console.log(bar); //ReferenceError

在这个例子中，我们在if声明内部显式的创建了一个块，如果需要对其进行重构，整个块都可以方便的移动而不会对外部if声明的位置和语义产生任何的影响。（if(){var a;if(a..){}}可以重构成if(){var a;}if(a..){}，但let不行）。

注：let进行的声明不会在块作用域中提升。在被运行之前，声明不存在。（提升是指声明会被视为存在于其所出现的作用域的整个范围内。）

1.垃圾收集

function process(data) {
	///...
}

var someReallyBigData = { ...
};

process(someReallyBigData);

$("#my_btn")[0].addEventListener("click", function(evt) {
	console.log("button clicked");
}, /*capturingPhase=*/ false);

click函数形成了一个覆盖整个作用域的闭包，JavaScript引擎有可能依然保存着这个结构（取决于具体结构）。

function process(data) {
	///...
}

{//在这个块中定义的内容完事可以销毁！
	let someReallyBigData = { ...
	};

	process(someReallyBigData);
}

$("#my_btn")[0].addEventListener("click", function(evt) {
	console.log("button clicked");
}, /*capturingPhase=*/ false);

块作用域可以让引擎清楚的知道没有必要继续保存someReallyBigData了。

2.let循环

for循环头部的let不仅将i绑定到了for循环的块中，事实上它将其重新绑定到了循环的每一个迭代中，确保上一个循环结束时重新进行赋值。类似于下面的方式。

{
	let j;
	for(j=0;j<10;j++){
		let i=j;//每个迭代重新绑定
		console.log(i);
	}
}

3.4.4 const

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

const a=2;
a=3;//错误！

 

3.5 小结

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

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

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

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