你必须知道的Javascript知识点之"深入理解作用域链"的介绍


Posted in Javascript onApril 23, 2013

示例代码:

var xxxVar1 = 1;
 var outer = function(){ 
    var xxxVar2 = 2;    var results = [];
    for(var i = 0; i< 3; i++)
    {
       var inner = function(){
          var xxxVar3 = 3;
          return xxxVar3 + xxxVar2 +xxxVar1 + i;
       }
       results .push(inner);
    }
    return results;
 }
 var xxxVar1 = 100;
 var xxxVar2 = 200;
 var xxxVar3 = 300;
 var results = outer();
 results[0]();
 results[1]();
 results[2]();

执行结果

你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍

发生了什么事情很多人都可能知道上例的执行结果,但是不是所有人都明白为什么会是这样的结果,包括我自己。名词解释活动对象:一次函数调用开始的时候,javascript解释器会收集函数体中的所有局部变量(以var形式声明的变量),将这些局部变量存储到一个称为“活动对象”的对象里,所有变量都初始为undefined。
代码示例
var fun = function(){
    alert(name);
    var name = '段光伟';
 }

当执行这个函数时候时(fun()),函数体还没执行到,当前的活动对象为[{ name: undefined }],因此fun()执行的结果为:
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
  • 函数的[scope]属性:每个函数在定义的时候(生成函数实例的时候)都会分配一个[scope]属性,这个属性指向的当前的“作用域链”。这个属性开发人员是访问不到的,只有javascript能访问。
  • 作用域链:当函数调用时,javascript引擎会维护一个这次调用的作用域链,这个作用域链条是函数的[scope]指向的作用域链加上函数调用时的活动对象,形式如[ 活动对象, 函数定义时的作用域链条]。
    代码示例
    var a = 1;
     //步骤1:[ { a: 1, outer: undefined } ] var outer = function(){
        //步骤3:[ { b: undefined, inner: undefined } ,{ a: 1, outer: function } ]
        var b = 2;
        var inner = function(){
           //步骤5:[ {}, { b: 2, inner: function } ,{ a: 1, outer: function } ]
           return a + b;
        }
        //步骤4:[ { b: 2, inner: function } ,{ a: 1, outer: function } ]
        return inner();
     }
     //步骤2:[ { a: 1, outer: function } ]
     outer();

    作用域链规则规则1

    javascript一般运行在一定的宿主中,每个宿主都会提供一个“全局对象”,或者叫“全局活动对象”,这个全局对象是所有作用域链的根节点。

    规则2

     “取值操作”(如:alert(xxxVar))的规则是,沿着作用域链依次查找名称为“xxxVar”的变量,返回第一个找到的值,如果找不到就抛出异常(ReferenceError: xxxVar is not defined)。

    规则3

     “赋值操作”(如:xxxVar = '段光伟')的规则是,沿着作用域链依次查找名称为“xxxVar”的变量,覆盖第一个找到的值,如果找不到就将“xxxVar”添加到全局对象中。

    备注“闭包”这个概念就是通过“作用域链”实现的,而C#是通过编译器实现的,.NET并不支持。
  • Javascript 相关文章推荐
    JavaScript获得选中文本内容的方法
    Dec 02 Javascript
    取得窗口大小 兼容所有浏览器的js代码
    Aug 09 Javascript
    javascript中的取反再取反~~没有意义
    Apr 06 Javascript
    jquery实现拖拽调整Div大小
    Jan 30 Javascript
    js实现向右横向滑出的二级菜单效果
    Aug 27 Javascript
    AngularJS中处理多个promise的方式
    Feb 02 Javascript
    Vue.js绑定HTML class数组语法错误的原因分析
    Oct 19 Javascript
    Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
    Jul 27 Javascript
    关于vue面试题汇总
    Mar 20 Javascript
    p5.js绘制创意自画像
    Nov 04 Javascript
    小程序中使用css var变量(使js可以动态设置css样式属性)
    Mar 31 Javascript
    针对Vue路由history模式下Nginx后台配置操作
    Oct 22 Javascript
    你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
    Apr 23 #Javascript
    你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
    Apr 23 #Javascript
    你必须知道的Javascript知识点之&quot;this指针&quot;的应用
    Apr 23 #Javascript
    jquery清空textarea等输入框实现代码
    Apr 22 #Javascript
    js计算精度问题小结
    Apr 22 #Javascript
    基于javascipt-dom编程 table对象的使用
    Apr 22 #Javascript
    用js实现小球的自由移动代码
    Apr 22 #Javascript
    You might like
    PHP网页游戏学习之Xnova(ogame)源码解读(四)
    2014/06/23 PHP
    thinkphp3.x中变量的获取和过滤方法详解
    2016/05/20 PHP
    PHP基于堆栈实现的高级计算器功能示例
    2017/09/15 PHP
    使用XHProf查找PHP性能瓶颈的实例
    2017/12/13 PHP
    网页自动刷新,不产生嗒嗒声的一个解决方法
    2007/03/27 Javascript
    jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
    2011/10/06 Javascript
    jquery中prop()方法和attr()方法的区别浅析
    2013/09/06 Javascript
    Jquery实现自定义tooltip示例代码
    2014/02/12 Javascript
    JavaScript实现防止网页被嵌入Frame框架的代码分享
    2014/12/29 Javascript
    深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
    2015/12/16 Javascript
    一次$.getJSON不执行的简单记录
    2016/07/19 Javascript
    JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
    2016/08/03 Javascript
    老生常谈jquery中detach()和remove()的区别
    2017/03/02 Javascript
    jquery中each循环的简单回滚操作
    2017/05/05 jQuery
    Easyui Datagrid自定义按钮列(最后面的操作列)
    2017/07/13 Javascript
    简单实现jQuery上传图片显示预览功能
    2020/06/29 jQuery
    vue filters的使用详解
    2018/06/11 Javascript
    一些手写JavaScript常用的函数汇总
    2019/04/16 Javascript
    JS拖动选择table里的单元格完整实例【基于jQuery】
    2019/05/28 jQuery
    基于jquery实现的tab选项卡功能示例【附源码下载】
    2019/06/10 jQuery
    zookeeper python接口实例详解
    2018/01/18 Python
    使用Python爬了4400条淘宝商品数据,竟发现了这些“潜规则”
    2018/03/23 Python
    Python基础教程之利用期物处理并发
    2018/03/29 Python
    Windows下Anaconda2安装NLTK教程
    2018/09/19 Python
    PyCharm设置护眼背景色的方法
    2018/10/29 Python
    对python3新增的byte类型详解
    2018/12/04 Python
    Tensorflow分类器项目自定义数据读入的实现
    2019/02/05 Python
    Python实现判断一个整数是否为回文数算法示例
    2019/03/02 Python
    基于python3抓取pinpoint应用信息入库
    2020/01/08 Python
    在django中使用apscheduler 执行计划任务的实现方法
    2020/02/11 Python
    python实现与redis交互操作详解
    2020/04/21 Python
    详解HTML5 window.postMessage与跨域
    2017/05/11 HTML / CSS
    表彰先进的通报
    2014/01/31 职场文书
    结婚仪式主持词
    2015/06/29 职场文书
    2019年员工晋升管理制度范本!
    2019/07/08 职场文书
    SQL中的三种去重方法小结
    2021/11/01 SQL Server