你必须知道的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 相关文章推荐
    Google Map Api和GOOGLE Search Api整合实现代码
    Jul 18 Javascript
    multiSteps 基于Jquery的多步骤滑动切换插件
    Jul 22 Javascript
    javascript window.confirm确认 取消对话框实现代码小结
    Oct 21 Javascript
    window.addEventListener来解决让一个js事件执行多个函数
    Dec 26 Javascript
    用Node.js通过sitemap.xml批量抓取美女图片
    May 28 Javascript
    使用 bootstrap modal遇到的问题小结
    Nov 09 Javascript
    node.js实现微信开发之获取用户授权
    Mar 18 Javascript
    js实现的在本地预览图片功能示例
    Nov 09 Javascript
    JavaScript中this的学习笔记及用法整理
    Feb 17 Javascript
    react PropTypes校验传递的值操作示例
    Apr 28 Javascript
    nuxt 实现在其它js文件中使用store的方式
    Nov 05 Javascript
    EXTJS7实现点击拖拉选择文本
    Dec 17 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最简单的删除目录与文件实现方法
    2014/11/28 PHP
    9条PHP编程小知识及易犯的小错误
    2015/01/22 PHP
    PHP实现根据图片色界在不同位置加水印的方法
    2015/08/08 PHP
    Symfony核心类概述
    2016/03/17 PHP
    PHP基于SPL实现的迭代器模式示例
    2018/04/22 PHP
    thinkPHP5框架导出Excel文件简单操作示例
    2018/08/03 PHP
    6个常见的 PHP 安全性攻击实例和阻止方法
    2020/12/16 PHP
    js模拟弹出效果代码修正版
    2008/08/07 Javascript
    JavaScript入门教程(6) Window窗口对象
    2009/01/31 Javascript
    JavaScript版的TwoQueues缓存模型
    2014/12/29 Javascript
    JavaScript中的lastIndexOf()方法使用详解
    2015/06/06 Javascript
    Javascript中的return作用及javascript return关键字用法详解
    2015/11/05 Javascript
    微信小程序上传图片功能(附后端代码)
    2020/06/19 Javascript
    Js视频播放器插件Video.js使用方法详解
    2020/02/04 Javascript
    js实现金山打字通小游戏
    2020/07/24 Javascript
    使用Vant完成通知栏Notify的提示操作
    2020/11/11 Javascript
    简洁的十分钟Python入门教程
    2015/04/03 Python
    深入理解python对json的操作总结
    2017/01/05 Python
    在centos7中分布式部署pyspider
    2017/05/03 Python
    python读取目录下最新的文件夹方法
    2018/12/24 Python
    Django JWT Token RestfulAPI用户认证详解
    2019/01/23 Python
    Python3运算符常见用法分析
    2020/02/14 Python
    增大python字体的方法步骤
    2020/07/05 Python
    python实现ping命令小程序
    2020/12/28 Python
    CSS3网格的三个新特性详解
    2014/04/04 HTML / CSS
    用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
    2012/06/11 面试题
    企业管理专业个人求职信范文
    2013/09/24 职场文书
    大学军训感言
    2014/01/10 职场文书
    室内拓展活动方案
    2014/02/13 职场文书
    乱丢垃圾袋检讨书
    2014/10/08 职场文书
    党员对十八届四中全会的期盼思想汇报范文
    2014/10/17 职场文书
    2015年乡镇统计工作总结
    2015/04/22 职场文书
    单独二胎证明
    2015/06/24 职场文书
    信息技术课教学反思
    2016/02/23 职场文书
    简历上的自我评价,该怎么写呢?
    2019/06/13 职场文书
    SQLServer常见数学函数梳理总结
    2022/08/05 MySQL