avaScript 在运行过程中与其他语言有所不一样，如果不理解 JavaScript 的词法环境、执行上下文等内容，很容易会在开发过程中产生 Bug，比如this指向和预期不一致、某个变量不知道为什么被改了，等等。所以今天我们就来聊一聊 JavaScript 代码的运行过程。

大家都知道，JavaScript 代码是需要在 JavaScript 引擎中运行的。我们在说到 JavaScript 运行的时候，常常会提到执行环境、词法环境、作用域、执行上下文、闭包等内容。这些概念看起来都差不多，却好像又不大容易区分清楚，它们分别都在描述什么呢？

这些词语都是与 JavaScript 引擎执行代码的过程有关，为了搞清楚这些概念之间的区别，我们可以回顾下 JavaScript 代码运行过程中的各个阶段。

JavaScript 代码运行的各个阶段

JavaScript 是弱类型语言，在运行时才能确定变量类型。JavaScript 引擎在执行 JavaScript 代码时，也会从上到下进行词法分析、语法分析、语义分析等处理，并在代码解析完成后生成 AST（抽象语法树），最终根据 AST 生成 CPU 可以执行的机器码并执行。

这个过程，我们称之为语法分析阶段。除了语法分析阶段，JavaScript 引擎在执行代码时还会进行其他的处理。以 V8 引擎为例，在 V8 引擎中 JavaScript 代码的运行过程主要分成三个阶段。

0. 语法分析阶段。该阶段会对代码进行语法分析，检查是否有语法错误（SyntaxError），如果发现语法错误，会在控制台抛出异常并终止执行。

2. 编译阶段。该阶段会进行执行上下文（Execution Context）的创建，包括创建变量对象、建立作用域链、确定 this 的指向等。每进入一个不同的运行环境时，V8 引擎都会创建一个新的执行上下文。
3. 执行阶段。将编译阶段中创建的执行上下文压入调用栈，并成为正在运行的执行上下文，代码执行结束后，将其弹出调用栈。

其中，语法分析阶段属于编译器通用内容，就不再赘述。前面提到的执行环境、词法环境、作用域、执行上下文等内容都是在编译和执行阶段中产生的概念。

执行上下文的创建

执行上下文的创建离不开 JavaScript 的运行环境，JavaScript 运行环境包括全局环境、函数环境和eval，其中全局环境和函数环境的创建过程如下：

0. 第一次载入 JavaScript 代码时，首先会创建一个全局环境。全局环境位于最外层，直到应用程序退出后（例如关闭浏览器和网页）才会被销毁。
1. 每个函数都有自己的运行环境，当函数被调用时，则会进入该函数的运行环境。当该环境中的代码被全部执行完毕后，该环境会被销毁。不同的函数运行环境不一样，即使是同一个函数，在被多次调用时也会创建多个不同的函数环境。

在不同的运行环境中，变量和函数可访问的其他数据范围不同，环境的行为（比如创建和销毁）也有所区别。而每进入一个不同的运行环境时，JavaScript 都会创建一个新的执行上下文，该过程包括：

• 建立作用域链（Scope Chain）；
• 创建变量对象（Variable Object，简称 VO）；
• 确定 this 的指向。

由于建立作用域链过程中会涉及变量对象的概念，因此我们先来看看变量对象的创建，再看建立作用域链和确定 this 的指向。

创建变量对象

变量对象(VO)

每个执行上下文都会有一个关联的变量对象，该对象上会保存这个上下文中定义的所有变量和函数。

在浏览器中，全局环境的变量对象是window对象，因此所有的全局变量和函数都是作为window对象的属性和方法创建的。相应的，在 Node 中全局环境的变量对象则是global对象。

创建VO的过程

创建变量对象将会创建arguments对象（仅函数环境下），同时会检查当前上下文的函数声明和变量声明。

• 对于变量声明：此时会给变量分配内存，并将其初始化为undefined（该过程只进行定义声明，执行阶段才执行赋值语句）。
• 对于函数声明：此时会在内存里创建函数对象，并且直接初始化为该函数对象。

