由于ES3与ES6全局上下文有区别,本文将会分别讲述ES3和ES6 各自的上下文对象
先讲的是ES3的, 需要注意的是ES3还不能使用let与const声明变量

一.JavaScript的上下文对象(Execution Context)

1.在JS代码执行前,会先对代码进行预解析,同时会生成一个上下文对象,也就是JS代码的执行环境

二.上下文对象类型

1.全局上下文对象,在代码载入浏览器时生成,在网页关闭后销毁

2.函数上下文对象,在函数调用时生成,在函数调用后销毁

3.Eval函数上下文

三.上下文对象的属性

1. Variable Object

1. VO对象是一个变量对象,当前作用域下的所有声明变量和函数声明都是VO对象的属性

1. VO对象在全局作用域下就是window

1. VO对象在函数作用域下叫做AO,我们不能访问到AO对象

1. [[scope]]

1. [[scope]]中所存储的是执行期上下文对象中VO(AO)的集合,这个集合呈链式链接,我们把这种链式链接叫做作用域链

1. 任何执行上下文时刻的作用域, 都是由作用域链(scope chain)来实现(即函数内部的可访问范围是由scope chain来决定)

1. 在一个函数被定义的时候, 会将它定义时刻的scope chain链接到这个函数对象的[[scope]]属性(可能有些难以理解)

1. 在函数访问变量时,会先在自身中找,如果没有找到会去scope chain 的VO(AO)列表中寻找,直到找到全局的VO对象(这也就是为什么内部函数中可以访问外部函数的变量)

1. this(不会细讲)

this主要由函数的调用方式决定

1. 如果函数的形式调用的话this会指向window(因为全局函数是window对象的属性,也可以看做是window调用方法)

1. 如果以方法的形式调用的话this指向调用该方法的对象

1. 特殊的箭头函数没有this,其this指向上一层作用域的this

四.详解全局上下文和函数上下文

1. 执行环境栈:

1. 什么是执行环境栈: 执行环境栈是代码执行期间用来管理所有上下文对象的数据结构,它是一个后进

先出的栈

1. 执行环境栈执行流程:当进入页面时,代码预解析后,会创建一个全局上下文对象并压入栈中,然后执行

代码,之后每当碰到函数调用时,都会生成一个函数上下文并压入栈中

   var num = 10;function fun() {var num2 = 20;console.log(num2);     }fun();下面是该段代码的执行环境栈工作流程图

本段JS代码在执行前,会先 生成一个上下文对象,并且生成VO对象与确定this(window)的指向,全局上下文中没有[[scope]]属性,在生成上下文对象后,会将其压入到执行环境栈中,此时会有一个指针running指向该上下文,表示当前正在执行的代码是该环境中的,在代码执行到fun()时,会生成一个函数上下文并入栈,并且指针running会指向函数上下文

注意:全局上下文中的VO会将num和fun都当成它的属性,函数上下文中的AO会将num2当做它的属性

当fun函数执行完成后funExectionContext就会被弹出栈,此时函数上下文中的this、scope、AO都会被销毁,并且running指针会重新指向全局上下文,当页面关闭后,全局上下文弹出栈

2.执行上下文的创建:

创建上下文主要就是创建它的三个属性VO/AO、this、scope

VO/AO:会将当前环境下所有的变量和函数都当做VO/AO的属性,AO中还会有形参与arguments

this:根据不同的调用规则,this的指向不同

scope:一个函数的作用域链生成分为定义时,与调用时

1.作用域链的生成

            function fn(){}fn();//当fn函数执行完成后,fn函数的上下文对象会出栈,并且作用域链、AO、this会销毁注意://如果fn内部还嵌套了一个函数,该函数的作用域链中保存着fn函数AO的链接,那么//此时fn函数的AO就不会销毁了(因为AO对象还在被引用),这就形成了闭包,闭包简单来说//就是一个函数内部可以访问另一个函数内部的变量(通过作用域链进行访问),也可以说一个//函数调用完成后,因为它的AO对象仍然在被引用,所以该函数的作用域没有被销毁 //这儿只是简单说了一下闭包,不理解也没有关系,博主后期会更新闭包的相关知识

fn函数定义时:

fn函数调用时,生成VO对象,并且会把fn的AO对象放到作用域链的最顶端

2.上下文生成的代码演示

            console.log(100);var a = 10;function fun(x) {var b = 20;console.log(b);}fun(20);//全局上下文对象         GlobalExecutionContext: {VO:{a:undefined, //使用var声明的变量会先赋值为undefinedfun:fun函数的地址},this:window,}//函数上下文:funExectionContext: {AO:{arguments:{x:20,length:1},b:undefined, //使用var声明的变量会先赋值为undefinedx:20,//形参在AO对象生成时,就已经赋值},this:window,scope:{ //在函数中寻找变量,会先在自身中,如果没有找到,就会去scope中的//父级VO/AO找,直到全局的VOAO(fun)VO(window)}}

需要注意的是在全局上下文VO对象生成后,会把所有的全局内置方法(alert、isNaN)与变量(Infinity)都当成它的属性,比如console对象,所以在函数内部才可以通过作用域链访问到console对象

在上面的代码中会生成4个执行上下文,console.log也会生成,因为它是一个内置函数,所有博主就没有写

3.函数上下文AO对象属性的优先级:

函数> 形参 > 声明变量

        function test(a) {function a() {};var a;console.log(a);//发现是函数}test(10)//此时变量 a 的值是什么?testExecutionContext:{AO:{a:a函数的地址值, //其实在AO寻找函数与声明变量和形参时,发现有同名时a:10,          //会忽略声明变量和形参,同理当变量和形参同名时,会忽略变量 a:undefined,}}

后续会继续更新ES6的上下文对象,ES6和ES3的概念基本相同,只是用的术语不同,如果想要提前了解,可以看参考下的ES6上下文对象详解

参考:

作用域链

JavaScript的执行环境

ES6上下文对象详解