JavaScript 原型系统深度解析：原生原型的运作机制-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00808/article/details/148416497

JavaScript 原型系统深度解析：原生原型的运作机制

zh.javascript.info 现代 JavaScript 教程（The Modern JavaScript Tutorial），以最新的 ECMAScript 规范为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。项目地址: https://gitcode.com/gh_mirrors/zh/zh.javascript.info

引言

在 JavaScript 的世界中，原型系统是这门语言最核心的特性之一。理解原生原型的工作机制，不仅能帮助我们更好地使用 JavaScript 内置的各种功能，还能让我们在开发中避免一些常见的陷阱。本文将深入探讨 JavaScript 中原生原型的运作原理及其实际应用。

对象原型的基础

当我们创建一个简单的空对象时：

let obj = {};
console.log(obj.toString()); // 输出 "[object Object]"

这个看似简单的 toString() 方法调用背后，隐藏着 JavaScript 原型系统的精妙设计。实际上，obj 对象本身并没有 toString 方法，这个方法来自于 Object.prototype。

原型链的构成

JavaScript 中每个对象都有一个隐藏的 [[Prototype]] 属性（可通过 __proto__ 访问），它指向该对象的原型。当我们访问一个对象的属性或方法时，JavaScript 会沿着原型链向上查找：

首先在对象自身查找
如果没有找到，则在对象的 [[Prototype]] 中查找
继续沿着原型链向上，直到找到该属性或到达原型链顶端（null）

对于普通对象，其原型链如下：

obj -> Object.prototype -> null

内置构造函数的原型系统

JavaScript 的所有内置构造函数（如 Array、Date、Function 等）都遵循相同的原型模式：

数组的原型链

let arr = [1, 2, 3];
console.log(arr.__proto__ === Array.prototype); // true
console.log(arr.__proto__.__proto__ === Object.prototype); // true
console.log(arr.__proto__.__proto__.__proto__); // null

数组的原型链为：

arr -> Array.prototype -> Object.prototype -> null

函数的原型链

函数对象也有自己的原型链：

function foo() {}
console.log(foo.__proto__ === Function.prototype); // true
console.log(foo.__proto__.__proto__ === Object.prototype); // true

函数原型链：

foo -> Function.prototype -> Object.prototype -> null

基本数据类型的特殊处理

对于字符串、数字和布尔值这些基本类型，JavaScript 提供了特殊的处理机制：

let str = "Hello";
console.log(str.toUpperCase()); // "HELLO"

在这个例子中，当我们在基本类型字符串上调用方法时，JavaScript 会：

临时创建一个 String 包装器对象
在这个对象上调用方法
返回结果后销毁这个临时对象

这些包装器对象的方法都定义在它们各自的 prototype 上：

String.prototype
Number.prototype
Boolean.prototype

修改原生原型的风险与规范

虽然技术上可以修改原生原型（如给 Array.prototype 添加新方法），但这通常被认为是不良实践：

命名冲突风险：不同库可能添加同名方法，导致不可预测的行为
维护困难：修改语言内置行为会使代码更难理解和维护
性能影响：可能干扰 JavaScript 引擎的优化

唯一被广泛接受的例外是 polyfill —— 当某个新特性尚未被所有浏览器支持时，我们可以通过修改原型来提供兼容性实现。

方法借用的实用技巧

原型系统的一个实用技巧是"方法借用"——从一个对象"借用"方法给另一个对象使用：

let arrayLike = {
  0: "Hello",
  1: "World",
  length: 2
};

// 借用数组的 join 方法
arrayLike.join = Array.prototype.join;
console.log(arrayLike.join(',')); // "Hello,World"

这种方法特别适合处理类数组对象，或者需要混用不同对象功能的场景。