JavaScript之OOP基础概念学习总结一:scopes

这个系列的文章是去年在搭架完静态博客后撰写的(博客已经不再维护啦,哦还能访问)↓

最近在探究JavaScript中的scopes概念。经过一番研究,我觉得要从Interpreter的角度,才能更好地理解这个概念。毕竟程序员主要是编写指令,而Interpreter则是把程序员编写的代码一行一行读下去并翻译出来(执行出来),最终结果就会直接反映在Web浏览器的页面上。不过还要注意的是,并不是所有的scopes都必须从Interpreter的角度去理解,lexical scope就要从编写人员的角度去理解,因为它是代码文本层面的scope,是可供程序员进行词法分析与文本理解的scope,不同于Interpreter执行代码时的scope。重点复述:lexical scope先行,是基础scope,程序员最一开始就能确定的scope,目的在于程序设计;程序的执行靠的是Interpreter对程序的解释运行,在运行期间,Interpreter专属的scope建立,也就是Interpreter所属的环境。当程序运行,就相当于进入了JavaScript语言描述的Web世界,在这里,Interpreter是个勤奋的工作者,它处在什么环境中,又要做些什么事情呢?这是接下来我要叙述的故事。

1. Lexical Scope

为了更好地讲述这个故事,我需要一段代码,如下图所示,这是一段简化后的代码,假设它是可运行的,因为它只是一个片段。根据lexical scope分析,结果如图中不同颜色区域所示,整段代码就存在着绿红蓝的lexical scope。这是程序员根据语言规则,理解并划分出来的词法作用域。当然,前面我们已经说得很多了,这并不是代码运行时Interpreter所创建出来的作用域。


Lexical Scope

2. Execution Context

当执行程序,正式进入代码的世界。Interpreter开始工作,环境随之被创建,就是这么得迅速。如下图所示,最左侧的黄色箭头代表Interpreter,右侧是其工作时建立的execution context,也即工作环境。


Execution Context

Interpreter开始读代码,这就是它的基本工作。读代码又要做哪些事情呢?那就要看代码中都有些什么东西了:标识符、运算符、操作符等等。

在具体分析Interpreter做什么之前,要先搞明白一个重要的概念:存储。我们都知道计算机很厉害,什么复杂的计算都能进行,那你知道计算机为什么那么厉害吗?原因之一就是它的存储能力,类比于人类的记忆力。计算机拥有100%的记忆力,只要存储介质没有损伤。这就是计算机聪明的奥义。

回到原来的问题,于是我们就应该理解到Interpreter所做的工作之一就是存储——记住它需要记住的东西。那么它需要记住哪些东西呢?主要就是标识符和数据。
处于某个工作环境中的Interpreter,首先要做的事情就是看看都有哪些标识符。这非常重要,必须先点名,不然之后的工作不好顺利开展。如何在当前环境中点名呢?很简单,其实也很复杂:var变量声明以及函数声明是两大重要线索。

番外:声明提升

这里补充说明一下变量声明提升和函数声明提升的区别:

一段源代码:

    alert(sum);
    function sum(num1,num2) {
        return num1 + num2;
    }
    alert(a);
    var a = 10;

声明提升后(Interpreter读完这段代码首先存储的数据):

声明提升

从上面storage system存储的数据中就能看出,变量声明提升之后,存储的是undefined(如果没有初始化),而函数声明的情况不同,因为函数声明时,sum中存储的便是指向函数体的指针。

也就是说,当Interpreter进入某个工作环境后,首先在当前环境中进行identifier scanning,看看有哪些var声明的变量,以及又有哪些函数声明。当它发现了这些信号后,就会把对应的标识符按照声明提升的规定、一定的顺序、以及key-value的数据结构将标识符以及相对应的数据存储在内存中。这个内存其实就是in-memory storage system,存储的内容整体叫做变量对象。Current execution context就是Interpreter当前进行variable lookingup的scope。


In-memory model

3. Scope Chain

程序中关键内容不仅仅是标识符以及其中保存的数据。计算机程序的目的是解决问题,所以关键还得能够操作这些数据才行。操作数据就涉及到运算符、操作符等等,在我们这里并不说明这方面的内容,还是从标识符的角度去说明问题,看看在操作过程中会对标识符进行哪些操作吧。很重要的一点是:标识符的查询和解析。

代码其实都是标识符的天下,当Interpreter读到一句包含各种标识符的语句时,如果里面包含着操作符,它便知道这里要进行数据操作了。怎么操作呢?面对的都是标识符,这肯定不行,因为操作的本质是对数据的操作。于是,你就能想到要把标识符中存储的数据找到才行,这便涉及到标识符的解析和查询。

因为Interpreter一开始就已经把当前环境中所有的标识符点过名了,同时也都按照key-value结构存贮在内存中。所以,只要按照一定的顺序,找到已经存储过的标识符就可以找到操作时需要的数据了。那么,按照怎样的顺序去查询标识符呢?不用担心,JavaScript语言在设计时已经设计好了规范,它提供了作用域链的概念。Interpreter知道当环境创建,不同环境中的in-memory scope确定后,内存中就有一块区域有序存放不同作用域的地址,指向不同的作用域。只要沿着这个区域中的地址线索一步一步向上搜索标识符,总会找到、或者找不到某个标识符。

彩蛋:内存回收

每个函数都有自己的执行环境。当执行流进入一个函数时,函数的环境就会被推入一个环境栈中。而在函数执行之后,栈将其环境弹出,把控制权返回给之前的执行环境。(ECMAScript程序中的执行流正是由这个方便的机制控制着的)。

函数中局部变量的正常生命周期——局部变量只在函数执行的过程中存在。而在这个过程中,会为局部变量在栈(或堆)内存中分配相应的空间,以便存储它们的值。然后在函数中使用这些值,直到函数结束。此后,局部变量就没有了存在的必要了,因此可以释放他们的内存以供将来使用。

垃圾收集器必须跟踪哪个变量有用,哪个变量没有用,对于不再有用的变量打上标记,以备将来收回其占用的内存。

参考资料

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

推荐阅读更多精彩内容