1

前言

上篇:【闯关模式】作用域、链和闭包 上

任务三 Global Scope & Shadowing

全局作用域和变量遮蔽

全局作用域(Global Scope)

理解作用域链在哪结束很重要!
所有的JS运行时环境都必须隐式创建一个全局作用域对象(浏览器中是window,node中是global),这个对象就位于作用域链的顶端:

    (global)
       ↑
       |
   someFunc()
       ↑
      / \
     /   \
    /     \
inner()  inner2()
           ↑
           |
         foo()

在任务一中,我们忽略了一个细节,即当不使用var或者let等定义变量的时候,这个变量就暴露给了外部作用域。

JS运行环境根据以下算法来赋值一个变量:

  1. 查找当前作用域

  2. 如果没找到,查找直接外部作用域

  3. 如果找到,至6

  4. 如果没找到,重复2和3直到到达全局作用域

  5. 如果在全局作用域没有找到,创建之(在windowglobal对象上)

  6. 赋值

这样的话,在第5步就有可能意外创建一个全局变量了

全局作用域 栗子:

function someFunc() {
   var scopedVar = 1;
   function inner() {
      foo = 2;
   }
}

注意到foo的定义缺少了var或者let
JS运行环境就会根据上面的算法,先查找inner(),然后是someFunc(),最好是全局作用域,第5步被执行了,所以foo变成了全局变量(window.foo/global.foo)

换一种说法:当你忘了写var,本来在inner中定义的变量foo就可能被外部作用域修改,所以someFunc()这个作用域就有了本不该有的权限(访问内部变量foo

记好了:只有内部作用域可以访问外部作用域,在上面的例子中someFunc()是在全局作用域里面,所以才可以访问foo

变量遮蔽(Shadowing)

在上面的算法中,变量的创建属于其中的第0步:当varlet被使用,变量就被绑定在了当前作用域,然后任何该变量的赋值部分再继续上面的算法。

在两个不同作用域中定义两个名字完全相同的变量也是可以的:

function someFunc() {
   var foo = 1;
}
function anotherFunc() {
   var foo = 2;
}

同样在嵌套作用域中这样做也可以:

function someFunc() {
   var foo = 1;
   function inner() {
      var foo = 2;
   }
}

这就叫变量遮蔽inner()中的foo遮蔽(Shadow)住了someFunc中的foo

即:inner()作用域只能访问自己的foo,无法再访问定义在someFunc()中的foo

当然,这种行为在深度嵌套或者巨型函数中也容易导致bug,需要多加注意!

你的任务

修改你之前的任务代码,为foo()中的全局变量quux(不使用var或者let定义)赋一个值,在zip()中定义一个影子变量quux。同时这两个变量的值不要相同。

完成后执行:scope-chains-closures verify <your-file.js> 验证答案


savokiss
6.2k 声望4.5k 粉丝

You know nothing, SpongeBob.