Js执行过程

	如果一个文档中存在多个代码段
步骤一:读入第一个代码段(js引擎并非一行一行执行,而是一段一段分析执行)
步骤二:做词法分析和语法分析,有错则报语法错误(比如括号不匹配等),并跳转到步骤5
步骤三:对【var】变量和【function】定义做“预解析“(永远不会报错的,因为只解析正确的声明)
步骤四:执行代码段 ,有错则报错(比如变量未定义)
步骤五:如果还有下一代码段,则读入下一代码段,重复步骤二
步骤六:结束

通过步骤二 js会先生成一个语法分析树(SyntaxTree)

语法分析树可以理解为 记录 变量集 作用域集 方法集的  数据库一样的东西。

/**
* 模拟建立一棵语法分析树,存储function内的变量和方法
*/ var SytaxTree = { window={
variables:{
name:{value:'HEBO'} //假设我们全局变量中有一个name
},
functions:{
sayName:this.sayName
}
},
sayName:{
scope:this.window,
function:{}
}
} //在这一步的时候 变量集中 只有变量定义,没有变量值,这时候的变量值全部为“undefined”
//

词法作用域: 变量在定义的时候形成作用域,而不是在执行的时候。

在进入上下文时声明,在执行上下文赋值

function test(){

   var a =0;   //定义的时候决定了作用域

}

console.log(a); // a is not defined

执行环境与活动对象

我们调用每一个方法的时候,JS 引擎都会自动为其建立一个执行环境和一个活动对象,它们和方法实例的生命周期保持一致,为方法执行提供必要的执行支持

执行环境ExecutionContext: 记录了当前方法的外部描述信息,比如类型,名称,参数和活动对象(activeObject)

var ExecutionContext = {
window: {
type: "global",
name: "global",
body: ActiveObject.window
}, a:{              //记录了a方法的 一些执行上下文信息
type: "function",
name: "a",
body: ActiveObject.a, //指向当前方法的活动对象
scopeChain: this.window.body //作用域链 它指向的是 对应方法的活动对象 ,既window.body(ActiveObject.window ) 变量查找就是跟着这条链条查找的
}
};

在执行的时候才生成活动对象 ,活动对象的 北部变量集、内嵌函数集是从 语法分析树 复制过来的

活动对象ActiveObject: 记录了当前方法的内部描述信息,内部变量集(variables)、内嵌函数集(functions)、实参(arguments)、作用域链(scopeChain)等执行所需信息

