js作用域(一):javascript作用域是什么?

js.jpg

如果我的文章对你有用,请给我一个赞,让我有继续坚持的动力/微笑。
原创文章,此文章仅供学习参考使用,欢迎访问我的个人网站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 这样的声 明会被分解成两个独立的步骤:

  1. 首先,var a 在其作用域中声明新变量。这会在最开始的阶段,也就是代码执行前进行。

  2. 接下来,a = 2 会查询(LHS 查询)变量a 并对其进行赋值。 LHS 和RHS 查询都会在当前执行作用域中开始,如果有需要(也就是说它们没有找到所 需的标识符),就会向上级作用域继续查找目标标识符,这样每次上升一级作用域(一层 楼),最后抵达全局作用域(顶层),无论找到或没找到都将停止。 不成功的RHS 引用会导致抛出ReferenceError 异常。不成功的LHS 引用会导致自动隐式 地创建一个全局变量(非严格模式下),该变量使用LHS 引用的目标作为标识符,或者抛 出ReferenceError 异常(严格模式下)。

学习笔记,互励共勉,欢迎交流讨论~
推荐书籍《javaScript高级程序设计》
欢迎访问我的个人网站zhengyepan

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349

推荐阅读更多精彩内容