你必须知道的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 相关文章推荐
    JSON.parse 解析字符串出错的解决方法
    Jul 08 Javascript
    javascript对话框使用方法(警告框 javascript确认框 提示框)
    Jan 07 Javascript
    jquery实现ajax提交form表单的方法总结
    Mar 03 Javascript
    javascript中数组的多种定义方法和常用函数简介
    May 09 Javascript
    使用javascript实现判断当前浏览器
    Apr 14 Javascript
    大型JavaScript应用程序架构设计模式
    Jun 29 Javascript
    通过jsonp获取json数据实现AJAX跨域请求
    Jan 22 Javascript
    原生JavaScript实现AJAX、JSONP
    Feb 07 Javascript
    vue.js 实现点击按钮动态添加li的方法
    Sep 07 Javascript
    Vue中的情侣属性$dispatch和$broadcast详解
    Mar 07 Javascript
    详解原生JS回到顶部
    Mar 25 Javascript
    js模拟实现烟花特效
    Mar 10 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实现MySQL更新记录的代码
    2008/06/07 PHP
    php设计模式 Decorator(装饰模式)
    2011/06/26 PHP
    php微信开发自定义菜单
    2016/08/27 PHP
    PHP实现权限管理功能示例
    2017/09/22 PHP
    Laravel中服务提供者和门面模式的入门介绍
    2017/11/06 PHP
    Mac系统下安装PHP Xdebug
    2018/03/30 PHP
    PHP count_chars()函数讲解
    2019/02/14 PHP
    PHP CURL实现模拟登陆并上传文件操作示例
    2020/01/02 PHP
    几个比较经典常用的jQuery小技巧
    2010/03/01 Javascript
    基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
    2010/12/11 Javascript
    左侧是表头的JS表格控件(自写,网上没有的)
    2013/06/04 Javascript
    jQuery实现鼠标单击网页文字后在文本框显示的方法
    2015/05/06 Javascript
    Javascript基础之数组的使用
    2016/05/13 Javascript
    Vue.js实现简单ToDoList 前期准备(一)
    2016/12/01 Javascript
    Angular.js实现注册系统的实例详解
    2016/12/18 Javascript
    Vue框架之goods组件开发详解
    2018/01/25 Javascript
    Vue-router 报错NavigationDuplicated的解决方法
    2020/03/31 Javascript
    微信小程序的引导页实现代码
    2020/06/24 Javascript
    用Python的Tornado框架结合memcached页面改善博客性能
    2015/04/24 Python
    python实现从ftp服务器下载文件的方法
    2015/04/30 Python
    Python遍历指定文件及文件夹的方法
    2015/05/09 Python
    详解python单例模式与metaclass
    2016/01/15 Python
    实践Vim配置python开发环境
    2018/07/02 Python
    python爬虫爬取微博评论案例详解
    2019/03/27 Python
    python中metaclass原理与用法详解
    2019/06/25 Python
    python 列表转为字典的两个小方法(小结)
    2019/06/28 Python
    解决TensorFlow调用Keras库函数存在的问题
    2020/07/06 Python
    CSS3教程(3):border-color网页边框色彩
    2009/04/02 HTML / CSS
    世界领先的艺术图书出版社:TASCHEN
    2018/07/23 全球购物
    新西兰最大的连锁超市:Countdown
    2020/06/04 全球购物
    银行实习鉴定
    2013/12/13 职场文书
    日语专业个人求职信范文
    2014/02/02 职场文书
    教师个人读书活动总结
    2014/07/08 职场文书
    2014年精神文明建设工作总结
    2014/11/19 职场文书
    合作协议书格式范本
    2016/03/21 职场文书
    TensorFlow中tf.batch_matmul()的用法
    2021/06/02 Python