javascript 之作用域链-07

复习作用域

上一节我们说到作用域:是指变量可以访问的范围,他规定了如何查找变量,以及确定当前执行代码对变量的访问权限;也说到静态作用域即词法作用域,是在编译阶段决定变量的引用(由程序定义的位置决定,和代码执行顺序无关,用嵌套的方式解析)。

凝问

复制代码
1     var x=10;
2     function run(){
3         var name='Joel';
4         console.log(x+name);//10Joel  这里做了隐适转换 当有+时有一个为string 那么会当做字符拼接来处理
5     }
6     run();
复制代码

如上代码,在执行run函数时,在run作用域中有name变量,但是并没有变量x,那么为什么不会报错,变量x又是怎么访问的呢?可能有些人理解是去父级函数作用域中寻找变量,其实这样理解作用域存在歧义(如果理解为是在调用函数的父级函数,那么肯定是错的  如下代码),上一节我们说过javascript的作用域是静态作用域,即应该关心代码定义的位置而不是调用的位置 (词法作用域);

复制代码
 1     var x=10;
 2     function fn(){
 3         console.log(x);
 4     }
 5     function show(f){
 6         var x=20;
 7         (function(){
 8             f()
 9         }());
10     }
11     show(fn);//10 并不是20
复制代码

引出作用域链

通过分析作用域的变量解析来理解作用域链

复制代码
 1  var a=10;
 2     function run(){
 3         var name='Joel';
 4         function say(){
 5             var content='hello';
 6             console.log(content+name+','+a);
 7         }
 8         say();
 9     }
10     run();//helloJoel,10
复制代码

通过上一篇我们知道js作用域有全局作用域,函数作用域,所以上面代码作用域如下:

全局作用域:存在变量a、run函数引用,当然还存在其他函数、属性(内置的就不讨论了);

run函数作用域:存在变量 name 、say函数引用;

say函数作用域:存在变量content;

当代码执行到 console.log(content+name+','+a); 首先在say函数作用域中寻找变量content、name、a,如果找到则停止,没有找到就到上一个作用域中寻找,以此类推一直到window 全局作用域,如变量a 在当前say 作用域中没有,就到run作用域中寻找,还没找到就到全局作用域中寻找,如果还找不到就报错 is not defined,因为全局作用域是最外层作用域 ;

继续看下面代码,我们在say函数中定义了变量name 之后,name值不在是run作用域中的值,因为在say作用域中找到了变量name 就不会继续寻找了

复制代码
 1 <script>
 2     var a=10;
 3     function run(){
 4         var name='Joel';
 5         function say(){
 6             var content='hello',name=' Word';
 7 
 8             console.log(content+name+','+a);
 9         }
10         say();
11     }
12     run();//hello Word,10
13 </script>
复制代码

这样一步一步的寻找变量的过程我们叫做标识符解析或者你可以理解为变量解析,那么提供这个线路或者这样寻找变量的机制我们叫做作用域链;

我们来总结一下这个过程:

第一步,在当前作用域查找变量,如果有则获取并停止。如果没有则继续向上一个作用域寻找;

第二步,如果当前作用域是全局作用域,则说明变量未定义,结束;否则继续;

第三步,(不是全局作用域,那就是函数作用域)继续第一步;

那么作用域链到底是什么呢?

其实作用域链本质是一个指向变量对象的指针链表,它只引用但不实际包含变量对象的值;

如上代码作用域链结构类似这样:

这篇只是引出作用域链,下一篇正式开始说执行环境,会涉及到变量对象、活动对象、作用域链等内容从而深入作用域链的创建过程。

之所以要先写执行环境,是因为完整的作用域链是在执行环境中构建的。【本文由"编程小子"发布,2017年11月1日】

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 JavaScript 编写的记忆游戏(附源代码)   项目:JavaScript 记忆游戏(附源代码) 记忆检查游戏是一个使用 HTML5、CSS 和 JavaScript 开发的简单项目。这个游戏是关于测试你的短期 记忆技能。玩这个游戏 时,一系列图像会出现在一个盒子形状的区域中 。玩家必须找到两个相同的图像并单击它们以使它们消失。 如何运行游戏? 记忆游戏项目仅包含 HTML、CSS 和 JavaScript。谈到此游戏的功能,用户必须单击两个相同的图像才能使它们消失。 点击卡片或按下键盘键,通过 2 乘 2 旋转来重建鸟儿对,并发现隐藏在下面的图像! 如果翻开的牌面相同(一对),您就赢了,并且该对牌将从游戏中消失! 否则,卡片会自动翻面朝下,您需要重新尝试! 该游戏包含大量的 javascript 以确保游戏正常运行。 如何运行该项目? 要运行此游戏,您不需要任何类型的本地服务器,但需要浏览器。我们建议您使用现代浏览器,如 Google Chrome 和 Mozilla Firefox, 以获得更好、更优化的游戏体验。要玩游戏,首先,通过单击 memorygame-index.html 文件在浏览器中打开游戏。 演示: 该项目为国外大神项目,可以作为毕业设计的项目,也可以作为大作业项目,不用担心代码重复,设计重复等,如果需要对项目进行修改,需要具备一定基础知识。 注意:如果装有360等杀毒软件,可能会出现误报的情况,源码本身并无病毒,使用源码时可以关闭360,或者添加信任。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值