变量声明和函数声明的处理过程，便是我们常说的变量提升和函数提升，其中函数声明提升会优先于变量声明提升。因为变量提升容易带来变量在预期外被覆盖掉的问题，同时还可能导致本应该被销毁的变量没有被销毁等情况。因此 ES6 中引入了let和const关键字，从而使 JavaScript 也拥有了块级作用域。

作用域

在各类编程语言中，作用域分为静态作用域和动态作用域。JavaScript 采用的是词法作用域（Lexical Scoping），也就是静态作用域。词法作用域中的变量，在编译过程中会产生一个确定的作用域。

词法作用域中的变量，在编译过程中会产生一个确定的作用域，这个作用域即当前的执行上下文，在 ES5 后我们使用词法环境（Lexical Environment）替代作用域来描述该执行上下文。因此，词法环境可理解为我们常说的作用域，同样也指当前的执行上下文（注意，是当前的执行上下文）。

在 JavaScript 中，词法环境又分为词法环境（Lexical Environment）和变量环境（Variable Environment）两种，其中：

• 变量环境用来记录var/function等变量声明；
• 词法环境是用来记录let/const/class等变量声明。

也就是说，创建变量过程中会进行函数提升和变量提升，JavaScript 会通过词法环境来记录函数和变量声明。通过使用两个词法环境（而不是一个）分别记录不同的变量声明内容，JavaScript 实现了支持块级作用域的同时，不影响原有的变量声明和函数声明。

这就是创建变量的过程，它属于执行上下文创建中的一环。创建变量的过程会产生作用域，作用域也被称为词法环境。

建立作用域链

作用域链，就是将各个作用域通过某种方式连接在一起。作用域就是词法环境，而词法环境由两个成员组成。

0. 环境记录（Environment Record）：用于记录自身词法环境中的变量对象。
1. 外部词法环境引用（Outer Lexical Environment）：记录外层词法环境的引用。

通过外部词法环境的引用，作用域可以层层拓展，建立起从里到外延伸的一条作用域链。当某个变量无法在自身词法环境记录中找到时，可以根据外部词法环境引用向外层进行寻找，直到最外层的词法环境中外部词法环境引用为null，这便是作用域链的变量查询。

JavaScript 代码运行过程分为定义期和执行期，前面提到的编译阶段则属于定义期，代码示例如下：

function foo() { // 定义全局函数foo
    console.dir(bar);
    var a=1;
    function bar() { // 在foo函数内部定义函数bar
        a=2;
 }
}
console.dir(foo);
foo();

前面我们说到，JavaScript 使用的是静态作用域，因此函数的作用域在定义期已经决定了。在上面的例子中，全局函数foo创建了一个foo的[[scope]]属性，包含了全局[[scope]]：

foo[[scope]]=[globalContext];

而当我们执行foo()时，也会分别进入foo函数的定义期和执行期。

在foo函数的定义期时，函数bar的[[scope]]将会包含全局[[scope]]和foo的[[scope]]：

bar[[scope]]=[fooContext, globalContext];

运行上述代码，我们可以在控制台看到符合预期的输出：

可以看到：

• foo的[[scope]]属性包含了全局[[scope]]
• bar的[[scope]]将会包含全局[[scope]]和foo的[[scope]]
• 
  

也就是说，JavaScript 会通过外部词法环境引用来创建变量对象的一个作用域链，从而保证对执行环境有权访问的变量和函数的有序访问。除了创建作用域链之外，在这个过程中还会对创建的变量对象做一些处理。

在编译阶段会进行变量对象（VO）的创建，该过程会进行函数声明和变量声明，这时候变量的值被初始化为 undefined。在代码进入执行阶段之后，JavaScript 会对变量进行赋值，此时变量对象会转为活动对象（Active Object，简称 AO），转换后的活动对象才可被访问，这就是 VO -> AO 的过程，示例如下：

function foo(a) {
    var b=2; 
    function c() {}
    var d=function() {};
}


