你必须知道的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实现的动态添加表单元素input,button等(appendChild)
    Nov 24 Javascript
    js动态设置div的值下例子
    Oct 29 Javascript
    jquery分页插件jpaginate在IE中不兼容问题
    Apr 22 Javascript
    JS判断、校验MAC地址的2个实例
    May 05 Javascript
    js去除输入框中所有的空格和禁止输入空格的方法
    Jun 09 Javascript
    JS修改iframe页面背景颜色的方法
    Apr 01 Javascript
    jquery实现加载进度条提示效果
    Nov 23 Javascript
    Jquery表单验证失败后不提交的解决方法
    Oct 18 Javascript
    Bootstrap进度条学习使用
    Feb 09 Javascript
    vue底部加载更多的实例代码
    Jun 29 Javascript
    js实现web调用摄像头 js截取视频画面
    Apr 21 Javascript
    Bootstrap实现模态框效果
    Sep 30 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的单引号和双引号 字符串效率
    2009/05/27 PHP
    javascript 小型动画组件与实现代码
    2010/06/02 PHP
    php教程之phpize使用方法
    2014/02/12 PHP
    javascript定时变换图片实例代码
    2013/03/17 Javascript
    js判断屏幕分辨率的代码
    2013/07/16 Javascript
    javascript实现颜色渐变的方法
    2013/10/30 Javascript
    JavaScript将字符串转换成字符编码列表的方法
    2015/03/19 Javascript
    javascript中返回顶部按钮的实现
    2015/05/05 Javascript
    jquery点击缩略图切换视频播放特效代码分享
    2015/09/15 Javascript
    详解vuelidate 对于vueJs2.0的验证解决方案
    2017/03/09 Javascript
    详解Angular2响应式表单
    2017/06/14 Javascript
    vue-cli2.9.3 详细教程
    2018/04/23 Javascript
    NodeJS服务器实现gzip压缩的示例代码
    2018/10/12 NodeJs
    从0到1搭建Element的后台框架的方法步骤
    2019/04/10 Javascript
    JavaScript TAB栏切换效果的示例
    2020/11/05 Javascript
    Pyramid添加Middleware的方法实例
    2013/11/27 Python
    TensorFlow如何实现反向传播
    2018/02/06 Python
    基于数据归一化以及Python实现方式
    2018/07/11 Python
    python版opencv摄像头人脸实时检测方法
    2018/08/03 Python
    Python实现的登录验证系统完整案例【基于搭建的MVC框架】
    2019/04/12 Python
    python多线程并发及测试框架案例
    2019/10/15 Python
    详细分析Python collections工具库
    2020/07/16 Python
    canvas需要在标签里直接定义宽高
    2014/12/17 HTML / CSS
    Ariat官网:美国马靴和服装品牌
    2019/12/16 全球购物
    直接有效的自我评价
    2014/01/11 职场文书
    商场活动策划方案
    2014/01/24 职场文书
    党的群众路线教育实践活动总结报告
    2014/04/28 职场文书
    男性健康日的活动方案
    2014/08/18 职场文书
    做一个有道德的人活动实施方案
    2014/08/23 职场文书
    机关作风建设自查报告及整改措施
    2014/10/21 职场文书
    销售经理工作失职检讨书
    2014/10/24 职场文书
    创业计划书之面包店
    2019/09/12 职场文书
    2019年度政务公开考核工作总结模板
    2019/11/11 职场文书
    Nginx反向代理学习实例教程
    2021/10/24 Servers
    Java 超详细讲解IO操作字节流与字符流
    2022/03/25 Java/Android
    VUE使用draggable实现组件拖拽
    2022/04/06 Vue.js