如果我的文章对你有用,请给我一个赞,让我有继续坚持的动力/微笑。
原创文章,此文章仅供学习参考使用,欢迎访问我的个人网站zhengyepan
一、理解作用域
js越是基础的知识,越是会被人以为没有什么大不了的,其实,js的基础是很有“内涵”的,就作用域来讲。首先需要了解几个概念
1、引擎:从头到尾负责JavaScript的编译和执行过程.
2、编译器:负责语法分析与代码生成。
3、作用域:负责声明并维护由所有声明的标识符(变量)组成一系列查询,并实施一套非常严格的规则,确定当前执行的代码对这些标识符的访问权限。
变量的赋值操作会执行两个阶段,首先编译器会在当前作用域下声明一个变量(如果之前没有声明过),然后在运行时引擎会在作用域中查找该变量,如果能够找到就会对它赋值。
编译器在编译过程中的第二步生成代码,引擎执行到它时,会通过查找变量a来判断是是否被声明过。查找的过程有作用域进行协助,但是引擎执行怎么样的查找会影响最终的查找结果。
引擎查找的方式有LHS和RHS。“L”和“R”分别代表着左侧和右侧,具体是一个赋值操作的左侧和右侧。
那么引擎什么时候进行LHS或者RHS查找方式呢?答案就是当变量出现在赋值操作左侧的时候进行LHS,当变量出现在赋值操作右侧的时候进行RHS。更加准确的来讲,RHS的真正意思是“取到它的源值”,这意味着得到某某的值,其中对a 的引用是一个RHS 引用,因为这里a 并没有赋予任何值。相应地,需要查找并取得a 的值,这样才能将值传递给console.log(..)。相比之下,例如:a = 2;这里对a 的引用则是LHS 引用,因为实际上我们并不关心当前的值是什么,只是想要为=2 这个赋值操作找到一个目标。
重要结论:LHS 和RHS 的含义是“赋值操作的左侧或右侧”并不一定意味着就是“=赋值操作符的左侧或右侧”。赋值操作还有其他几种形式,因此在概念上最好将其理解为“赋值操作的目标是谁(LHS)”以及“谁是赋值操作的源头RHS)”。
下面的程序,其中既有LHS 也有RHS 引用:
function foo(a) {
console.log( a ); // 2
}
foo( 2 );
最后一行foo(..) 函数的调用需要对foo 进行RHS 引用,意味着“去找到foo 的值,并把它给我”。并且(..) 意味着foo 的值需要被执行,因此它最好真的是一个函数类型的值!这里还有一个容易被忽略却非常重要的细节。代码中隐式的a=2 操作可能很容易被你忽略掉。这个操作发生在2 被当作参数传递给foo(..) 函数时,2 会被分配给参数a。为了给参数a(隐式地)分配值,需要进行一次LHS 查询。
这里还有对a 进行的RHS 引用, 并且将得到的值传给了console.log(..)。console.log(..) 本身也需要一个引用才能执行,因此会对console 对象进行RHS 查询,并且检查得到的值中是否有一个叫作log 的方法。最后,在概念上可以理解为在LHS 和RHS 之间通过对值2 进行交互来将其传递进log(..)(通过变量a 的RHS 查询)。假设在log(..) 函数的原生实现中它可以接受参数,在将2 赋值给其中第一个(也许叫作arg1)参数之前,这个参数需要进行LHS 引用查询。
有可能你可能会倾向于将函数声明function foo(a) {... 概念化为普通的变量声明和赋值,比如var foo、foo = function(a) {...。如果这样理解的话,这个函数声明将需要进行LHS 查询。然而还有一个重要的细微差别,编译器可以在代码生成的同时处理声明和值的定义,比如在引擎执行代码时,并不会有线程专门用来将一个函数值“分配给”foo。因此,将函数声明理解成前面讨论的LHS 查询和赋值的形式并不合适。
function foo(a) {
console.log( a ); // 2
}
foo( 2 );
让我们来模拟上面过程中引擎和作用域之前的操作:
引擎需要为foo 进行RHS 引用。于是向作用域请求foo的声明
作用域响应:编译器刚刚声明了它。它是一个函数,给你。
引擎:执行foo。
引擎:需要为a 进行LHS 引用,向作用域请求
作用域:编译器最近把它声名为foo 的一个形式参数了,给你。
引擎:收到a ,现在要把2 赋值给a。
引擎:要为console 进行RHS 引用,问作用域见过它吗?
作用域:console 是个内置对象。给引擎。
引擎:这里面是不是有log(..)。太好了,找到了,是一个函数。
引擎:请问a 的RHS 引用吗?虽然我记得它,但想再确认一次。
作用域:这个变量没有变动过,拿走,不谢。
引擎:真棒。我来把a 的值,也就是2,传递进log(..)。
……
为什么区分LHS 和RHS 是一件重要的事情?因为在变量还没有声明(在任何作用域中都无法找到该变量)的情况下,这两种查询的行为是不一样的。
举个例子:
function foo(a) {
console.log( a + b );
b = a;
}
foo( 2 );
第一次对b 进行RHS 查询时是无法找到该变量的。也就是说,这是一个“未声明”的变量,因为在任何相关的作用域中都无法找到它。如果RHS 查询在所有嵌套的作用域中遍寻不到所需的变量,引擎就会抛出ReferenceError异常。
值得注意的是,ReferenceError 是非常重要的异常类型。相较之下,当引擎执行LHS 查询时,如果在顶层(全局作用域)中也无法找到目标变量,全局作用域中就会创建一个具有该名称的变量,并将其返还给引擎,前提是程序运行在非“严格模式”下。“不,这个变量之前并不存在,但是我很热心地帮你创建了一个。
”ES5 中引入了“严格模式”。同正常模式,或者说宽松/ 懒惰模式相比,严格模式在行为上有很多不同。其中一个不同的行为是严格模式禁止自动或隐式地创建全局变量。
因此,在严格模式中LHS 查询失败时,并不会创建并返回一个全局变量,引擎会抛出同RHS 查询失败时类似的ReferenceError 异常。接下来,如果RHS 查询找到了一个变量,但是你尝试对这个变量的值进行不合理的操作,比如试图对一个非函数类型的值进行函数调用,或着引用null 或undefined 类型的值中的属性,那么引擎会抛出另外一种类型的异常,叫作TypeError。
ReferenceError 同作用域判别失败相关,而TypeError 则代表作用域判别成功了,但是对结果的操作是非法或不合理的。
二、作用域的嵌套
作用域是根据名称查找变量的一套规则。实际情况中,通常需要同时顾及几个作用域。当一个块或函数嵌套在另一个块或函数中时,就发生了作用域的嵌套。因此,在当前作用域中无法找到某个变量时,引擎就会在外层嵌套的作用域中继续查找,直到找到该变量,或抵达最外层的作用域(也就是全局作用域)为止。
例如以下代码:
function foo(a) {
console.log( a + b );
}
var b = 2;
foo( 2 ); // 4
对b 进行的RHS 引用无法在函数foo 内部完成,但可以在上一级作用域(在这个例子中就是全局作用域)中完成。
遍历嵌套作用域链的规则很简单:引擎从当前的执行作用域开始查找变量,如果找不到,就向上一级继续查找。当抵达最外层的全局作用域时,无论找到还是没找到,查找过程都会停止。
总结:
作用域是一套规则,用于确定在何处以及如何查找变量(标识符)。如果查找的目的是对变量进行赋值,那么就会使用LHS 查询;如果目的是获取变量的值,就会使用RHS 查询。
作用域是什么 赋值操作符会导致LHS 查询。=操作符或调用函数时传入参数的操作都会导致关联作用域 的赋值操作。JavaScript 引擎首先会在代码执行前对其进行编译,在这个过程中,像var a = 2 这样的声 明会被分解成两个独立的步骤:
首先,var a 在其作用域中声明新变量。这会在最开始的阶段,也就是代码执行前进行。
接下来,a = 2 会查询(LHS 查询)变量a 并对其进行赋值。 LHS 和RHS 查询都会在当前执行作用域中开始,如果有需要(也就是说它们没有找到所 需的标识符),就会向上级作用域继续查找目标标识符,这样每次上升一级作用域(一层 楼),最后抵达全局作用域(顶层),无论找到或没找到都将停止。 不成功的RHS 引用会导致抛出ReferenceError 异常。不成功的LHS 引用会导致自动隐式 地创建一个全局变量(非严格模式下),该变量使用LHS 引用的目标作为标识符,或者抛 出ReferenceError 异常(严格模式下)。
学习笔记,互励共勉,欢迎交流讨论~
推荐书籍《javaScript高级程序设计》
欢迎访问我的个人网站zhengyepan