第一步. 定义后:每个已定义函数,都有一个内在属性[scope],其对应一个对象的列表,列表中的对象仅能内部访问。

例如:建立一个全局函数A,那么A的[Scope]内部属性中只包含一个全局对象(Global Object),而如果我们在A中创建一个新的函数B,那么B的[Scope]属性中就包含两个对象,函数A的Activation Object(活动对象)对象在前面,全局对象(Global Object)排在后面。

简而言之,一个函数的[Scope]属性中对象列表的顺序是上一层函数的Activation Object对象,然后是上上层的,一直到最外层的全局对象。

第二步.执行时:当一个函数被执行的时候,会自动创建一个可以执行的对象(Execution Object),并同时绑定一个作用域链(Scope Chain)。作用域链会通过下面两个步骤来建立,用于进行标识符解析。

1,首先,将函数对象[Scope]内部属性中的对象,按顺序复制到作用域链Scope Chain中。 
2,其次,在函数执行时,会创建一个新的Activation Object对象,这个对象中包含了this、参数(arguments)、局部变量(包括命名的参数)的定义,这个Activation Object对象会被置于作用域链的最前面。 
所以在Scope Chain中最后顺序是本函数的Activation Object,然后是上层函数的Activation Object,再上上层的Activation Object,一直到Global Object。 (如果在此方法内部定义一个函数,那么该函数的Scope就等于于Execution Object当中的Scope Chain)

假如声明一个全局方法Add

            function Add() {
var a = "test"
}

那么Add的scope(作用域链) 当中只有一个(Global Object)对象,这就是为什么在add当中可以使用Global Object对象当中的属性或者方法

那么在执行Add方法的时候,执行此函数时会创建一个称为“运行期上下文(execution context)”的内部对象,运行期上下文定义了函数执行时的环境。每个运行期上下文都有自己的作用域链,用于标识符解析,当运行期上下文被创建时,而它的作用域链初始化为当前运行函数的[[Scope]]所包含的对象。

即(execution context).Scope Chain = 该函数的Scope (红色1)

接下来会创建一个新的Activation Object对象,这个对象中包含了this、参数(arguments)、局部变量(包括命名的参数)的定义,这个Activation Object对象会被置于作用域链的最前面。

这样一个函数的运行期作用域链就形成了。那么如果在add方法内部在声明一个方法 比如

            function add() {
var a = "test"
function sum() {
}
}

那么 sum的 Scope 就等于 add“运行期上下文(execution context)”对象的Scope Chain

当执行js代码的过程中,遇到一个标识符,就会根据标识符的名称,在执行上下文(Execution Context)的作用域链中进行搜索。从作用域链的第一个对象(该函数的Activation Object对象)开始,如果没有找到,就搜索作用域链中的下一个对象,如此往复,直到找到了标识符的定义。如果在搜索完作用域中的最后一个对象,也就是全局对象(Global Object)以后也没有找到,则会抛出一个错误,提示undefined。

由此而来的建议:

1. 尽量使用局部变量,这不仅仅是涉及到私有属性的问题,局部的变量从以上过程中可以看到,能够减少搜索的时间(注:在一般的情况下,不包括浏览器的优化行为)。

2. 避免使用with语句。因为它会修改执行上下文(Execution Context)的作用域链,在最前面添加一个对象(Variable Object)。同理,对于try-catch语句中的catch语句块也类似。

