作用域和闭包（三） 函数作用域和块作用域

 

3.1 函数中的作用域

3.2 隐藏内部实现

 

举个例子

function doSomething(a){
    function doSomethingElse(a){
        return a-1;
    }

    var b;

    b=a+doSomethingElse(a*2);

    console.log(b*3);
}

doSomething(2);//15

规避冲突

1.全局命名空间

var MyReallyCoolLibrary={
    awesome:"stuff",
    doSomething:function(){
        //...
    },
    doAnotherThing:function(){
        //...
    }
};

2.模块管理

 

3.3 函数作用域

添加包装函数，使内部变量和函数定义“隐藏”，

但是函数名本身污染了所在作用域

var a=2;
function foo(){

	var a=3;
	console.log(a);//3

}
foo();
console.log(a);//2

可以这样

var a=2;
(function foo(){

	var a=3;
	console.log(a);//3

})();

console.log(a);//2

函数会被当做函数表达式而不是一个标准的函数声明来处理

区分函数声明和表达式的最简单方法是看function关键字出现在声明中的位置（不仅仅是第一行代码，而是整个声明中的位置）。如果function是声明中的第一个词，那么就是一个函数声明，否则就是一个函数表达式。

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

3.3.1 匿名和具名

函数表达式可以是匿名的，

函数声明不可以省略函数名——在Javascript中非法。

匿名函数表达式缺点：

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

匿名和具名不会对行内函数表达式的性能产生影响，但是给函数表达式指定一个函数名可以有效解决匿名的缺点，始终给函数表达式命名是一个最佳实践

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

3.3.2 立即执行函数表达式

术语：IIFE

有两种：

1. (function foo(){ . . })()
2. (function foo(){ . . }())

函数名不是必须的。

 

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

例如:

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

console.log(a);//2

可以从外部作用域传递任何需要的东西，并将变量命名为任何适合的名字。对于改进代码风格非常有帮助。

 

• 另一个应用场景是解决undefined标识符的默认值被错误覆盖导致的异常（并不常见）。

这个出现的情况太蠢了，不提了。

• 倒置代码的运行顺序

将需要运行的函数放在第二位，在IIFE执行之后将参数传递进去。这种模式在UMD（Universal Module Definition）项目中被广泛使用。尽管这种模式略显冗长，但有些人认为这更易理解。

var a=2;
(function IIFE(def){
	def(window);
})(function def(global){

	var a=3;
	console.log(a);//3
	console.log(global.a);//2
});

 

3.4 块作用域

 

for (var i = 0; i < 10; i++) {
	console.log(i);
}

这段代码在for循环的头部直接定义了变量i，  是想只在for循环的内部的上下文中使用，

然而，i 会被绑定在外部作用域（函数或全局）。

3.4.1 with

 

3.4.2 try/catch

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

例如：

try{
	undefined();//执行一个非法操作来强制制造一个异常
}
catch(err){
	console.log(err);//能够强制执行！
}

console.log(err);//ReferenceError: err not found

 

尽管这个行为已经被标准化，并且被大部分的标准JavaScript环境（除了老版本的IE浏览器）所支持，但是当同一个作用域中的两个或多个catch分句用同样的标识符名称声明错误变量时，很多静态检查工具还是会发出警告。实际上这并不是重复定义，因为所有变量都被安全地限制在块作用域内部，但是静态检查工具还是会很烦人地发出警告。

为了避免这个不必要的警告，很多开发者会将catch的参数命名为err1、err2等。也有开发者干脆关闭了静态检查工具对重复变量名的检查。

主要的用途，还是对ES6之前的代码进行兼容。

3.4.3 let

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

var foo=true;
if(foo){
	let bar=foo*2;
	bar=something(bar);
	console.log(bar);
}

console.log(bar);//ReferenceError

• 用let将变量附加在一个已经存在的块作用域上的行为是隐式地。在开发和修改代码的过程中，如果没有密切关注哪些块作用域中有绑定的变量，并且习惯性地移动这些块或者将其包含在其他的块中，就会导致代码变得混乱。
• 为块作用域显式地创建块可以部分解决这个问题，使变量的附属关系变得更加清晰。通常来讲，显式的代码优于隐式或一些精巧但不清晰的代码。显式的块作用域风格非常容易书写，并且和其他语言中块作用域的工作原理一致:

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

   

 

• 只要声明是有效地，在声明中的任意位置都可以使用｛...｝括号来为let创建一个用于绑定的块。在这个例子，我们在if声明内部显式地创建了一个块，如果需要对其进行重构，整个块都可以被方便地移动而不会对外部 if 声明的位置和语义产生任何影响。

见附录B，另一种显式地块作用域表达式的内容

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

但是，使用 let 进行的声明不会再块作用域中进行提升。声明的代码被运行之前，声明并不“存在”

{
	console.log(bar);//ReferenceError!
	let bar=2;
}

 

1.垃圾收集

块级作用域非常有用的原因和闭包及回收内存垃圾的回收机制相关。

此处简要说明，内部实现原理见第5章闭包的机制。

考虑以下代码：

function process(data){
	//在这里做点有趣的事情
}

var someReallyBigData={..};

process(someReallyBigData);

var btn=document.getElementById("my_button");

btn.addEventListener("click",function click(evt){
	console.log("button clicked");
},/*capturingPhase*/false);

click函数的点击回调并不需要 someReallyBigData 变量。

理论上，这意味着当 process(..)执行后，在内存中占用大量空间的数据结构就可以被垃圾回收了。

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

 

块作用域可以打消这种顾虑，可以让引擎清楚地知道没有必要继续保存 someReallyBigData 了：

function process(data){
	//在这里做点有趣的事情
}

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

	process(someReallyBigData);
}

var btn=document.getElementById("my_button");

btn.addEventListener("click",function click(evt){
	console.log("button clicked");
},/*capturingPhase*/false);

为变量显式声明块作用域，并对变量进行本地绑定是非常有用的工具。

2.let循环

一个let可以发挥优势的典型例子就是for循环

for(let i=0;i<10;i++){
	console.log(i);
}

console.log(i);//ReferenceError

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

 

下面通过另一种方式来说明每次 迭代  时进行 重新绑定  的行为：

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

每个迭代进行重新绑定会在第5章讨论闭包时进行说明。

由于 let 声明附属于一个新的作用域而不是当前的函数作用域（也不属于全局作用域），当代码中存在对于函数作用域中 var 声明的隐式依赖时，就会有很多隐藏的陷阱，如果用 let 来替代 var 则需要在代码重构的过程中付出额外的精力。

考虑以下代码：

var foo=true,baz=10;
if(foo){
	var bar=3;

	if(baz>bar){
		console.log(baz);
	}

	//...
}

这段代码可以简单地被重构成下面的同等形式：

 

 

3.4.4 const

 

 

3.5 小结