你必须知道的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左右无缝滚动(一般方法+面向对象方法)
    Aug 17 Javascript
    IE下支持文本框和密码框placeholder效果的JQuery插件分享
    Jan 31 Javascript
    Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
    Mar 06 Javascript
    详解js的六大数据类型
    Dec 27 Javascript
    通过修改360抢票的刷新频率和突破8车次限制实现方法
    Jan 04 Javascript
    vue-router跳转页面的方法
    Feb 09 Javascript
    Angular2监听页面大小变化的解决方法
    Oct 09 Javascript
    Vue中的v-for指令不起效果的解决方法
    Sep 27 Javascript
    JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
    Jun 17 Javascript
    用js限制网页只在微信浏览器中打开(或者只能手机端访问)
    Dec 24 Javascript
    JavaScript中的惰性载入函数及优势
    Feb 18 Javascript
    js实现有趣的倒计时效果
    Jan 19 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递归删除指定文件夹的方法小结
    2015/04/20 PHP
    thinkphp跨库操作的简单代码实例
    2016/09/22 PHP
    mysql desc(DESCRIBE)命令实例讲解
    2016/09/24 PHP
    jQuery帮助之筛选查找 children([expr])
    2011/01/31 Javascript
    jQuery 中$(this).index与$.each的使用指南
    2014/11/20 Javascript
    AngularJS ng-blur 指令详解及简单实例
    2016/07/30 Javascript
    JS中解决谷歌浏览器记住密码输入框颜色改变功能
    2017/02/13 Javascript
    Angular1.x复杂指令实例详解
    2017/03/01 Javascript
    浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
    2017/06/25 Javascript
    浅谈Vue的加载顺序探讨
    2017/10/25 Javascript
    AngularJs返回前一页面时刷新一次前面页面的方法
    2018/10/09 Javascript
    js实现简单的无缝轮播效果
    2020/09/05 Javascript
    解决Element中el-date-picker组件不回填的情况
    2020/11/07 Javascript
    [01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
    2016/02/26 DOTA
    [20:30]职业巡回赛回顾
    2018/08/09 DOTA
    [51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
    2019/09/05 DOTA
    python删除列表中重复记录的方法
    2015/04/28 Python
    部署Python的框架下的web app的详细教程
    2015/04/30 Python
    浅谈Python 对象内存占用
    2016/07/15 Python
    Python实现爬虫设置代理IP和伪装成浏览器的方法分享
    2018/05/07 Python
    Python实现的从右到左字符串替换方法示例
    2018/07/06 Python
    django_orm查询性能优化方法
    2018/08/20 Python
    15行Python代码实现网易云热门歌单实例教程
    2019/03/10 Python
    Python加速程序运行的方法
    2020/07/29 Python
    英国领先的男士美容护发用品公司:Mankind
    2016/08/31 全球购物
    Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
    2016/10/31 全球购物
    以实惠的价格提供高品质的时尚:Newchic
    2018/01/18 全球购物
    信息技术专业大学生职业生涯规划书
    2014/01/24 职场文书
    外贸采购员岗位职责
    2014/03/08 职场文书
    小学班长竞选演讲稿
    2014/04/24 职场文书
    国庆节促销广告语2014
    2014/09/19 职场文书
    《伯牙绝弦》教学反思
    2016/02/16 职场文书
    python 利用 PIL 将数组值转成图片的实现
    2021/04/12 Python
    MySQL中datetime时间字段的四舍五入操作
    2021/10/05 MySQL
    排查MySQL生产环境索引没有效果
    2022/04/11 MySQL
    Golang 入门 之url 包
    2022/05/04 Golang