JavaScript的实现(ECMAScript，DOM，BOM)

JavaScript的实现(持续更新2022-7-12)

完整的JavaScript实现包含以下几个部分

• 核心(ECMAScript)
• 文档对象模型(DOM)
• 浏览器对象模型(BOM)

一.核心(ECMAScript)

1.ECMAScript

ECMAScript既ECMA-262定义的一种脚本语言、并不局限与web浏览器。web浏览器只是ECMAScript时间可能存在一种宿主环境。宿主环境提供了ECMAScript的基准时间和环境自身交互必须的扩展。

2.ECMA-262

如果不涉及浏览器，ECMA-262在基本层面的定义：语法、类型、语句、关键字、保留字、操作符、全局对象

3.ECMAScript 与 JavaScript 的关系

ECMAScript通常可以看作是 JavaScript 的标准化规范，ECMAScript只是对实现这个规范描述的所有方面的一门语言的称呼。JavaScript实现了ECMAScript。JavaScript 还在此基础上新增了一些拓展，使得我们可以在浏览器可以操作 DOM/BOM，在 Node 环境中可以读写文件等操作。

二.文档对象模型(DOM)

三.浏览器对象模型(BOM)

1.BOM的范畴

总体来说，BOM主要针对浏览器窗口和子窗口(frame)，不过人们通常会把任何特定于浏览器的扩展都归在BOM的范畴内，比如：

• 弹出新浏览器窗口。
• 移动、缩放、和关闭浏览器窗口的能力。
• navigator对象、提供浏览器的详细信息。
• location对象、提供浏览器页面的详细信息。
• screen对象、提供关于用户屏幕分辨率的信息。
• performance对象、提供浏览器内存占用、导航行为和时间统计的详细信息。
• cookie的支持。
• 其他自定义对象、比如xhr对象等。

由于长时间没有标准、所以每个浏览器都有子的BOM、每个浏览器都会给他们定义自己的属性和方法。HTML5改变了这个局面。这个版本以正式规范的形式覆盖了尽可能多的BOM特性。之前很多与BOM有关的问题都迎刃而解。

2.BOM的核心

2.1 window对象

BOM的核心是window对象，表示浏览器的实例。window对象在浏览器中有个重要身份。一是ECMAScript中的Global对象，另外一个就是浏览器窗口的JavaScript接口。这意味着网页中共定义的所有对、变量和函数都以window作为其Global对象，都可以访问其上定义的全局方法parseInt()等全局方法。

2.2 Global作用域

因为window对象被复用为ECMAScript的Global对象，所以通过var声明的所有全局变量和函数都会变成window对象的全局属性和方法。let和const则不会把变量添加给全局对象。在 ECMAScript 2015(ES6) 前，ES 中只有两种作用域：全局作用域、函数作用域。在 ECMAScript 2015 (ES6) 中新增了一个：块级作用域。

ES6 与 ECMAScript 2015 的关系
JavaScript中有很多对象都会暴露在全局作用域中，比如location、navigator，因此他们也是windowd对象的属性。
另外undefined不是关键字，而是window上的一个对象，所以变量赋值尽量不适用undefined，如果在局部定义修改了undefined,可能会出现无法预估的错误。可以使用let a = void 0 //undefined

2.3 窗口

2.3.1窗口关系：

top对象始终指向最上层（最外层）窗口，即浏览器窗口本身
parent对象则始终指向当前窗口的父窗口。如果当前窗口是最上层窗口，则parent等于top（都等于window）
elf对象，它是终极window属性，始终会指向window。实际上，self和window就是同一个对象。

这些属性都是window对象的属性，因此访问window.parent、window.top和window.self都可以。这意味着可以把访问多个窗口的window对象串联起来，比如window.parent.parent。

2.3.2 窗口位置与像素比：

窗口位置screenLeft和screenTop

document.getElementsByClassName(‘需要置顶得dom’)[0].scrollTop = 0
添加css属性scroll-behavior: smooth;可以达到平滑过度的效果

2.3.3 窗口大小：

2.3.4 视口位置：

2.4 定时器

2.5 系统对话框

2.6 location对象

2.7 navigator对象

2.8 screen对象

2.8 history对象

总结

这是我在复习过程中的笔记，好记性不如烂笔头，在学习技术的过程中不动手敲下来的话，在实际应用过程中就根本无从下手。

文章参考：

JavaScript高级程序设计（第四版）
详解 ECMAScript