var ActiveObject={

       window:{},

       a:{                       //这里的a 对应上文的 ActiveObject.a
variables:{
x: {value:4}
},
functions:{
b: SyntaxTree.b
},
parameters:{ //形参         },
      arguments:[] //实参
}
}

一个方法的执行过程:

  1. 创建活动对象,从语法分析树复制方法的内部变量集(variables)和内嵌函数集(functions)
  2. 方法开始执行时: 活动对象- 内部的变量全部被重置为undefined 。
  3. 创建形参(parameters)和实参(arguments)对象,同名的实参,形参和变量之间是【引用】关系
  4. 执行方法内的赋值语句 : 内部的变量才会被赋值 。
  5. 变量查找规则: 现在当前的ActiveObject查找,找不到 则顺着 scopeChain 指向的活动对象 继续,直到找到最顶点 ActiveObject.window
  6. 方法执行完毕以后:内部变量不会被重置
  7. 方法内变量的生存周期取决于方法实例是否存在活动引用,如没有就销毁活动对象

6.7 是使闭包能够访问到外部变量的根本原因

js执行环境相关的更多相关文章

  1. 在ASP.NET Core应用中如何设置和获取与执行环境相关的信息?

    HostingEnvironment是承载应用当前执行环境的描述,它是对所有实现了IHostingEnvironment接口的所有类型以及对应对象的统称.如下面的代码片段所示,一个HostingEnv ...

  2. js执行环境、作用域

    js执行环境.作用域 执行环境:是javascript中的一个重要的概念,<javascript高级程序设计第三版>的定义是:执行环境定义了变量或函数有权访问的其他数据,决定了他们各自的行 ...

  3. 【repost】 原生JS执行环境与作用域深入理解

    首先,我们要知道执行环境和作用域是两个完全不同的概念. 函数的每次调用都有与之紧密相关的作用域和执行环境.从根本上来说,作用域是基于函数的,而执行环境是基于对象的(例如:全局执行环境即window对象 ...

  4. JS 执行环境与作用域链

    1.执行环境 JavaScript 代码都是在执行环境中被执行的.执行环境是一个概念,一种机制,用来完成JavaScript运行时在作用域.生命周期等方面的处理,它定义了变量或函数是否有权访问其他数据 ...

  5. 浅谈JS执行环境及作用域

     今天刚刚开通博客,也是第一次写博文,略感紧张.作为一个表达能力弱弱的人来说,自己花三分钟理解一个知识点,当别人问起时,也许需要30分钟才只是让别人知道自己在说什么,一点也不夸张,希望在博客上可以练习 ...

  6. js执行环境深入研究

    js 声明函数是创建函数对象的过程,当创建函数对象时,函数对象的[[scope]] =连当前执行环境对象的作用域(栈顶执行环境--当执行函数时,js会将该函数的执行环境对象入栈) 当为全局函数时,如: ...

  7. JS执行环境,作用域链及非块状作用域

    JS中的执行环境,顾名思义就是变量或函数所执行时的环境.在我的理解中,执行环境和作用域相差不大. 每个函数都有自己的执行环境,当执行流进入一个函数时,函数的环境就会被推入一个环境栈中.而在函数执行之后 ...

  8. js执行环境的深入理解

    第一个例子中 :之所以每个函数都返回不同的值的原因 有2点 (简写如下文) 就是[SCOPE]内部属性,函数可能拥有相同的父作用域时,多个函数引用同一个[SCOPE]属性,所以return i的值还是 ...

  9. js执行环境的周边概念

    一.熟悉几个名词: 1.执行环境(execution context),也叫执行上下文,每个函数都会有自己的执行环境:当浏览器首次加载脚本时,他将默认进入全局执行环境:如果接下来要调用一个内部函数,则 ...

随机推荐

  1. Generator & Co

    Generator 搬运自 http://es6.ruanyifeng.com/#docs/generator 如果没有babel等环境也可以在线体验 可以在http://www.es6fiddle. ...

  2. JavaScript和php常用语法——切割字符串

    在面向Web的应用中,前台和后台通信非常常用的一种格式就是字符串,所以,在通信中,我们不可避免的就需要进行字符串的拼切. 在js代码中,当我们传递一个字符串到后台代码时,我们在后台需要对字符串进行切割 ...

  3. 转: HTML5新特性之Mutation Observer

    转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...

  4. 正版Win7永不崩溃的秘密 解密系统备份!

    备份正版Win7系统 打开Win7系统的控制面板,进入“备份和还原”选项,即可要使用正版Win7系统的备份还原功能. 进入Win7“备份和还原”功能 点击“设置备份”,即可启动Windows 备份程序 ...

  5. 2014第16周三CSS布局再学习摘录

    今天尝试写了下前端页面,费了不少时间,做出的结果仍然惨不忍睹,感觉很简单的几个页面,在现有框架多个样式混杂下就是感觉很不自在随意,晚上回来又看了些div+css方面的基础知识. 1.CSS的class ...

  6. Coursera机器学习课程(2016 )错题集

    Unit 4 Neural Networks (×) 分析:估计D项错误,因为神经网络在处理逻辑运算的时候是range(0,1),但是处理别的运算的时候就不是这个范围了 (√) (对) week 6 ...

  7. redsocks 设置全局代理

    分享一下我的经验, http://lilydjwg.is-programmer.com/2014/2/7/linux-really-global-http-proxy.42701.html 1. 优点 ...

  8. 面向对象程序设计-C++_课时30运算符重载——基本规则_课时31运算符重载——原型_课时32运算符重载——赋值_课时33运算符重载——类型转换

    区分初始化,赋值 #include <iostream> using namespace std; class Fi { public: Fi() {}//1构造函数 }; class F ...

  9. 编程之美之数独求解器的C++实现方法

    编程之美的第一章的第15节.讲的是构造数独.一開始拿到这个问题的确没有思路, 只是看了书中的介绍之后, 发现原来这个的求解思路和N皇后问题是一致的. 可是不知道为啥,反正一開始确实没有想到这个回溯法. ...

  10. Android 常用开发类库

    android.app :提供高层的程序模型.提供基本的运行环境    android.content :包含各种的对设备上的数据进行访问和发布的类    android.database :通过内容 ...