你必须知道的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 相关文章推荐
    jquery.Ajax()方法调用Asp.Net后台的方法解析
    Feb 13 Javascript
    Javascript数组操作函数总结
    Feb 05 Javascript
    JS实现文字向下滚动完整实例
    Feb 06 Javascript
    jQuery EasyUI datagrid实现本地分页的方法
    Feb 13 Javascript
    js实现一个链接打开两个链接地址的方法
    May 12 Javascript
    JavaScript通过事件代理高亮显示表格行的方法
    May 27 Javascript
    浅谈String.valueOf()方法的使用
    Jun 06 Javascript
    javascript replace()第二个参数为函数时的参数用法
    Dec 26 Javascript
    JS中的多态实例详解
    Oct 15 Javascript
    js中apply与call简单用法详解
    Nov 06 Javascript
    Vue按需加载的具体实现
    Dec 02 Javascript
    JavaScript实现构造json数组的方法分析
    Aug 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
    Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
    2010/12/29 PHP
    PHP中for与foreach的区别分析
    2011/03/09 PHP
    php全局变量和类配合使用深刻理解
    2013/06/05 PHP
    PHP利用func_get_args和func_num_args函数实现函数重载实例
    2014/11/12 PHP
    Yii2中hasOne、hasMany及多对多关联查询的用法详解
    2017/02/15 PHP
    JavaScript精炼之构造函数 Constructor及Constructor属性详解
    2015/11/05 Javascript
    jquery编写日期选择器
    2017/03/16 Javascript
    收集前端面试题之url、href、src
    2018/03/22 Javascript
    纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
    2018/06/23 Javascript
    微信小程序自定义可滑动日历界面
    2018/12/28 Javascript
    Vue侦测相关api的实现方法
    2019/05/22 Javascript
    一些可能会用到的Node.js面试题
    2019/06/15 Javascript
    Vue解析带html标签的字符串为dom的实例
    2019/11/13 Javascript
    解决vue+webpack项目接口跨域出现的问题
    2020/08/10 Javascript
    JavaScript经典案例之简易计算器
    2020/08/24 Javascript
    vue动态设置路由权限的主要思路
    2021/01/13 Vue.js
    [46:27]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第一局
    2016/03/02 DOTA
    用Python实现通过哈希算法检测图片重复的教程
    2015/04/02 Python
    python显示生日是星期几的方法
    2015/05/27 Python
    python获取中文字符串长度的方法
    2018/11/14 Python
    python3.7 利用函数os pandas利用excel对文件名进行归类
    2019/09/29 Python
    在 Python 中使用 7zip 备份文件的操作
    2020/12/11 Python
    Python3压缩和解压缩实现代码
    2021/03/01 Python
    纯CSS3打造属于自己的“小黄人”
    2016/03/14 HTML / CSS
    韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
    2018/03/27 全球购物
    EJB的几种类型
    2012/08/15 面试题
    电脑租赁公司创业计划书
    2014/01/08 职场文书
    幼儿园校车司机的岗位职责
    2014/01/30 职场文书
    销售员个人求职的自我评价
    2014/02/10 职场文书
    教师竞聘演讲稿
    2014/05/16 职场文书
    2014年秋季开学典礼致辞
    2014/08/02 职场文书
    家庭财产分割协议书范本
    2014/11/24 职场文书
    优秀党员先进材料
    2014/12/18 职场文书
    大学生实习介绍信
    2015/05/05 职场文书
    2016年十一促销广告语
    2016/01/28 职场文书
    如何用JS实现简单的数据监听
    2021/05/06 Javascript