【你不知道的JavaScript】(三)执行上下文及其生命周期

作者 : 开心源码 本文共4106个字,预计阅读时间需要11分钟 发布时间: 2022-05-12 共175人阅读

一、执行上下文概念

JavaScript代码的执行过程分为两个阶段:

  • 代码编译阶段:由编译器完成,将代码翻译成可执行代码
  • 代码执行阶段:由引擎完成,主要任务是执行可执行代码

其中可执行代码分为三种:全局代码函数代码eval代码

有关JavaScript代码的执行过程可查看《【你不知道的JavaScript】(一)作用域与词法作用域》一文。

简单来说,当在代码执行阶段执行到一个函数的时候,就会进行准备工作,这里的“准备工作”,就叫做”执行上下文(EC)”,也叫执行上下文环境,也叫执行环境。

JavaScript代码执行时,会进入不同的执行上下文,而每个执行上下文的组成,基本如下:

当前执行上下文(EC)

二、执行上下文生命周期

当调用一个函数时(激活),一个新的执行上下文就会被创立。而一个执行上下文的生命周期可以分为两个阶段:

  • 创立阶段:在这个阶段中,执行上下文会分别创立变量对象,建立作用域链,以及确定this的指向。
  • 执行阶段:创立完成之后,就会开始执行代码,这个时候,会完成变量赋值,函数引用,以及执行其余代码。

执行上下文生命周期

详细理解执行上下文极为重要,由于其中涉及到了变量对象,作用域链,this等极为重要的概念,它关系到我们能不能真正了解JavaScript,下面我们分别理解几个概念。

(一)变量对象

1. 变量对象的创立过程

(1) 建立arguments对象。检查当前上下文中的参数,建立该对象下的属性与属性值。

(2) 检查当前上下文的函数公告,也就是使用function关键字公告的函数。在变量对象中以函数名建立一个属性,属性值为指向该函数所在内存地址的引用。假如函数名的属性已经存在,那么该属性将会被新的引用所覆盖。

(3) 检查当前上下文中的变量公告,每找到一个变量公告,就在变量对象中以变量名建立一个属性,属性值为undefined假如该变量名的属性已经存在,为了防止同名的函数被修改为undefined,则会直接跳过,原属性值不会被修改

变量对象创立过程

function foo() { console.log('function foo') }var foo = 20;console.log(foo); // 20// ↑以上代码中,变量公告的 foo 遇到函数公告的 foo 会跳过,// 可是为什么最后 foo 的输出结果依然是被覆盖了呢?// 那是由于三条规则仅仅适用于变量对象的创立过程,也就是执行上下文的创立过程。// 而 foo=20 是在执行上下文的执行过程中运行的,输出结果自然会是20。

再来看另外一个例子:

console.log(foo); // ? foo() { console.log('function foo') }function foo() { console.log('function foo') }var foo = 20;// 上栗的执行顺序为// 首先将所有函数公告放入变量对象中function foo() { console.log('function foo') }// 其次将所有变量公告放入变量对象中,// 但是由于foo已经存在同名函数,因而此时会跳过undefined的赋值// var foo = undefined;// 而后开始执行阶段代码的执行console.log(foo); // function foofoo = 20;

2. 变量对象与活动对象

变量对象与活动对象其实都是同一个对象,只是处于执行上下文的不同生命周期。不过只有处于函数调用栈栈顶的执行上下文中的变量对象,才会变成活动对象。

function test() {    console.log(a);    console.log(foo());    var a = 1;    function foo() {        return 2;    }}test();

↑以上代码中,全局作用域中运行test()时,test()的执行上下文开始创立。为了便于了解,我们用如下的形式来表示:

// 创立过程testEC = {    // VO 为 Variable Object的缩写,即变量对象    VO: {        //注:在浏览器的展现中,函数的参数可能并不是放在arguments对象中,        //这里为了方便了解,我做了这样的解决        arguments: {...},          foo: <foo reference>,  // 表示 foo 的地址引用        a: undefined,        this: Window    },    scopeChain: {}}

未进入执行阶段之前,变量对象中的属性都不能访问!但是进入执行阶段之后,变量对象转变为了活动对象,里面的属性都能被访问了,而后开始进行执行阶段的操作。

// 执行阶段VO ->  AO   // Active ObjectAO = {    arguments: {...},    foo: <foo reference>,    a: 1,    this: Window}

因而,上面例子的执行顺序如下:

