你必须知道的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中使用inline函数的问题
    Mar 08 Javascript
    Javascript valueOf 使用方法
    Dec 28 Javascript
    xml 封装与解析(javascript和C#中)
    Jul 26 Javascript
    javascript 实现简单的table排序及table操作练习
    Dec 28 Javascript
    table insertRow、deleteRow定义和用法总结
    May 14 Javascript
    DWR中各种java方法的调用
    May 04 Javascript
    artDialog+plupload实现多文件上传
    Jul 19 Javascript
    AngularJS 模型详细介绍及实例代码
    Jul 27 Javascript
    关于动态生成dom绑定事件失效的原因及解决方法
    Aug 06 Javascript
    详解Vue2.0 事件派发与接收
    Sep 05 Javascript
    React Native 自定义下拉刷新上拉加载的列表的示例
    Mar 01 Javascript
    在vue项目中 实现定义全局变量 全局函数操作
    Oct 26 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 foreach循环使用详解与实例代码
    2010/05/08 PHP
    apache mysql php 源码编译使用方法
    2012/05/03 PHP
    使用php实现下载生成某链接快捷方式的解决方法
    2013/05/07 PHP
    ThinkPHP Mobile使用方法简明教程
    2014/06/18 PHP
    php+mysql开发中的经验与常识小结
    2019/03/25 PHP
    jquery 学习之一 对象访问
    2010/11/23 Javascript
    通过Javascript创建一个选择文件的对话框代码
    2012/06/16 Javascript
    Node.js模拟浏览器文件上传示例
    2014/03/26 Javascript
    jQuery学习总结之jQuery事件
    2014/06/30 Javascript
    js实现正方形颜色从下往上升的效果
    2014/08/04 Javascript
    JavaScript定时器和优化的取消定时器方法
    2015/07/03 Javascript
    理解javascript中Map代替循环
    2016/02/26 Javascript
    BootStrap 超链接变按钮的实现方法
    2016/09/25 Javascript
    深入理解JS中的Function.prototype.bind()方法
    2016/10/11 Javascript
    JavaScript实现简易的天数计算器实例【附demo源码下载】
    2017/01/18 Javascript
    JS实现根据密码长度显示安全条功能
    2017/03/08 Javascript
    Vue.js学习笔记之修饰符详解
    2017/07/25 Javascript
    mongoose设置unique不生效问题的解决及如何移除unique的限制
    2017/11/07 Javascript
    原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
    2018/02/01 Javascript
    如何在vue 中引入使用jquery
    2020/11/10 jQuery
    [40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
    2016/03/03 DOTA
    Python 冒泡,选择,插入排序使用实例
    2015/02/05 Python
    python实现简单图书管理系统
    2019/11/22 Python
    Jupyter notebook快速入门教程(推荐)
    2020/05/18 Python
    python 实现朴素贝叶斯算法的示例
    2020/09/30 Python
    python collections模块的使用
    2020/10/16 Python
    使用css3制作登录表单的步骤
    2014/04/07 HTML / CSS
    浅谈Html5中视频 音频标签 进度条的问题
    2016/07/26 HTML / CSS
    YSL圣罗兰美妆官方旗舰店:购买YSL口红
    2018/04/16 全球购物
    Oracle快照(snapshot)
    2015/03/13 面试题
    优秀党支部事迹材料
    2014/01/14 职场文书
    研修心得体会
    2014/09/04 职场文书
    刑事辩护授权委托书格式
    2014/10/13 职场文书
    2014年第四季度入党积极分子思想汇报(十八届四中全会)
    2014/11/03 职场文书
    答谢酒会主持词
    2015/07/02 职场文书
    优质服务心得体会(共4篇)
    2016/01/22 职场文书