ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

javascript的作用域

2019-11-28 15:03:09  阅读:253  来源: 互联网

标签:函数 作用域 javascript AO scope 执行 属性


前几天我们解释了js的预编译,今天接着说一下作用域,作用域这个词我相信大家都不会太陌生,比如说我们定义一个函数,一个函数就像一个屋子一样,屋子的形成就好像是形成了一个单独的域,和外界有一些阻隔,里边能看到外边,外边看不到里边,两个屋子之间是彼此独立的。这样我们可以把这个函数所生成的这个空间管他叫做一种作用域,但是,他不精准。

作用域确实是因为函数的产生而产生的独特的东西。也就是说:作用域属于函数,一个函数产生一个作用域。这俩是相绑定的。那作用域到底是什么呢?

我们都知道每一个对象都可以有属性,有方法。这是对象的两大特性,用来存值得。既然对象有属性,那一切为对象的东西就都可以有属性。对吧,典型的三段论嘛

function qwer(){

}

上边定义了一个函数,函数它也是一种特殊的对象,他身上也有属性。比如我们可以访问的qwer.name

 还有一些属性:

以上这些能看到的属性都是我们可以访问的,但是还有一些属性我们不能访问到,我们是看不到的,比如说test.[[scope]]属性。在计算机专业术语中,scope翻译过来就是域,区域的意思。[[scope]]属性仅供Javascript引擎使用,我们无法使用。test.[[scope]]里边存的就是由函数产生而产生的作用域。里边很复杂的结构,接下来慢慢讲解。

其实呢,[[scope]]里存的是执行期上下文集合,这个集合呈链式连接,我们把这种链式连接称为作用域链。到这可能就有点懵,一个函数在执行时只会有一个自己的执行期上下文(也就是上一节我们说的AO)啊,怎么能形成链了呢?又是跟谁形成了链呢?。我们还是看一个实例。

function a() {
console.log(b); function b() {
console.log(a); var b = 234;
console.log(b); }
var aaa = 123; b(); } var glob = 100; a();

看上边这段代码,在全局里,首先有一个a函数定义(不要管函数内部的语句),有一个glob变量声明与赋值,接着有一个a函数执行。

在这个a函数刚出生的时候,就已经有了自己的属性了。这时我们就可以访问a.name了。那么同时,肯定也有了[[scope]]属性了。那么这时[[scope]]属性里存的是啥呢?       

         

      图1.a函数定义时a.[[scope]]的属性值

因为a刚刚出生时的环境就是全局,所以这时[[scope]属性中只存有一位(第0位)GO,还没有达到链式的结构。此时的关系:

            图2.a函数定义时a.[[scope]]属性的内部关系

接下来a函数的执行,执行的时候会产生一个自己的AO,这时[[scope]]属性里的第0位就被自己的AO所占领了,而刚刚第0位的GO就被移到了第1位。

        图3.a函数执行时a.[[scope]]的属性值

 此时的关系如下:

 

          图4.a函数执行时a.[[scope]]属性内部关系

在a函数执行的时候产生了b函数的定义,所以b刚刚出生时的环境就是a函数,所以他拥有a的所有劳动成果。b函数定义时的关系:

    图5.b函数定义时[[scope]]属性内部关系 

紧接着b函数的执行,在执行时(或者执行的前一刻),b函数也会产生自己的AO,同样[[scope]]属性里的第0位就被自己的AO所占领了。这时的关系图:

              图6.b函数执行时[[scope]]属性的内部关系

而我们在哪个函数查找变量就到系统哪个函数的作用域链最顶端(第0位)依次往后开始查找。

所以在a函数当中访问b变量的时候,系统会在a执行时a的作用域链中找b变量(如图4),在a.[[scope]]的第0位(a的AO中)找到了b,所以打印b的结果为就为:function b(){......}。

b函数中访问a变量时,系统会到b执行时b的作用域链中找a变量(如图6),发现b.[[scope]]的第0 位(b的AO中)没有a变量,系统会继续找b.[[scope]]的第二位...,以此往下,在第三位找到了a变量,打印a就为:function a(){......}。

b函数中访问b变量,系统会到b执行时b的作用域链中找a变量(如图6),发现b.[[scope]]的第0 位(b的AO中)有b变量,直接打印结果为:234。

运行结果:

 

这就是我们的作用域,了解了这个执行过程,往下就可以更好的去理解闭包了,下次我们讲解闭包

 

标签:函数,作用域,javascript,AO,scope,执行,属性
来源: https://www.cnblogs.com/daimaxiaocai/p/11942188.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有