foo(1);

在执行foo(1)时，首先进入定义期，此时：

• 参数变量a的值为1
• 变量b和d初始化为undefined
• 函数c创建函数并初始化

AO={
 arguments: {
  0: 1,
  length: 1
 },
 a: 1,
 b: undefined,
 c: reference to function() c() {}
 d:undefined
}

前面我们也有提到，进入执行期之后，会执行赋值语句进行赋值，此时变量b和d会被赋值为 2 和函数表达式：

AO={
   arguments: {
    0: 1,
    length: 1
  },
  a: 1,
  b: 2,
  c: reference to function c(){},
  d: reference to FunctionExpression "d"
}

这就是 VO -> AO 过程。

• 在定义期（编译阶段）：该对象值仍为undefined，且处于不可访问的状态。
• 进入执行期（执行阶段）：VO 被激活，其中变量属性会进行赋值。

实际上在执行的时候，除了 VO 被激活，活动对象还会添加函数执行时传入的参数和arguments这个特殊对象，因此 AO 和 VO 的关系可以用以下关系来表达：

AO=VO + function parameters + arguments

现在，我们知道作用域链是在进入代码的执行阶段时，通过外部词法环境引用来创建的。总结如下：

• 在编译阶段，JavaScript 在创建执行上下文的时候会先创建变量对象（VO）；
• 在执行阶段，变量对象（VO）被激活为活动对象（ AO），函数内部的变量对象通过外部词法环境的引用创建作用域链。

通过作用域链，我们可以在函数内部可以直接读取外部以及全局变量，但外部环境是无法访问内部函数里的变量。示例如下：

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

我们在全局环境下无法访问函数foo中的变量a，这是因为全局函数的作用域链里，不含有函数foo内的作用域。

如果我们想要访问内部函数的变量，可以通过函数foo中的函数bar返回变量a，并将函数bar返回，这样我们在全局环境中也可以通过调用函数foo返回的函数bar，来访问变量a：

function foo() {
  var a=1;
  function bar() {
    return a;
  }
  return bar;
}
var b=foo();
console.log(b()); // 1

当函数执行结束之后，执行期上下文将被销毁，其中包括作用域链和激活对象。

在上面的实例中；当b()执行时，foo函数上下文包括作用域都已经被销毁了，但是foo作用域下的a依然可以被访问到；这是因为bar函数引用了foo函数变量对象中的值，此时即使创建bar函数的foo函数执行上下文被销毁了，但它的变量对象依然会保留在 JavaScript 内存中，bar函数依然可以通过bar函数的作用域链找到它，并进行访问。这就是闭包；

闭包使得我们可以从外部读取局部变量，常见的用途包括：

0. 用于从外部读取其他函数内部变量的函数；
1. 可以使用闭包来模拟私有方法；
2. 让这些变量的值始终保持在内存中。

注意，在使用闭包的时候，需要及时清理不再使用到的变量，否则可能导致内存泄漏问题。

确定 this 的指向

在 JavaScript 中，this指向执行当前代码对象的所有者，可简单理解为this指向最后调用当前代码的那个对象。

根据 JavaScript 中函数的调用方式不同，this的指向分为以下情况。

0. 在全局环境中，this指向全局对象（在浏览器中为window）
1. 在函数内部，this的值取决于函数被调用的方式
2. 函数作为对象的方法被调用，this指向调用这个方法的对象
3. 函数用作构造函数时（使用new关键字），它的this被绑定到正在构造的新对象
4. 在类的构造函数中，this是一个常规对象，类中所有非静态的方法都会被添加到this的原型中
5. 在箭头函数中，this指向它被创建时的环境
6. 使用apply、call、bind等方式调用：根据 API 不同，可切换函数执行的上下文环境，即this绑定的对象

可以看到，this在不同的情况下会有不同的指向，在 ES6 箭头函数还没出现之前，为了能正确获取某个运行环境下this对象，我们常常会使用以下代码：

var that=this;
var self=this;

