通过实例了解JS执行上下文运行原理

JS执行上下文(execution context)是JS解释器在处理JS代码时,创建的一个对象,用来管理和维护当前代码的执行环境,包括当前作用域内的变量、函数声明、this指向和外部环境等相关信息。本文将通过两条实例,来深入了解JS执行上下文的运行原理。

执行上下文的创建过程

在JS解释器执行JS代码之前,首先会创建一个全局上下文(Global Execution Context),作为根上下文来管理整个JS代码运行期间的执行环境。在执行过程中,如果发现某段JS代码需要开启新的执行上下文,那么JS解释器会根据以下两个步骤,来创建新的执行上下文对象:

  1. 创建阶段

创建新的执行上下文对象时,JS解释器会先为其创建一个空白的执行上下文对象(Execution Context Object)。执行上下文对象通常是一个包含三个属性的对象,分别是变量对象(Variable Object)、作用域链(Scope Chain)和this指向(This Value)。

  1. 执行阶段

创建完成后,JS解释器会解析执行当前上下文中的JS代码,将代码、变量和函数声明等信息,加入到对应的执行上下文中。在此过程中,JS解释器会按照以下步骤进行:

  • 识别变量声明和函数声明:JS解释器会先分析当前上下文中的JS代码,将所有的变量和函数声明保存在当前执行上下文的变量对象中。
  • 建立作用域链:当JS解释器在当前上下文中访问变量或函数时,它会先在当前上下文的变量对象中查找,找不到时,会沿着作用域链依次查找外部环境的变量对象,直到找到为止。
  • 确定this指向:JS解释器在执行上下文中,会识别当前上下文中的this指向,它会根据JS执行环境对this的定义,来确定this指向到哪里。

示例一

考虑以下JS代码:

var a = "Hello";

(function() {
  var b = "JavaScript";

  function inner() {
    console.log(a + " " + b);
  }

  inner();
})();

在执行此代码时,JS解释器会按照如下过程:

  1. 创建全局上下文(Global Execution Context)。
  2. 解析到第一行代码,创建变量a并赋值"Hello",保存在全局上下文的变量对象中。
  3. 程序运行到第3行代码,进入一个新的执行上下文函数(anonymous),JS解释器会创建一个新的执行上下文对象(Execution Context Object)。
  4. (anonymous)的执行上下文中,JS解释器先创建变量b,并将其保存在执行上下文的变量对象中。同时,JS解释器还会将inner函数声明创建并保存在执行上下文的变量对象中。接着,JS解释器会根据作用域链原理,将全局上下文(Global Execution Context)的变量对象添加到当前上下文的作用域链中。
  5. 执行inner函数时,JS解释器会进入inner函数的执行上下文。在此执行上下文中,JS解释器会先在当前执行上下文的变量对象中查找变量ab,找不到时,会沿着作用域链依次查找外部环境的变量对象,直到找到为止。
  6. 执行完inner函数后,JS解释器跳回(anonymous)的执行上下文中,当代码执行完毕后,当前执行上下文被销毁。
  7. 最后,全局上下文(Global Execution Context)随着程序的结束而销毁,JS代码运行结束。

示例二

考虑以下JS代码:

var a = "Global a";
var b = "Global b";

function outer() {
  var a = "Outer a";

  function inner() {
    var b = "Inner b";
    console.log(a + " " + b);
  }

  inner();
}

outer();
console.log(a + " " + b);

在执行此代码时,JS解释器会按照如下过程:

  1. 创建全局上下文(Global Execution Context)。
  2. 解析到第一行代码,创建变量a并赋值"Global a",创建变量b并赋值"Global b",保存在全局上下文的变量对象中。
  3. 程序运行到第6行代码,进入outer函数的执行上下文。在此执行上下文中,JS解释器会先创建变量a,并将其保存在执行上下文的变量对象中。同时,JS解释器还会将inner函数声明创建并保存在执行上下文的变量对象中。接着,JS解释器会根据作用域链原理,将全局上下文(Global Execution Context)的变量对象添加到当前上下文的作用域链中。
  4. 执行inner函数时,JS解释器会进入inner函数的执行上下文。在此执行上下文中,JS解释器会先创建变量b,并将其保存在执行上下文的变量对象中。此时,执行上下文的作用域链为:inner执行上下文对象变量对象 -> outer执行上下文对象变量对象 -> 全局上下文对象变量对象。因此,变量a会沿着作用域链向外查找,从而找到outer函数中的a变量。而变量b则直接从当前执行上下文的变量对象中获取。
  5. 执行完inner函数后,JS解释器跳回outer函数的执行上下文中,当函数执行完毕后,当前执行上下文被销毁。
  6. 执行到最后一行代码时,JS解释器会在全局上下文中查找变量ab,并输出结果。
  7. 最后,全局上下文(Global Execution Context)随着程序的结束而销毁,JS代码运行结束。

