复习作用域

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

疑问

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

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

     var x=10;
function fn(){
console.log(x);
}
function show(f){
var x=20;
(function(){
f()
}());
}
show(fn);//10 并不是20

引出作用域链

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

  var a=10;
function run(){
var name='Joel';
function say(){
var content='hello';
console.log(content+name+','+a);
}
say();
}
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 就不会继续寻找了

 <script>
var a=10;
function run(){
var name='Joel';
function say(){
var content='hello',name=' Word'; console.log(content+name+','+a);
}
say();
}
run();//hello Word,10
</script>

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

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

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

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

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

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

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

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

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

之所以要先写执行环境,是因为完整的作用域链是在执行环境中构建的。

javascript 之作用域链-07的更多相关文章

  1. 初探JavaScript(四)——作用域链和声明提前

    前言:最近恰逢毕业季,千千万万的学生党开始步入社会,告别象牙塔似的学校生活.往往在人生的各个拐点的时候,情感丰富,感触颇深,各种对过去的美好的总结,对未来的展望.与此同时,也让诸多的老“园”工看完这些 ...

  2. 从零开始讲解JavaScript中作用域链的概念及用途

    从零开始讲解JavaScript中作用域链的概念及用途 引言 正文 一.执行环境 二.作用域链 三.块级作用域 四.其他情况 五.总结 结束语 引言 先点赞,再看博客,顺手可以点个关注. 微信公众号搜 ...

  3. 理解JavaScript的作用域链

    上一篇文章中介绍了Execution Context中的三个重要部分:VO/AO,scope chain和this,并详细的介绍了VO/AO在JavaScript代码执行中的表现. 本文就看看Exec ...

  4. 理解JavaScript中作用域链的关系

    javascript里的关系又多又乱.作用域链是一种单向的链式关系,还算简单清晰:this机制的调用关系,稍微有些复杂:而关于原型,则是prototype.proto和constructor的三角关系 ...

  5. JavaScript系列----作用域链和闭包

    1.作用域链 1.1.什么是作用域 谈起作用域链,我们就不得不从作用域开始谈起.因为所谓的作用域链就是由多个作用域组成的.那么, 什么是作用域呢? 1.1.1作用域是一个函数在执行时期的执行环境. 每 ...

  6. javascript 之作用域链-10

    前言 在<执行环境>文中说到,当JavaScript代码执行一段可执行代码时,会创建对应的执行上下文(execution context). 变量对象(Variable object,VO ...

  7. 从函数作用域和块级作用域看javascript的作用域链

    在ES6之前,javascript只有全局作用域和函数作用域.所谓作用域就是一个变量定义并能够被访问到的范围.也就是说如果一个变量定义在全局(window)上,那么在任何地方都能访问到这个变量,如果这 ...

  8. JavaScript的作用域链

    /* js当中 每个函数都是一个执行环境 函数调用函数会进入新的执行环境结束之后再回来当前 作用域链: 在内部的作用域中可以访问和修改外部的变量 在外部作用域不能修改或者访问内部的变量 */ var ...

  9. javascript从作用域链的角度看闭包

    闭包 闭包是一个能访问外部函数定义的变量的函数. 为什么? 当访问一个变量时,解释器会首先在当前作用域查找标示符,如果没有找到,就去父作用域找,直到找到该变量的标示符或者不再存在父作用域了,这就是作用 ...

随机推荐

  1. SQL三类语句

    1. DDL (Data Definition Language, 数据定义语言) CREATE: 创建数据库和表等对象 DROP: 删除数据库和表等对象 ALTER: 修改数据库和表等对象的结构 2 ...

  2. CentOS更新源

    1.首先备份/etc/yum.repos.d/CentOS-Base.repo mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS ...

  3. 第一个asp.net MVC5+ExtJS6入门案例项目

    最近在学习asp.net MVC,结合前段时间学习的ExtJS,做了一个入门示例.不过还有一个json日期显示的问题没有解决. [思路] 1.先搭建一个asp.net MVC项目. 2.将MVC项目的 ...

  4. ElasticSearch入门(3) —— head插件

    #### 安装ES head插件 具体请参考github地址:https://github.com/mobz/elasticsearch-head 使用 安装Install # 在线安装head插件 ...

  5. clipboard.js 介绍

    这是著名开源项目 clipboard.js 的 README.md,我把它翻译成中文.发出来,方便自己和他人阅读. 项目地址:https://github.com/zenorocha/clipboar ...

  6. Cornfields poj2019 二维RMQ

    Cornfields Time Limit:1000MS     Memory Limit:30000KB     64bit IO Format:%I64d & %I64u Submit S ...

  7. combobox数据获取及使用总结

    写在前面 和队友完成工程实践项目过程中遇到combobox数据项加载失败的问题,我将记录下解决该问题中不断填坑的过程. 这是可以确定的填写正确的combobox内容 action也没有错误,Strut ...

  8. spring框架总结(03)重点介绍(Spring框架的第二种核心掌握)

    1.Spring的AOP编程 什么是AOP?  ----- 在软件行业AOP为Aspect Oriented Programming  也就是面向切面编程,使用AOP编程的好处就是:在不修改源代码的情 ...

  9. nodejs后台集成富文本编辑器(ueditor)

    1 下载ueditor nodejs版本 2 复制public目录下面的文件 到项目静态资源public文件夹下 3 在项目根目录创建ueditor文件夹 要复制进来的内容为 4 在根目录的 uedi ...

  10. 我从.net转别的语言的遭遇,现在貌似又要回头(一)

    从2016年开始,作为公司最后的一个.net部门,被迫转向了php. php里面装得一手什么逼呢? 首先,你要来几本入门的书,linux,mysql,php基础语法,nginx或apache.哥那时候 ...