这样的代码将变量分配给this，便于使用。但是降低了代码可读性，不推荐使用，通过正确使用箭头函数，我们可以更好地管理作用域。

总结

今天我们了解了 JavaScript 代码的运行过程，该过程分为语法分析阶段、编译阶段、执行阶段三个阶段。

在编译阶段，JavaScript会进行执行上下文的创建，在执行阶段，变量对象（VO）会被激活为活动对象（AO），变量会进行赋值，此时活动对象才可被访问。在执行结束之后，作用域链和活动对象均被销毁，使用闭包可使活动对象依然被保留在内存中。这就是 JavaScript 代码的运行过程。

这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

我们总是先扬起尘土

然后抱怨自己看不见

- 2024.04.17 -

JavaScript是一种轻量级的编程语言，通常用于网页开发，以增强用户界面的交互性和动态性。然而在HTML中，有多种方法可以嵌入和使用JavaScript代码。

本文就带大家深入了解如何在HTML中使用JavaScript。

一、使用 script 标签

要在HTML中使用JavaScript，我们需要使用<script>标签。这个标签可以放在<head>或<body>部分，但通常我们会将其放在<body>部分的底部，以确保在执行JavaScript代码时，HTML文档已经完全加载。

使用 <script> 标签有两种方式：直接在页面中嵌入 JavaScript 代码和包含外部 JavaScript 文件。

包含在 <script> 标签内的 JavaScript 代码在浏览器总按照从上至下的顺序依次解释。

所有 <script> 标签都会按照他们在 HTML 中出现的先后顺序依次被解析。

HTML 为 <script> 定义了几个属性：

1）async：可选。表示应该立即下载脚本，但不妨碍页面中其他操作。该功能只对外部 JavaScript 文件有效。

如果给一个外部引入的js文件设置了这个属性，那页面在解析代码的时候遇到这个<script>的时候，一边下载该脚本文件，一边异步加载页面其他内容。

2）defer：可选。表示脚本可以延迟到整个页面完全被解析和显示之后再执行。该属性只对外部 JavaScript 文件有效。

3）src：可选。表示包含要执行代码的外部文件。

4）type：可选。表示编写代码使用的脚本语言的内容类型，目前在客户端，type 属性值一般使用 text/javascript。不过这个属性并不是必需的，如果没有指定这个属性，则其默认值仍为text/javascript。

1.1 直接在页面中嵌入JavaScript代码

内部JavaScript是将JavaScript代码放在HTML文档的<script>标签中。这样可以将JavaScript代码与HTML代码分离，使结构更清晰，易于维护。

在使用<script>元素嵌入JavaScript代码时，只须为<script>指定type属性。然后，像下面这样把JavaScript代码直接放在元素内部即可：

<script type="text/javascript">
function sayHi(){
alert("Hi!");
}
</script>

如果没有指定script属性，则其默认值为text/javascript。

包含在<script>元素内部的JavaScript代码将被从上至下依次解释。在解释器对<script>元素内部的所有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或显示。

在使用<script>嵌入JavaScript代码的过程中，当代码中出现"</script>"字符串时，由于解析嵌入式代码的规则，浏览器会认为这是结束的</script>标签。可以通过转义字符“\”写成<\/script>来解决这个问题。

1.2 包含外部 JavaScript 文件

外部JavaScript是将JavaScript代码放在单独的.js文件中，然后在HTML文档中通过<script>标签的src属性引用这个文件。这种方法可以使代码更加模块化，便于重用和共享。

如果要通过<script>元素来包含外部JavaScript文件，那么src属性就是必需的。这个属性的值是一个指向外部JavaScript文件的链接。

<script type="text/javascript" src="example.js"></script>

• 外部文件example.js将被加载到当前页面中。
• 外部文件只须包含通常要放在开始的<script>和结束的</script>之间的那些JavaScript代码即可。

与解析嵌入式JavaScript代码一样，在解析外部JavaScript文件（包括下载该文件）时，页面的处理也会暂时停止。

