javascript 之作用域链-07

时间:2020-12-06 00:05:50

复习作用域

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

疑问

     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

javascript 之作用域链-07

通过上一篇我们知道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

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

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

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

  1. 初探JavaScript&lpar;四&rpar;——作用域链和声明提前

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

  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. javascript高级特性

    01_javascript相关内容02_函数_Arguments对象03_函数_变量的作用域04_函数_特殊函数05_闭包_作用域链&闭包06_闭包_循环中的闭包07_对象_定义普通对象08_ ...

  2. ACM&colon; Billboard 解题报告-线段树

     Billboard Time Limit:8000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Descript ...

  3. ASP&period;NET中彩票项目中的计算复式投注的注数的方法

    从别人做的项目中抽取出的代码:

  4. 虚拟化之vmware-vsphere &lpar;web&rpar; client

    两种客户端 vsphere client 配置>软件>高级设置里的变量 uservars.supressshellwarning=1 vsphere web client 安装完vSphe ...

  5. light oj 1019【最短路模板】

    1019 - Brush (V) PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 MB Tanvir r ...

  6. ios的手势操作之UIGestureRecognizer浅析

    转载地址:http://blog.csdn.net/likendsl/article/details/7554150 每一个手势的实现例子,可参考下面网址:http://www.cnblogs.com ...

  7. struts2中使用json插件实现ajax交互

    json插件可以简单的实现ajax交互,避免了使用struts2-dojo-plugin.jar包时带来的struts2.x版本冲突问题.并且减少了使用ajax标签时需要的繁琐的配置包括web.xml ...

  8. hdu 5053 the Sum of Cube&lpar;上海网络赛)

    the Sum of Cube Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  9. 《HelloGitHub》第 17 期

    公告 本月 hellogitub.com 动态 服务器迁移到了国内,国内浏览速度有了质的飞跃. 代码重构 项目 运行更加简单,直接 clone.执行安装依赖命令.运行 上线了"我的收藏&qu ...

  10. 二叉树与AVL树

    二叉树 什么是二叉树? 父节点至多只有两个子树的树形结构成为二叉树.如下图所示,图1不是二叉树,图2是一棵二叉树. 图1 普通的树                                    ...