你必须知道的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中json使用自己总结
    Aug 13 Javascript
    PHP中CURL的几个经典应用实例
    Jan 23 Javascript
    理解javascript封装
    Feb 23 Javascript
    一个极为简单的requirejs实现方法
    Oct 20 Javascript
    vue基于Vue2.0和高德地图的地图组件实例
    Apr 28 Javascript
    基于 Bootstrap Datetimepicker 联动
    Aug 03 Javascript
    JS实现点击循环切换显示内容的方法
    Oct 19 Javascript
    vue的style绑定background-image的方式和其他变量数据的区别详解
    Sep 03 Javascript
    jQuery实现基本淡入淡出效果的方法详解
    Sep 05 jQuery
    vue 实现input表单元素的disabled示例
    Oct 28 Javascript
    Node.js Domain 模块实例详解
    Mar 18 Javascript
    vue单元格多列合并的实现
    Nov 26 Vue.js
    你必须知道的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之第七天
    2006/10/09 PHP
    PHP define函数的使用说明
    2008/08/27 PHP
    分享PHP函数实现数字与文字分页代码
    2015/07/28 PHP
    PHP MYSQL简易交互式站点开发
    2016/12/27 PHP
    PHP实现根据数组的值进行分组的方法
    2017/04/20 PHP
    ThinkPHP 模板引擎使用详解
    2017/05/07 PHP
    PHP面向对象之事务脚本模式(详解)
    2017/06/07 PHP
    用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
    2007/02/23 Javascript
    JavaScript 闭包在封装函数时的简单分析
    2009/11/28 Javascript
    UI Events 用户界面事件
    2012/06/27 Javascript
    JavaScript 实现类的多种方法实例
    2013/05/01 Javascript
    JQuery DataTable删除行后的页面更新利用Ajax解决
    2013/05/17 Javascript
    jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
    2016/01/04 Javascript
    JavaScript中数组添加值和访问值常见问题
    2016/02/06 Javascript
    Node.js 应用跑得更快 10 个技巧
    2016/04/03 Javascript
    jquery实现百叶窗效果
    2017/01/12 Javascript
    D3.js中强制异步文件读取同步的几种方法
    2017/02/06 Javascript
    Vuejs 组件——props数据传递的实例代码
    2017/03/07 Javascript
    Node.js五大应用性能技巧小结(必须收藏)
    2017/08/09 Javascript
    vue proxyTable 接口跨域请求调试的示例
    2017/09/12 Javascript
    vue中如何让子组件修改父组件数据
    2018/06/14 Javascript
    JS使用H5实现图片预览功能
    2019/09/30 Javascript
    原生js实现日期选择插件
    2020/05/21 Javascript
    [20:30]职业巡回赛回顾
    2018/08/09 DOTA
    安装Python的web.py框架并从hello world开始编程
    2015/04/25 Python
    Tornado协程在python2.7如何返回值(实现方法)
    2017/06/22 Python
    使用pycharm生成代码模板的实例
    2018/05/23 Python
    python 计算平均平方误差(MSE)的实例
    2019/06/29 Python
    Python适配器模式代码实现解析
    2019/08/02 Python
    Python Django 命名空间模式的实现
    2019/08/09 Python
    PyTorch: 梯度下降及反向传播的实例详解
    2019/08/20 Python
    Python -m参数原理及使用方法解析
    2020/08/21 Python
    超市实习总结自我鉴定
    2013/09/19 职场文书
    房屋买卖协议书
    2014/04/10 职场文书
    《认识钟表》教学反思
    2016/02/16 职场文书
    使用php的mail()函数实现发送邮件功能
    2021/06/03 PHP