你必须知道的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 相关文章推荐
    浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
    Jun 11 Javascript
    jQuery下拉友情链接美化效果代码分享
    Aug 26 Javascript
    为何JS操作的href都是javascript:void(0);呢
    Nov 12 Javascript
    微信小程序 地图(map)实例详解
    Nov 16 Javascript
    jQuery中的select操作详解
    Nov 29 Javascript
    js实现一个可以兼容PC端和移动端的div拖动效果实例
    Dec 09 Javascript
    Angular中的interceptors拦截器
    Jun 25 Javascript
    Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
    Jul 27 Javascript
    更改BootStrap popover的默认样式及popover简单用法
    Sep 13 Javascript
    vue分页器组件编写方法详解
    Jun 28 Javascript
    如何使用JS console.log()技巧提高工作效率
    Oct 14 Javascript
    JavaScript实现图片放大预览效果
    Nov 02 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
    这东西价格,可以买几台TECSUN S-2000
    2021/03/02 无线电
    在WordPress的文章编辑器中设置默认内容的方法
    2015/12/29 PHP
    实例详解PHP中html word 互转的方法
    2016/01/28 PHP
    PHP获取中国时间(上海时区时间)及美国时间的方法
    2017/02/23 PHP
    浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
    2017/03/14 PHP
    js控制的遮罩层实例介绍
    2013/05/29 Javascript
    jQuery 插件开发指南
    2014/11/14 Javascript
    原生js实现移动开发轮播图、相册滑动特效
    2015/04/17 Javascript
    javascript跨域的方法汇总
    2015/10/23 Javascript
    JS hashMap实例详解
    2016/05/26 Javascript
    跨域请求的完美解决方法(JSONP, CORS)
    2016/06/12 Javascript
    ionic2屏幕适配实现适配手机、平板等设备的示例代码
    2017/08/11 Javascript
    vue-router 组件复用问题详解
    2018/01/22 Javascript
    vue2.0+koa2+mongodb实现注册登录
    2018/04/10 Javascript
    Webpack path与publicPath的区别详解
    2018/05/03 Javascript
    jQuery easyui datagird编辑行删除行功能的实现代码
    2018/09/20 jQuery
    详解Vue.directive 自定义指令
    2019/03/27 Javascript
    swiper Scrollbar滚动条组件详解
    2019/09/08 Javascript
    TypeScript魔法堂之枚举的超实用手册
    2020/10/29 Javascript
    [02:55]DOTA2英雄基础教程 发条技师
    2013/12/04 DOTA
    [06:04]DOTA2英雄梦之声Vol19卓尔游侠
    2014/06/20 DOTA
    python中函数总结之装饰器闭包详解
    2016/06/12 Python
    Python从文件中读取数据的方法讲解
    2019/02/14 Python
    python多线程共享变量的使用和效率方法
    2019/07/16 Python
    python 实现dict转json并保存文件
    2019/12/05 Python
    pytorch载入预训练模型后,实现训练指定层
    2020/01/06 Python
    如何通过安装HomeBrew来安装Python3
    2020/12/23 Python
    python脚本使用阿里云slb对恶意攻击进行封堵的实现
    2021/02/04 Python
    关于HTML5的22个初级技巧(图文教程)
    2012/06/21 HTML / CSS
    canvas绘制视频封面的方法
    2018/02/05 HTML / CSS
    Java中实现多态的机制是什么?
    2014/12/07 面试题
    经典C++面试题一
    2016/11/06 面试题
    应届生简历中的自我评价
    2014/01/13 职场文书
    酒后驾驶检讨书
    2014/01/27 职场文书
    质量负责人岗位职责
    2015/02/15 职场文书
    Pytorch中Softmax和LogSoftmax的使用详解
    2021/06/05 Python