JavaScript是基于原型的对象系统,无传统类继承,通过[[Prototype]]链实现属性查找;ES6 class仅为语法糖,BOM和DOM是宿主环境提供的API,非语言特性。

JavaScript 并不是传统意义上的“面向对象语言”,而是基于原型的对象系统。它没有 class(早期)、没有真正的类继承,也没有访问修饰符或接口等 OOP 特性。但现代前端开发中大量使用面向对象思想——不是靠语法强制,而是靠模式、约定和运行时机制来模拟和实现封装、复用与扩展。
JavaScript 对象模型的本质是基于原型
每个对象都有一个内部属性 [[Prototype]],指向它的原型对象。当访问一个属性时,若当前对象不存在该属性,引擎会沿着原型链向上查找,直到 null。这种机制替代了类继承,让对象可以直接从其他对象“借”行为。
- 函数对象自动拥有 prototype 属性,用于设置新实例的 [[Prototype]]
- Object.create(proto) 可直接以任意对象为原型创建新对象
- ES6 的 class 是语法糖,底层仍是原型链,
extends实际设置的是子类构造函数的 prototype.__proto__
BOM 和 DOM 是对象模型在浏览器中的具体体现
浏览器为 JavaScript 提供了两套核心对象体系:BOM(Browser Object Model)和 DOM(Document Object Model)。它们不是语言特性,而是宿主环境提供的 API 接口。
- window 是 BOM 的根对象,代表整个浏览器窗口,同时作为全局作用域对象
- document 是 DOM 的入口,把 HTML/XML 文档映射为可编程的树形结构(节点对象集合)
- 早期浏览器差异大,比如通过
document.all或document.layers访问元素;现代标准统一为document.getElementById()、querySelector()等 DOM Level 2+ 方法
不同对象模型间的关键差异影响实际开发
前端常接触多种“对象模型”,如原生 JS 对象、DOM、SharePoint JSOM、Excel Services JSOM 等。它们虽都用 JavaScript 编写,但设计目标和约束完全不同。
立即学习“Java免费学习笔记(深入)”;
- DOM 操作是同步的,但某些方法(如
getBoundingClientRect())可能触发重排,需注意性能 - SharePoint JSOM 是异步的,依赖
ClientContext和executeQueryAsync(),错误处理必须用回调或 Promise 封装 - Excel Services JSOM 要求先获取
Ewa.EwaControl实例,且 OneDrive 与 SharePoint 场景下初始化方式不同 - 类型系统差异明显:JSOM 中的
StringCollection在 JS 里表现为数组,而NaN、Infinity等值在 .NET 托管模型中并不存在
面向对象思想落地要靠模式,而非语法
前端项目中真正起作用的,往往不是“是否用了 class”,而是如何组织数据与逻辑。常见实践包括:
- 用工厂函数或构造函数 + 原型组合,避免重复创建方法,控制实例状态边界
- 用闭包实现私有变量,模拟封装,例如模块导出时只暴露必要方法
- 用 Mixin 或
Object.assign()组合行为,替代多重继承需求 - 将 DOM 元素封装为组件对象(如
class Button { render() { ... } }),隐藏操作细节,暴露语义化接口


















