你必须知道的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 相关文章推荐
    简单三步,搞掂内存泄漏
    Mar 10 Javascript
    javascript 操作文件 实现方法小结
    Jul 02 Javascript
    JavaScript中的Math 使用介绍
    Apr 21 Javascript
    自己用jQuery写了一个图片的马赛克消失效果
    May 04 Javascript
    浅谈angularJS 作用域
    Jul 05 Javascript
    使用jQuery操作DOM的方法小结
    Feb 27 Javascript
    Easyui在treegrid添加控件的实现方法
    Jun 23 Javascript
    vue数字类型过滤器的示例代码
    Sep 07 Javascript
    微信小程序如何获取用户信息
    Jan 26 Javascript
    jquery 键盘事件 keypress() keydown() keyup()用法总结
    Oct 23 jQuery
    彻底搞懂并解决vue-cli4中图片显示的问题实现
    Aug 31 Javascript
    TypeScript魔法堂之枚举的超实用手册
    Oct 29 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中PDO解决中文乱码问题的一些补充
    2010/09/06 PHP
    浅谈PHP定义命令空间的几个注意点(推荐)
    2016/10/29 PHP
    浅析php中array_map和array_walk的使用对比
    2016/11/20 PHP
    使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
    2017/09/01 PHP
    ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
    2012/12/11 Javascript
    Js获取下拉框选定项的值和文本的实现代码
    2014/02/26 Javascript
    详解JavaScript ES6中的模板字符串
    2015/07/28 Javascript
    jQuery Ajax页面局部加载方法汇总
    2016/06/02 Javascript
    jquery中live()方法和bind()方法区别分析
    2016/06/23 Javascript
    Bootstrap中的fileinput 多图片上传及编辑功能
    2016/09/05 Javascript
    使用yeoman构建angular应用的方法
    2017/08/14 Javascript
    详解使用jQuery.i18n.properties实现js国际化
    2018/05/04 jQuery
    vue实现微信二次分享以及自定义分享的示例
    2019/03/20 Javascript
    [48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
    2018/04/01 DOTA
    [03:35]2018年度DOTA2最佳辅助位选手5号位-完美盛典
    2018/12/17 DOTA
    python中 ? : 三元表达式的使用介绍
    2013/10/09 Python
    python实现简单的单变量线性回归方法
    2018/11/08 Python
    python requests.post带head和body的实例
    2019/01/02 Python
    python遍历小写英文字母的方法
    2019/01/02 Python
    在Pycharm中执行scrapy命令的方法
    2019/01/16 Python
    django 做 migrate 时 表已存在的处理方法
    2019/08/31 Python
    pandas数据处理进阶详解
    2019/10/11 Python
    详解Python 中的容器 collections
    2020/08/17 Python
    python 实时调取摄像头的示例代码
    2020/11/25 Python
    Pytorch如何切换 cpu和gpu的使用详解
    2021/03/01 Python
    CSS3 实现穿梭星空动画
    2020/11/13 HTML / CSS
    Omio中国:全欧洲低价大巴、火车和航班搜索和比价
    2018/08/09 全球购物
    C# .NET面试题
    2015/11/28 面试题
    社会学专业学生职业规划书
    2014/02/07 职场文书
    爱国卫生月实施方案
    2014/02/21 职场文书
    《社戏》教学反思
    2014/04/15 职场文书
    毕业班班主任工作总结2015
    2015/07/23 职场文书
    勤俭节约主题班会
    2015/08/13 职场文书
    Mysql Online DDL的使用详解
    2021/05/20 MySQL
    pytorch通过训练结果的复现设置随机种子
    2021/06/01 Python
    React更新渲染原理深入分析
    2022/12/24 Javascript