JavaScript 对象模型 执行模型

我来讲解一下 JavaScript 对象模型和执行模型。

JavaScript 对象模型

JavaScript 对象模型（Document Object Model，简称 DOM）是一种表现 HTML 或 XML 文档的方式，它将文档作为节点树表示。每个节点都是一个对象，由此可得到 DOM 中体现的是一种父子关系。在 JavaScript 中，可以通过访问 DOM 对象来操作和修改 HTML 或 XML 文档，比如修改节点的属性、添加或删除节点等。

和 DOM 类似的，JavaScript 又有一种对象模型：浏览器对象模型（Browser Object Model，简称 BOM），它用于描述浏览器窗口和框架，比如窗口的尺寸、滚动条的位置等。

JavaScript 中的对象模型包括了内置对象、宿主对象和自定义对象三种类型。其中内置对象是由 JavaScript 语言本身定义的一些对象，比如 Object、Array、String 等等；宿主对象是由 JavaScript 的承载环境定义的对象，比如浏览器环境中常用的 window、document 等等；自定义对象则是由开发者自行定义的对象，用于满足特定需求。

下面是一个简单的示例，演示如何通过 JavaScript 修改 DOM。

// 将某个 div 元素的文本内容修改为 Hello World!
var div = document.getElementById('myDiv');
div.innerHTML = 'Hello World!';

JavaScript 执行模型

JavaScript 执行模型指的是 JavaScript 代码在运行时的执行顺序和方式，主要由三部分组成：执行上下文、变量对象和作用域链。

执行上下文（Execution Context）是 JavaScript 代码执行的环境，在执行代码前需要先创建执行上下文。每当一个函数被调用时，就会创建一个新的执行上下文，执行上下文包含了该函数的相关信息，比如函数参数、局部变量、return、this 等等。

变量对象（Variable Object）是一个抽象的概念，它代表了当前执行上下文的变量环境，其中包含了当前上下文中的所有变量、变量声明和函数声明。在函数被调用时，会创建一个新的变量对象。

作用域链（Scope Chain）是在编译过程中确定的，用于寻找变量的位置，由当前上下文变量对象及其父级对象的列表组成。当找到变量时，JavaScript 引擎依次在作用域链中查找对应变量，直到找到该变量或者遍历完最外层作用域为止。

下面是一个简单的示例，演示函数执行过程中的执行上下文、变量对象和作用域链。

var a = 1; // 全局变量

function foo(b) {
  var c = 3; // 局部变量
  function bar(d) {
    var e = 5; // 局部变量
    console.log(a + b + c + d + e); // 访问全局变量和局部变量
  }
  bar(4); // 调用 bar 函数
}

foo(2); // 调用 foo 函数

以上就是 JavaScript 对象模型和执行模型的基础内容，希望对你有所帮助。