function test() {    function foo() {        return 2;    }    var a;    console.log(a); // undefined    console.log(foo()); // 2    a = 1;}test();

3. 全局上下文的变量对象

全局上下文有一个特殊的地方,它的变量对象,就是window对象。而这个特殊,在this指向上也同样适用,this也是指向window

除此之外,全局上下文的生命周期,与程序的生命周期一致,只需程序运行不结束,比方关掉浏览器窗口,全局上下文就会一直存在。其余所有的上下文环境,都能直接访问全局上下文的属性。

(二)作用域链

作用域链本质上是一个指向当前环境与上层环境的一系列变量对象的指针列表(它只引用但不实际包含变量对象),作用域链保证了当前执行环境对符合访问权限的变量和函数的有序访问。

var a = 1;             function out() {    var b = 2;    function inner() {        var c = 3;        console.log(a+b+c);    }    inner();          }out();

首先,代码开始运行时就创立了全局上下文环境,接着运行到out()时创立 out函数的执行上下文,最后运行到inner()时创立 inner函数的执行上下文,我们设定他们的变量对象分别为VO(global)VO(out), VO(inner)

我们可以直接用一个数组来表示作用域链,数组的第一项scopeChain[0]为作用域链的最前台,而数组的最后一项,为作用域链的最末端,所有的最末端都为全局变量对象。

  1. 全局的作用域链:因为它只含全局作用域,没有上级,因而它的作用域链只指向本身的全局变量对象。查找标识符时只能从本身的全局变量对象中查找。
// 全局上下文环境globalEC = {    VO: {        out: <out reference>,  // 表示 out 的地址引用        a: undefined    },    scopeChain: [VO(global)], // 作用域链}
  1. 函数out的作用域链:可以引用函数out本身的变量对象以及全局的变量对象。查找标识符时,先在函数out变量对象中寻觅,找不到的话再去上一级全局变量对象查找。
// out 函数的执行上下文outEC = {    VO: {        arguments: {...},        inner: <inner reference>,  // 表示 inner 的地址引用        b: undefined    },    scopeChain: [VO(out), VO(global)], // 作用域链}

函数out作用域链

  1. 函数inner的作用域链:可以引用函数inner本身的变量对象和上一级out函数的变量对象以及全局的变量对象。查找标识符时依次从innerout,全局变量对象中查找。
innerEC = {    VO: {        arguments: {...},          c: undefined,    },  // 变量对象    scopeChain: [VO(inner), VO(out), VO(global)], // 作用域链}

函数inner作用域链

(三)this指向

this的指向比较复杂,后面会单独一篇文章细讲,这里就不多说啦!

三、执行上下文栈

执行上下文可以了解为当前代码的执行环境,JavaScript中的运行环境大概包括三种情况:

  • 全局环境JavaScript代码运行起来会首先进入该环境
  • 函数环境:当函数被调用执行时,会进入当前函数中执行代码
  • eval

在代码开始执行时,首先会产生一个全局执行上下文环境,调用函数时,会产生函数执行上下文环境,函数调用完成后,它的执行上下文环境以及其中的数据都会被销毁,重新回到全局执行环境,网页关闭后全局执行环境也会销毁。其实这是一个压栈出栈的过程,全局上下文环境永远在栈底,而当前正在执行的函数上下文在栈顶

var a = 1;             //1.进入全局上下文环境function out() {    var b = 2;    function inner() {        var c = 3;        console.log(a+b+c);    }    inner();          //3.进入inner函数上下文环境}out(); //2.进入out函数上下文环境

↑以上代码的执行会经历以下过程:

  1. 当代码开始执行时就创立全局执行上下文环境,全局上下文入栈
  2. 全局上下文入栈后,其中的代码开始执行,进行赋值、函数调用等操作,执行到out()时,激活函数out创立自己的执行上下文环境,out函数上下文入栈
  3. out函数上下文入栈后,其中的代码开始执行,进行赋值、函数调用等操作,执行到inner()时,激活函数inner创立自己的执行上下文环境,inner函数上下文入栈
  4. inner函数上下文入栈后,其中的代码开始执行,进行赋值、函数调用、打印等操作,因为里面没有可以生成其余执行上下文的需要,所有代码执行完毕后,inner函数上下文出栈
  5. inner函数上下文出栈,又回到了out函数执行上下文环境,接着执行out函数中后面剩下的代码,因为后面没有可以生成其余执行上下文的需要,所有代码执行完毕后,out函数上下文出栈
  6. out函数上下文出栈后,又回到了全局执行上下文环境,直到浏览器窗口关闭,全局上下文出栈

执行上下文入栈出栈的全过程

我们可以得到少量结论:

  • 全局上下文在代码开始执行时就创立,只有唯一的一个,永远在栈底,浏览器窗口关闭时出栈
  • 函数被调用的时候创立上下文环境
  • 只有栈顶的上下文处于活动状态,执行其中的代码

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 【你不知道的JavaScript】(三)执行上下文及其生命周期

发表回复