注意：带有src属性的<script>元素不应该在其<script>和</script>标签之间再包含额外的JavaScript代码。如果包含了嵌入的代码，则只会下载并执行外部脚本文件，嵌入的代码会被忽略。

通过<script>元素的src属性还可以包含来自外部域的JavaScript文件。它的src属性可以是指向当前HTML页面所在域之外的某个域中的完整URL。

<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>

于是，位于外部域中的代码也会被加载和解析。

1.3 标签的位置

在HTML中，所有的<script>标签会按照它们出现的先后顺序被解析。在不使用defer和async属性的情况下，只有当前面的<script>标签中的代码解析完成后，才会开始解析后面的<script>标签中的代码。

通常，所有的<script>标签应该放在页面的<head>标签中，这样可以将外部文件（包括CSS和JavaScript文件）的引用集中放置。

然而，如果将所有的JavaScript文件都放在<head>标签中，会导致浏览器在呈现页面内容之前必须下载、解析并执行所有JavaScript代码，这可能会造成明显的延迟，导致浏览器窗口在加载过程中出现空白。

为了避免这种延迟问题，现代Web应用程序通常会将所有的JavaScript引用放置在<body>标签中的页面内容的后面。这样做可以确保在解析JavaScript代码之前，页面的内容已经完全呈现在浏览器中，从而加快了打开网页的速度。

二、执行JavaScript 程序

JavaScript 解析过程包括两个阶段：预处理（也称预编译）和执行。

• 在编译期，JavaScript 解析器将完成对 JavaScript 代码的预处理操作，把 JavaScript 代码转换成字节码；
• 在执行期，JavaScript 解析器把字节码生成二进制机械码，并按顺序执行，完成程序设计的任务。

1、执行过程

HTML 文档在浏览器中的解析过程是：按照文档流从上到下逐步解析页面结构和信息。

JavaScript 代码作为嵌入的脚本应该也算做 HTML 文档的组成部分，所以 JavaScript 代码在装载时的执行顺序也是根据 <script> 标签出现的顺序来确定。

你是不是厌倦了一成不变的编程模式？想要突破自我，挑战新技术想要突破自我，挑战新技术？却迟迟找不到可以练手的项目实战？是不是梦想打造一个属于自己的支付系统？那么，恭喜你，云端源想免费实战直播——《微实战-使用支付宝/微信支付服务，网站在线支付功能大揭秘》正在进行，点击前往获取源码！云端源想

2、预编译

当 JavaScript 引擎解析脚本时候，他会在与编译期对所有声明的变量和函数预先进行处理。当 JavaScript 解析器执行下面脚本时不会报错。

alert(a); //返回值 undefined
var a=1;
alert(a); //返回值 1

由于变量声明是在预编译期被处理的，在执行期间对于所有的代码来说，都是可见的，但是执行上面代码，提示的值是 undefined 而不是 1。

因为变量初始化过程发生在执行期，而不是预编译期。在执行期，JavaScript 解析器是按照代码先后顺序进行解析的，如果在前面代码行中没有为变量赋值，则 JavaScript 解析器会使用默认值 undefined 。

由于第二行中为变量 a 赋值了，所以在第三行代码中会提示变量 a 的值为 1，而不是 undefined。

fun(); //调用函数，返回值1
function fun(){
alert(1);
}

函数声明前调用函数也是合法的，并能够正确解析，所以返回值是 1。但如果是下面这种方式则 JavaScript 解释器会报错。

fun(); //调用函数，返回语法错误
var fun=function(){
alert(1);
}

上面的这个例子中定义的函数仅作为值赋值给变量 fun 。在预编译期，JavaScript 解释器只能够为声明变量 fun 进行处理，而对于变量 fun 的值，只能等到执行期时按照顺序进行赋值，自然就会出现语法错误，提示找不到对象 fun。

总结：声明变量和函数可以在文档的任意位置，但是良好的习惯应该是在所有 JavaScript 代码之前声明全局变量和函数，并对变量进行初始化赋值。在函数内部也是先声明变量，后引用。

