你必须知道的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 相关文章推荐
    js 替换
    Feb 19 Javascript
    node.js中的fs.writeFile方法使用说明
    Dec 14 Javascript
    javascript操作数组详解
    Dec 17 Javascript
    jQuery页面加载初始化的3种方法(推荐)
    Jun 02 Javascript
    jQuery图片轮播实现并封装(一)
    Dec 03 Javascript
    jquery插件canvaspercent.js实现百分比圆饼效果
    Jul 18 jQuery
    JS实现简单的浮动碰撞效果示例
    Dec 28 Javascript
    vue删除html内容的标签样式实例
    Sep 13 Javascript
    vuejs2.0运用原生js实现简单拖拽元素功能
    Aug 21 Javascript
    JavaScript的变量声明与声明提前用法实例分析
    Nov 26 Javascript
    JavaScript设计模式之策略模式实现原理详解
    May 29 Javascript
    vue-resource 拦截器interceptors使用详解
    Jan 18 Vue.js
    你必须知道的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使用array_multisort对多个数组或多维数组进行排序
    2014/12/16 PHP
    在WordPress中使用wp_count_posts函数来统计文章数量
    2016/01/05 PHP
    PHP实现图片不变型裁剪及图片按比例裁剪的方法
    2016/01/14 PHP
    Zend Framework教程之视图组件Zend_View用法详解
    2016/03/05 PHP
    PHP封装XML和JSON格式数据接口操作示例
    2019/03/06 PHP
    Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
    2021/03/09 Servers
    javascript Zifa FormValid 0.1表单验证 代码打包下载
    2007/06/08 Javascript
    jquery 弹出登录窗口实现代码
    2009/12/24 Javascript
    jQuery 第二课 操作包装集元素代码
    2010/03/14 Javascript
    JavaScript 对象模型 执行模型
    2010/10/15 Javascript
    JavaScript Array Flatten 与递归使用介绍
    2011/10/30 Javascript
    表格单元格交错着色实现思路及代码
    2013/04/01 Javascript
    javascript适合移动端的日期时间拾取器
    2015/11/10 Javascript
    jQuery使用$.each遍历json数组的简单实现方法
    2016/04/18 Javascript
    React Native 环境搭建的教程
    2017/08/19 Javascript
    浅谈vue中慎用style的scoped属性
    2017/11/28 Javascript
    对TypeScript库进行单元测试的方法
    2019/07/18 Javascript
    微信小程序实现自定义动画弹框/提示框的方法实例
    2020/11/06 Javascript
    深入探究Python中变量的拷贝和作用域问题
    2015/05/05 Python
    python获取外网ip地址的方法总结
    2015/07/02 Python
    Swift 3.0在集合类数据结构上的一些新变化总结
    2016/07/11 Python
    浅谈python socket函数中,send与sendall的区别与使用方法
    2017/05/09 Python
    如何导出python安装的所有模块名称和版本号到文件中
    2020/06/05 Python
    Python 在 VSCode 中使用 IPython Kernel 的方法详解
    2020/09/05 Python
    python实现马丁策略的实例详解
    2021/01/15 Python
    美国在线眼镜店:GlassesShop
    2018/11/15 全球购物
    顺丰快递Java软件工程师面试题
    2015/07/31 面试题
    经济信息管理专业大学生求职信
    2013/09/27 职场文书
    师范生实习个人的自我评价
    2013/09/28 职场文书
    管道维修工岗位职责
    2013/12/27 职场文书
    俄罗斯商务邀请函
    2014/01/26 职场文书
    广告传媒专业应届生求职信
    2014/03/01 职场文书
    信息学院毕业生自荐信范文
    2014/03/04 职场文书
    学校元旦晚会开场白
    2014/12/14 职场文书
    婚礼长辈答谢词
    2015/09/29 职场文书
    先进工作者主要事迹材料
    2015/11/03 职场文书