通过实例了解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 this用法小结

    当在JavaScript中调用函数时,常常使用this关键字来指向当前正在调用的函数。但this实际上有不同的使用方式,本篇文章将会对这些用法进行总结和说明。 1. 函数调用 当在函数内部直接使用this时,它将指向全局对象(浏览器中的window对象)。 function foo() { console.log(this); // window } foo…

    JavaScript 2023年5月18日
    00
  • JS实现拖拽的方法分析

    JS实现拖拽的方法分析 在Web开发中,拖拽是一种常见的交互方式。本文将介绍三种实现拖拽的方法。 HTML5 Drag and Drop API HTML5 Drag and Drop API是现代浏览器提供的原生拖拽功能,不需要引入任何第三方库。该API包含五个事件和三个属性,可以通过设置这些事件和属性来实现拖拽功能。 使用方法 将要拖拽的元素添加drag…

    JavaScript 2023年5月27日
    00
  • JavaScript cookie与session的使用及区别深入探究

    JavaScript Cookie与Session的使用及区别深入探究 概述 Web开发中,常常需要在用户与服务器之间保持状态,以便实现个性化的体验。在前后端分离的现代Web开发中,我们往往会在JavaScript中使用Cookie或Session来实现状态保持。而Cookie和Session虽然实现的目的相同,但它们的细节和机制存在很大的差异。在本文中,我…

    JavaScript 2023年6月11日
    00
  • 原生js的ajax和解决跨域的jsonp(实例讲解)

    关于原生JS的AJAX和JSONP的介绍和实例讲解,我将从以下三个部分来进行详细解答。 AJAX的介绍和使用方法 AJAX全称为Asynchronous JavaScript and XML(异步的JavaScript和XML),是一种前端常用数据交换技术,能够实现页面异步刷新,避免了页面重新刷新的效果,减轻服务器对请求的压力。使用AJAX技术可以更好的优化…

    JavaScript 2023年5月27日
    00
  • 深入解析Javascript闭包的功能及实现方法

    深入解析Javascript闭包的功能及实现方法 什么是闭包 闭包指的是那些能够访问自由变量的函数。换句话说,这些函数在定义时的环境和执行时的环境不同。通常情况下,函数被定义在一个环境中,然后在另一个环境中被执行。这种函数在执行时,可访问定义时环境中的变量,即使定义环境已经不存在了,但是这些变量仍然可以被访问,这就是闭包的特性。 闭包的功能 闭包的主要功能是…

    JavaScript 2023年6月10日
    00
  • JavaScript遍历查找数组中最大值与最小值的方法示例

    下面是针对 JavaScript 遍历查找数组中最大值与最小值的方法的详细攻略。 算法原理 以下是查找数组中最大值与最小值的算法原理: 初始化最大值和最小值,将最大值和最小值分别设置为数组的第一个元素的值。 使用循环遍历数组。 在循环时,判断数组中的当前元素是否大于最大值,如果是,则将最大值设为当前元素的值。 在循环时,判断数组中的当前元素是否小于最小值,如…

    JavaScript 2023年5月28日
    00
  • javascript 出生日期和身份证判断大全

    Javascript 出生日期和身份证判断大全 简介 本文主要讲解了如何使用Javascript判断身份证号和出生日期是否符合标准。 身份证号判断 校验规则 中国大陆的身份证号码是由18位数字组成的。最后一位为校验位,前17位为身份证号码的主体部分。其中,第1-2位为行政区划代码,第3-6位为出生年份(用4位数字表示),第7-10位为出生月份和日期(用2位数…

    JavaScript 2023年5月27日
    00
  • three.js实现炫酷的全景3D重力感应

    下面我会详细讲解three.js实现炫酷的全景3D重力感应的完整攻略,包含以下步骤: 一、引入three.js库 为了使用three.js库来实现我们的效果,我们需要在HTML页面中先引入three.js库的JavaScript文件,通常有两种方式: 直接下载three.js文件并嵌入 <script src="path/to/three.j…

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