什么是作用域

2017/11/25 posted in  JavaScript

JavaScript 非常特殊,只学一部分的话非常简单,但是想要完整地学习会很难(就算学到 够用也不容易)。当开发者感到迷惑时,他们通常会责怪语言本身,而不是怪自己对语言 缺乏了解。知其然,也要知其所以然。

设计一套良好的规则来存储变量,并且之后方便我们找到这些变量,这套规则就是作用域

一、编译

var a = 1; //分解为两步

步骤:

  1. 编译器在当前作用域声明变量a(如果之前没声明过)
  2. 在运行时引擎会查找该变量,如果找到就赋值

二、查找变量

查找变量分为LHS(赋值操作的目标是谁)查询和RHS(谁是赋值操作的源头)查询,当一个变量出现在等号赋值操作的左侧时进行LHS查询,出现在右侧时进行RHS查询。LHS查询是找到变量的容器本身,RHS是找到变量的源值(retrieve his soure value)。

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

步骤:

  1. 对foo执行RHS查询,找到foo的值,(…)意味着foo的值需要被执行,所以最好是一个函数类型的值
  2. 对参数a进行一次LHS查询,将2赋值给a(隐式)
  3. 对console对象执行RHS查询,并找到log方法
  4. 对a执行RHS查询

引擎:我说作用域,我需要为 foo 进行 RHS 引用。你见过它吗?

作用域:别说,我还真见过,编译器那小子刚刚声明了它。它是一个函数,给你。

引擎:哥们太够意思了!好吧,我来执行一下 foo。

引擎:作用域,还有个事儿。我需要为 a 进行 LHS 引用,这个你见过吗?

作用域:这个也见过,编译器最近把它声名为 foo 的一个形式参数了,拿去吧。

引擎:大恩不言谢,你总是这么棒。现在我要把 2 赋值给 a。

引擎:哥们,不好意思又来打扰你。我要为 console 进行 RHS 引用,你见过它吗?

作用域:咱俩谁跟谁啊,再说我就是干这个。这个我也有,console 是个内置对象。 给你。

引擎:么么哒。我得看看这里面是不是有 log(..)。太好了,找到了,是一个函数。

引擎:哥们,能帮我再找一下对 a 的 RHS 引用吗?虽然我记得它,但想再确认一次。

作用域:放心吧,这个变量没有变动过,拿走,不谢。

引擎:真棒。我来把 a 的值,也就是 2,传递进 log(..)。

题目

function foo(a) { 
    var b=a;
    return a + b; 
}
var c = foo(2);

步骤:

  1. foo 执行RHS查询,执行foo
  2. a 执行 LHS查询,将2赋值给a参数
  3. a 执行RHS查询,找到a的值
  4. b 执行LHS查询,找到b,将a值赋值给b
  5. a 执行RHS,找到a的值
  6. b 执行RHS,找到b的值
  7. c 执行LHS,找到c,将foo执行的结果赋值给c

三、作用域链

作用域之间层层嵌套就形成作用域链,将作用域链比作一座高大的建筑,第一层代表当前的作用域,顶层代表全局作用域。LHS和RHS引用都会在当前楼层进行查找,如果没找到就到上一次找,如果还没有就继续向上,一直到顶层(全局作用域),不管找没找到你要的变量,查找过程都会停止。

四、异常

之所以要区分LHS和RHS,因为在变量没有声明(在所有作用域都无法找到该变量)的情况下,两种查询的行为不一样。

  1. RHS 查询会抛出ReferenceError。如果找到了变量,但是尝试对该变量的值进行不合理的操作,则会抛出TypeError
  2. LHS 查询会在非“严格模式(ES5引入)”下在全局作用域创建一个具有该名称的的变量,并返回给引擎。在“严格模式”下同样会抛出 ReferenceError异常。