JavaScript 深入理解作用域链的更多相关文章

  1. 理解JavaScript中的作用域链

    理解了作用域链,闭包就不难理解了,所以本文主要谈一谈我对作用域链的理解.   关于JavaScript中变量的作用域,全局变量在程序中始终都有定义.局部变量在声明它的函数体内以及其内部所嵌套的函数内始 ...

  2. javascript的关键所在---作用域链

    javascript的关键所在---作用域链 javascript里的作用域是理解javascript语言的关键所在,正确使用作用域原理才能写出高效的javascript代码,很多javascript ...

  3. javascript深入理解--作用域,作用域链,闭包的面试题解

    一.概要 作用域和作用域链是js中非常重要的特性,关系到理解整个js体系,闭包是对作用域的延伸,其他语言也有闭包的特性. 那什么是作用域?作用域指的是一个变量和函数的作用范围. 1.js中函数内声明的 ...

  4. javascript闭包和作用域链

    最近在学习前端知识,看到javascript闭包这里总是云里雾里.于是翻阅了好多资料记录下来本人对闭包的理解. 首先,什么是闭包?看了各位大牛的定义和描述各式各样,我个人认为最容易一种说法: 外部函数 ...

  5. javascript笔记:javascript的关键所在---作用域链

    javascript里的作用域是理解javascript语言的关键所在,正确使用作用域原理才能写出高效的javascript代码,很多javascript技巧也是围绕作用域进行的,今天我要总结一下关于 ...

  6. [译]JavaScript:函数的作用域链

    原文:http://blogs.msdn.com/b/jscript/archive/2007/07/26/scope-chain-of-jscript-functions.aspx 在JavaScr ...

  7. 认识javascript范围和作用域链

    范围 作用域就是变量和函数的可訪问范围.控制着变量和函数的可见性与生命周期,在JavaScript中变量的作用域有全局作用域和局部作用域. 全局和局部作用域以下用一张图来解释: 单纯的JavaScri ...

  8. JavaScript深入之作用域链

    前言 在 <javascript深入之执行上下文栈> 中讲到,当javascript代码执行一段可执行代码(executable code)时,会创建对应的执行上下文(execution ...

  9. JavaScript面向对象的作用域链(转载)

    JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕... 一.“JavaScript中无块级作用域” 在Java或C# ...

随机推荐

  1. HDUOJ ---1423 Greatest Common Increasing Subsequence(LCS)

    Greatest Common Increasing Subsequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536 ...

  2. MongoDB Windows环境安装及配置[转]

    MongoDB一般安装 1.首先到官网(http://www.mongodb.org/downloads )下载合适的安装包,目前的最新版本为2.6 安装包有zip和msi格式的,这里推荐下载zip格 ...

  3. Oracle分组函数以及数据分组

    简单总结一下对于数据的分组和分组函数. 本文所举实例,数据来源oracle用户scott下的emp,dept ,salgrade 3表:数据如下: 一.分组函数 1.sum()求和函数.max()求最 ...

  4. HDU 5402(Travelling Salesman Problem-构造矩阵对角最长不相交路径)

    Travelling Salesman Problem Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 65536/65536 K (J ...

  5. Python islower() 方法

    描述 Python islower() 方法检测字符串是否由小写字母组成. 相反的方法:isupper() 方法. 语法 islower() 方法语法: S.islower() 参数 无. 返回值 如 ...

  6. 使用Htmlhelper,创建文本框TextBox

    下面通过HtmlHelper帮助类,创建文本框. 首先新建一个实体类,做为下面的例子: using System; using System.Collections.Generic; using Sy ...

  7. AGPS定位基本机制

    http://www.cnblogs.com/magicboy110/archive/2010/12/12/1903927.html 位置服务已经成为越来越热的一门技术,也将成为以后所有移动设备(智能 ...

  8. starUML破解方法(Windows10 & MAC)

    安装好,打开安装目录,依次找到[www\license\node],找到名为[LicenseManagerDomain]的js文件,打开它,在第25行位置插入以下几句代码: return { name ...

  9. Yii2 mongodb 扩展的where的条件加入大于小于号浅析(转)

    1. mongodb的where中有比较丰富的 条件,如下: static $builders = [ 'NOT' => 'buildNotCondition', 'AND' => 'bu ...

  10. 使用 powerdesigner 将数据库表结构逆向工程生成对应的word文档

    本机系统win10 + mysql 5.7.17 + powerDesigner 16.5 + mysql-connector-odbc-5.3.9-winx32.msi 1 使用 PowerDesi ...