(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!)
(注2:更多内容请查看我的目录。)
在本系列的前一篇文章JS入门难点解析2-JS的变量提升和函数提升中,我们已经讨论过。之所以不说JS需要编译,只是它不像其他编译语言一样需要翻译成等价的另一种语言。但是仍然需要进行语法分析和代码生成,并且通常是立即执行。而且,JS的变量提升和函数提升就发生在编译阶段。
那么,在这里我们来思考一下,这些变量在哪里?换句话说,它们储存在哪里?最重要的是,程序需要时如何找到它们?要解决这个问题,我们需要一套规则来存储变量,并且之后可以方便地找到这些变量。这套规则被称为作用域。
我们会在今后对引擎与编译知识做深度探讨,但在此处,只需要理解其概念与作用即可。如下:
我们用一段代码来揭示三者的关系。
var a = 2;
这段代码是不是比你想的还要简单,仅仅是在声明一个变量a的同时为其赋值2。那么,引擎和编译器是如何处理这段代码的呢?
事实上编译器会进行如下处理:
总结:变量的赋值操作会执行两个动作,首先编译器会在当前作用域中声明一个变量(如果之前没有声明过),然后在运行时引擎会在作用域链中查找该变量,如果能够找到就会对它赋值。
编译器在编译过程的第二步中生成了代码,引擎执行它时,会通过查找变量 a 来判断它是 否已声明过。查找的过程由作用域进行协助,但是引擎执行怎样的查找,会影响最终的查找结果。那么引擎如何进行查询呢?
引擎的查询方式有两种,即LHS和RHS。变量出现在赋值操作的左侧时进行 LHS 查询,出现在右侧时进行 RHS 查询。讲得更准确一点,RHS 查询与简单地查找某个变量的值别无二致,而 LHS 查询则是试图找到变量的容器本身,从而可以对其赋值。从这个角度说,RHS 并不是真正意义上的“赋值操作的右侧”,更准确地说是“非左侧”。对于此处的“var a = 2;”变量a出现在左侧,所以是LHS查询。
其实这样说很是笼统,读者对赋值的理解也可能局限于“=”的左右侧而已。我们不妨换个角度来理解。还记得,前面我们说到,变量最重要的两点就是存储和引用。那么代码中出现变量时,如果目的是要进行存储,也就是我们关心的是要找到变量的容器本身,来进行不同数据的存储赋值操作,而不关心现在这个容器里面存的时候是什么,就会用到LHS。而如果我们的目的只是拿这个变量来用,也就是只关心这个变量存储的内容是啥,而不需要关心这个变量存在哪个容器,那么就会用到RHS。
事实上,查找的过程并不仅限于查找开始时所处的当前执行作用域。当一个块或函数嵌套在另一个块或函数中时,就发生了作用域的嵌套。因此,在当前作用域中无法找到某个变量时,引擎就会在外层嵌套的作用域中继续查找,直到找到该变量, 或抵达最外层的作用域(也就是全局作用域)为止。但是如果对变量的查询如果是以查找不到的结果终止时,LHS和RHS的表现是不同的。
看到这里,我们就能理解,为什么在函数内部不用var 声明变量而直接赋值时,为什么该变量会成为一个全局变量的原因了。
如果 RHS 查询找到了一个变量,但是你尝试对这个变量的值进行不合理的操作, 比如试图对一个非函数类型的值进行函数调用,或着引用 null 或 undefined 类型的值中的属性,那么引擎会抛出另外一种类型的异常,叫作 TypeError。
ReferenceError 同作用域判别失败相关,而 TypeError 则代表作用域判别成功了,但是对结果的操作是非法或不合理的。
我们来看一段代码:
var value = 1;
function foo() {
console.log(value);
}
function bar() {
var value = 2;
foo();
}
bar(); //打印出来的是什么?
在揭晓答案之前,我们来说下作用域的两个概念。
那么,JavaScript到底采用的是哪种作用域呢?
事实上,JavaScript采用的是词法作用域,所以这个例子的结果是 1。
BOOK-《JavaScript高级程序设计(第3版)》
BOOK-《你不知道的JavaScript》 第1部分