前端三清 原型与原型链 探究js的底层原理

前端"三清"：窥探JavaScript的窗口、文档与对象

引言

在前端开发的世界中，JavaScript是一位强大的主角，而其内部则存在着前端的"三清"：window、document、和Object。它们分别代表着浏览器窗口、文档对象模型（DOM），以及JavaScript的顶层对象。深入理解这三者之间的关系，对于成为一位出色的前端工程师至关重要。

1. 窗口之谜：window对象与BOM

在JavaScript的世界中，window对象是至关重要的存在。它代表了整个浏览器窗口，负责管理浏览器的各项功能，除了网页的主体内容之外的一切。这一方面包括了浏览器的各类属性和方法，例如浏览器的大小、位置等，同时也涵盖了对浏览器的控制，比如弹窗、定时器等。

而BOM（浏览器对象模型）则是window的一部分，它是处理浏览器窗口之外功能的接口。通过BOM，我们可以控制浏览器的行为，而window对象则是BOM的核心。在前端开发中，深入理解window和BOM的关系，能够让我们更加高效地处理与浏览器交互的各种任务。

2. 文档之术：document对象与DOM

在前端开发中，document对象是不可或缺的。它代表了当前载入的文档，是我们与网页内容进行交互的媒介。通过document，我们可以访问和操纵DOM（文档对象模型），从而实现对页面的动态操作。

DOM是一种树状结构，将文档表示为一个由元素（节点）构成的层次。JavaScript通过与DOM的交互，实现了对网页结构和内容的动态修改。我们常常通过JavaScript来获取、创建、删除或修改DOM元素，从而实现页面的实时更新和响应用户交互。

理解document对象和DOM的关系，对于前端开发者来说，是掌握动态网页开发的关键。通过合理地操作DOM，我们可以实现各种各样的交互效果，提升用户体验。

3. 对象之源：Object与JavaScript的面向对象

JavaScript是一门基于原型的面向对象语言，而Object则是它的顶层对象。在JavaScript中，几乎所有的对象都是从Object派生而来的。

3.1 构造函数与实例化

在JavaScript中，大写的函数通常作为构造函数使用。通过使用new关键字，我们可以实例化一个对象。这个过程包括了从一个空对象到构造完成的过程，这个新对象就拥有了构造函数中定义的属性。

function Person(name) {
  this.name = name;
}

const wanwan = new Person('Wanwan');

在这个例子中，通过new Person('Wanwan')，我们创建了一个名为wanwan的实例，它拥有了构造函数Person中定义的name属性。

3.2 原型与原型链

JavaScript的面向对象不是基于类的，而是基于原型。每个对象都有一个私有属性__proto__，指向它的原型。通过原型，对象可以共享属性和方法，形成原型链。

console.log(wanwan.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true

在这里，我们可以看到wanwan实例的原型指向Person.prototype，而Person.prototype的原型又指向Object.prototype，形成了原型链。

3.3 this的多重身份

在JavaScript中，this是一个特殊的关键字，它的值在函数运行时被动态确定。理解this的不同指向，是解决许多JavaScript中常见问题的关键。

• 在普通函数运行中，this指向window顶级对象，但在严格模式下是undefined。
• 在事件的处理函数运行中，this会指向触发事件的元素本身。
• 当函数作为对象的方法被调用时，this指向对象本身。
• 在函数以构造函数的方式运行时，this指向实例化的对象。

function exampleFunction() {
  console.log(this);
}

const obj = {
  method: exampleFunction
};

obj.method(); // this指向obj

结语

在前端的世界中，window、document和Object是我们每天都会面对的三位重要角色。理解它们的本质，深入学习它们的用法，对于成为一位卓越的前端工程师至关重要。通过对JavaScript的"三清"的深入探索，我们可以更好地驾驭浏览器的各项功能，灵活运用文档对象模型，以及掌握面向对象的JavaScript编程范式。愿你在前端的路上越走越远，不断深化对这些基础概念的理解，为更高级的前端技术打下坚实的基础。