通过以上两个示例,我们可以清晰地了解JS执行上下文的创建和运行原理,这对理解JS代码的运行机制,有着非常重要的意义。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:通过实例了解JS执行上下文运行原理 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • JavaScript下申明对象的几种方法小结

    现在为大家详细讲解“JavaScript下申明对象的几种方法小结”。 一、对象的概念 在JavaScript中,对象是一种复合的数据类型。对象可以包含多个属性(键值对),每个属性的值可以是基本类型数据、对象或函数等。对象常常用于描述真实世界中的事物,比如一本书、一个人或一辆汽车等等。 二、申明对象的几种方式 JavaScript中申明对象的方式有多种,下面会…

    JavaScript 2023年5月27日
    00
  • Javascript之String对象详解

    Javascript之String对象详解 String对象简介 String对象是Javascript中的基本对象之一,用来表示字符串类型。在Javascript程序中,经常需要对字符串进行各种处理,使用String对象提供的方法便可轻松实现。 String对象的创建 可以使用字面量、字符串构造函数或toString()函数来创建String对象。 var…

    JavaScript 2023年6月10日
    00
  • js和as的稳定传值问题解决

    下面是 “js和as的稳定传值问题解决”的完整攻略。 问题描述 在从JS向AS3进行通讯时,为了保证数据的正确和稳定传递,需要使用ExternalInterface.call 和 ExternalInterface.addCallback 方法进行数据的传递。但是,在使用过程中,发现有些情况下这些方法并不总是稳定的。 解决方法 为了解决传递数据的稳定性问题,…

    JavaScript 2023年6月11日
    00
  • 深入浅出聊一聊js中的’this’关键字

    当我们在写 JavaScript 代码时,经常会遇到在当前函数作用域内使用 this 关键字的情况。但是,this 关键字在不同的环境下,它所代表的对象不尽相同。在这里,我们将深入浅出的聊一聊 JavaScript 中的 this 关键字,解释它在不同情况下的行为,并提供一些示例说明。 什么是 this 关键字 在 JavaScript 中,this 关键字…

    JavaScript 2023年6月10日
    00
  • 你了解JavaScript的js运行三部曲吗

    当浏览器加载一个包含JavaScript代码的网页时,JavaScript代码的执行流程一般会遵循以下三个步骤: 1. 解析代码 浏览器首先会将包含JavaScript代码的网页进行解析,在这个过程中,会对JavaScript代码进行词法分析和语法分析。 词法分析:JavaScript代码中包含了各种不同类型的词汇单元,例如关键字、标识符、操作符等等,词法分…

    JavaScript 2023年5月18日
    00
  • JavaScript变量or循环中的var和let详解

    下面是JavaScript变量和循环中的var和let的详细攻略。 JavaScript变量 JavaScript中的变量使用var关键字来声明。每个变量都有一个特定的范围,称为作用域。一个变量可用的作用域由声明变量的方式所决定。若没有用var关键字声明变量,会将变量当作全局变量来处理,而这种情况是需要尽量避免的。 var关键字的用法 var关键字用来声明一…

    JavaScript 2023年6月10日
    00
  • javascript数组的内置方法详解

    当然,我非常乐意为您提供关于 “JavaScript 数组的内置方法详解”的完整攻略。 概述 在 JavaScript 中,数组(Array)是一种非常常见的数据类型,具有优秀的灵活性和可扩展性。为了让开发者更加方便的使用和操作数组,JavaScript 内置了众多的数组方法。 在这份攻略中,我将会详细介绍 JavaScript 数组的内置方法,包括数组的创…

    JavaScript 2023年5月27日
    00
  • 分享Javascript中最常用的55个经典小技巧

    分享Javascript中最常用的55个经典小技巧 Javascript是当今最常用的编程语言之一,被广泛应用于Web应用程序、移动应用程序和背后的服务器端。在这里,我们将分享55个最常用的Javascript小技巧,以帮助你在日常编程任务中更高效地使用Javascript。 1. 使用解构语法进行多个变量赋值 在Javascript中,使用解构语法可以一次…

    JavaScript 2023年5月18日
    00
合作推广
合作推广
分享本页
返回顶部