你不知道的JavaScript(上卷)--函数作用域

98 阅读4分钟

1.函数中的作用域

每声明一个函数都会为其自身创建一个气泡(气泡相当于作用域),其他结构都不会创建作用域气泡。

考虑下面的代码:

function foo(a) {     
	var b = 2; 
 
    // 一些代码 
    function bar() { 
    // ...     
    } 
    
    // 更多的代码 
    var c = 3; 
}

bar(); // 失败 
console.log( a, b, c ); // 三个全都失败

在全局作用域上只有foo()一个标识符,而a、b、bar()、c都附属于foo()作用域气泡,在全局作用域上查找不到,所以在外部无法访问,因此bar()和console这两行代码会导致ReferenceError错误。

a、b、c、foo()、bar()在foo()内部都是可以被访问到的。同样在bar()内部也可以被访问到。

函数作用域的含义:属于这个函数的全部变量在整个函数的内部以及函数内部的函数嵌套离都是可以使用的。

2.私有(隐藏)变量和函数的实现

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

代码示例:

function doSomething(a) {     
    b = a + doSomethingElse( a * 2 ); 
    console.log( b * 3 ); 
} 
 
function doSomethingElse(a) {     
	return a - 1; 
} 
 
var b; 
 
doSomething( 2 ); // 15

在这个代码片段中,变量 b 和函数 doSomethingElse() 应该是doSomething() 内部具体实现的“私有”内容。给予外部作用域对 b 和 doSomethingElse() 的“访问权限”不仅没有必要,而且可能是“危险”的,因为它们可能被有意或无意地以非预期的方式使用,从而导致超出了 doSomething() 的适用条件。更“合理”的设计会将这些私有的具体内 容隐藏在 doSomething() 内部,例如:

function doSomething(a) {     
    function doSomethingElse(a) {         
        return a - 1;     
	} 
    
	var b; 
    b = a + doSomethingElse( a * 2 ); 
    console.log( b * 3 ); 
} 
 
doSomething( 2 ); // 15

现在,b 和 doSomethingElse() 都无法从外部被访问,而只能doSomething() 所控制 功能性和最终效果都没有受影响,但是设计上将具体内容私有化了,设计良好的软件都会依此进行实现。

规避冲突

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

一下几种情况使用作用域来“隐藏”内部声明是唯一的选择:

1.全局命名空间(比如引入第三方库)

2.模块管理

3.函数作用域

隐藏变量和函数虽然可以解决一些问题,但是这种方法并不理想,会导致一些额外的问题。例如:1)必须声明一个具名函数,比如:foo(),意味着foo这个名称本身“污染”了坐在的作用域。2)必须显式的通过函数名(foo())调用这个函数才能运行其中的代码。

函数的立即调用则可以解决这两个问题。

代码示例:

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

foo()函数只能在(function foo(){..})中..的部分被访问,在外部是访问不到的。

4.函数匿名和具名

对于函数表达式你最熟悉的场景可能就是回调参数了,比如:

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

这叫作匿名函数表达式,因为 function().. 没有名称标识符。函数表达式可以是匿名的, 而函数声明则不可以省略函数名——在 JavaScript 的语法中这是非法的。

匿名函数表达式书写起来简单快捷,很多库和工具也倾向鼓励使用这种风格的代码。但是它也有几个缺点需要考虑。

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

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

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