你必须知道的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初学困境—js初学
    Dec 29 Javascript
    JavaScript中string转换成number介绍
    Dec 31 Javascript
    JS实现带有抽屉效果的产品类网站多级导航菜单代码
    Sep 15 Javascript
    AngularJS 指令详细介绍
    Jul 27 Javascript
    Angular2 (RC4) 路由与导航详解
    Sep 21 Javascript
    js前端解决跨域问题的8种方案(最新最全)
    Nov 18 Javascript
    利用javascript实现的三种图片放大镜效果实例(附源码)
    Jan 23 Javascript
    微信小程序引用公共js里的方法的实例详解
    Aug 17 Javascript
    微信小程序实现消息框弹出动画
    Apr 18 Javascript
    layui实现数据分页功能(ajax异步)
    Jul 27 Javascript
    vue实现评论列表功能
    Oct 25 Javascript
    uni-app 微信小程序授权登录的实现步骤
    Feb 18 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与SQL注入攻击防范小技巧
    2011/09/16 PHP
    PHP面向对象程序设计之接口用法
    2014/08/20 PHP
    php使用GD实现颜色渐变实例
    2015/06/02 PHP
    php简单判断两个字符串是否相等的方法
    2015/07/13 PHP
    PHP面向对象程序设计类的定义与用法简单示例
    2016/12/27 PHP
    PHP实现的微信APP支付功能示例【基于TP5框架】
    2019/09/16 PHP
    javascript Zifa FormValid 0.1表单验证 代码打包下载
    2007/06/08 Javascript
    Extjs入门之动态加载树代码
    2010/04/09 Javascript
    js模拟点击事件实现代码
    2012/11/06 Javascript
    jQuery中setTimeout的几种使用方法小结
    2013/04/07 Javascript
    jquery等待效果示例
    2014/05/01 Javascript
    Nodejs+express+html5 实现拖拽上传
    2014/08/08 NodeJs
    jQuery打字效果实现方法(附demo源码下载)
    2015/12/18 Javascript
    jquery实现无刷新验证码的简单实例
    2016/05/19 Javascript
    基于CSS3和jQuery实现跟随鼠标方位的Hover特效
    2016/07/25 Javascript
    JavaScript中this的用法实例分析
    2016/12/19 Javascript
    JavaScript中localStorage对象存储方式实例分析
    2017/01/12 Javascript
    vue2.0结合Element实现select动态控制input禁用实例
    2017/05/12 Javascript
    什么是Vue.js框架 为什么选择它?
    2017/10/17 Javascript
    微信小程序将字符串生成二维码图片的操作方法
    2018/07/17 Javascript
    浅谈layui框架自带分页和表格重载的接口解析问题
    2019/09/11 Javascript
    ElementUI之Message功能拓展详解
    2019/10/18 Javascript
    Vue 禁用浏览器的前进后退操作
    2020/09/04 Javascript
    Python的Django中django-userena组件的简单使用教程
    2015/05/30 Python
    Python的Django框架中自定义模版标签的示例
    2015/07/20 Python
    在django中使用自定义标签实现分页功能
    2017/07/04 Python
    基于pandas将类别属性转化为数值属性的方法
    2018/07/25 Python
    Python logging模块异步线程写日志实现过程解析
    2020/06/30 Python
    matplotlib 画双轴子图无法显示x轴的解决方法
    2020/07/27 Python
    python 发送邮件的示例代码(Python2/3都可以直接使用)
    2020/12/03 Python
    CSS3 Flexbox中flex-shrink属性的用法示例介绍
    2013/12/30 HTML / CSS
    介绍一下XMLHttpRequest对象
    2012/02/12 面试题
    员工激励培训演讲稿
    2014/09/16 职场文书
    2016公司新年问候语
    2015/11/11 职场文书
    个人的事迹材料怎么写
    2019/04/24 职场文书
    详解Redis实现限流的三种方式
    2021/04/27 Redis