通过今天的分享，相信大家已经对JavaScript在HTML中的应用有了一定的了解。这只是冰山一角，JavaScript的潜力远不止于此。希望这篇文章能激发大家对编程的热情，让我们一起在编程的世界里探索更多的可能性！

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

了执行Javascript，需要在HTML文件内以特定的方式书写JavaScript的代码，JavaScript的书写方法有多种，其执行的流程也各不相同：

1 <script>标签嵌入

此种嵌入方法无法操作<script>之后的DOM元素。因为<script>之后的DOM元素还未构造，因此在<script>标签内就无法取得位于其后的DOM元素。

2 读取外部JavaScript文件

此种嵌入方法可以指定defer、async属性。defer可以推迟执行，async可以异步执行。

3 onload嵌入

此种嵌入方法在页面读取完后再对其执行，所以可以对所有的DOM元素操作。

<body onload="alert('hello')">
window.onload=function(){alert('hello');};

当window.onload事件触发时，页面上所有的DOM、样式表、脚本、图片、flash都已经加载完成了。

//window.onload不能同时编写多个。
//以下代码无法正确执行，结果只输出第二个。
window.onload=function(){
  alert("test1");
};

window.onload=function(){
  alert("test2");
};

//$(document).ready()能同时编写多个
//结果两次都输出
$(document).ready(function(){ 
   alert("Hello World"); 
}); 
$(document).ready(function(){ 
   alert("Hello again"); 
}); 

window.onload和body中onload也有些许区别：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script language="javascript">
        window.onload=haha;
        function haha(){console.log("window.onload");}

        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }</script>
</head>
<body onload="console.log('bodyonload');">
        <div id="div1">a</div>
</body>
</html>

在IE10和FireFox下，结果为 ：

"DOMContentLoaded"
"bodyonload"

说明body中的onload会覆盖window.onload

在chrome下，结果为：

DOMContentLoaded
window.onload
bodyonload

然后，如果把javascript代码移到最下面，结果又会是什么样呢？

chrome和IE10、FireFox的结果竟然是一样的：

DOMContentLoaded
window.onload

IE 10、Fire Fox可以理解，window.on load和body中的 on load 谁在下面就是谁覆盖谁，只会执行后面的那个。

4 DOM ContentLoaded嵌入

onload方法可能需要等待时间，而本方法可以在完成HTML解析后发生的事件，减少等待时间。

在chrome、IE10和FireFox中，执行结果是：DOMContentLoaded然后才是onload的输出。所以说一般情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行DOMContentLoaded事件。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery2.js"></script>
    <script language="javascript">
        window.onload=haha;
        function haha(){console.log(document.getElementById("div1"));}
        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }
    </script>
</head>
<body>
    <div id="div1">a</div>
</body>
</html>

如果你是个jQuery使用者，你可能会经常使用$(document).ready();或者$(function(){})，这都是使用了DOMContentLoaded事件

5 动态载入JavaScript文件

5.1 使用原生js方法

动态创建script标签，并指定script的src属性

function loadJs(url, callback) {
    var script=document.createElement('script');
    script.type="text/javascript";
    if (typeof(callback) !="undefined") {
        if (script.readyState) {
            script.onreadystatechange=function() {
                if (script.readyState=="loaded" || script.readyState=="complete") {
                    script.onreadystatechange=null;
                    callback();
                }
            }
        } else {
            script.onload=function() {
                callback();
            }
        }
    }
    script.src=url;
    document.body.appendChild(script);
}
loadJs("test.js", function() {
    alert('done');
});

还可以使用同样的原理动态加载css文件，只不过插入的的父节点是head标签。

5.2 使用document.write/writeln(）方式

该种方式可以实现js文件的动态加载，原理就是在重写文档流，这种方式会导致整个页面重绘。

document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");

需要注意的是特殊字符的转义。

5.3 使用jQuery

使用getScript(url,callback)方法实现动态加载js文件

$.getScript('test.js',function(){
    alert('done');
});

－End－