JavaScript 原型链继承机制与性能优化详解

JavaScript 原型链继承基础

JavaScript 是目前唯一被广泛采用原型式继承机制的编程语言，因此深入理解这种继承方式与其他面向对象语言的区别至关重要。

JavaScript 继承机制的首要特征在于其依赖原型链来实现属性与方法的继承。

function Foo() {
 this.value = 42;
}
Foo.prototype = {
 method: function() {}
};
function Bar() {}

具体实现时，需将 Bar 构造函数的 prototype 属性指向 Foo 的一个实例对象。

Bar.prototype = new Foo();
Bar.prototype.foo = 'Hello World';

随后，必须修正 Bar 的 constructor 属性使其指向 Bar 自身，并创建一个新的 Bar 实例。

Bar.prototype.constructor = Bar;
var test = new Bar();

接下来分析整个原型链的结构组成。

test [instance of Bar]
 Bar.prototype [instance of Foo]
 { foo: 'Hello World' }
 Foo.prototype
  { method: ... }
  Object.prototype
  { toString: ... /* etc. */ }

在上述示例中，对象 test 同时继承了 Bar.prototype 和 Foo.prototype 上的成员，因此它可以调用定义在 Foo 中的 method 函数，也能访问 value 属性。值得注意的是，执行 new Bar() 时并不会创建新的 Foo 实例，而是复用原型链上已有的 Foo 实例。这意味着所有 Bar 的实例共享同一个 value 属性，具体表现如示例所示：

test1 = new Bar();
 test2 = new Bar();
 Bar.prototype.value = 41;
 test1.value //41
 test2.value//41

原型链查找机制

原型链属性查找机制

当访问对象的某个属性时，JavaScript 引擎会从对象自身开始，沿着原型链向上逐层遍历，直到找到该属性为止。若遍历至原型链顶端（即 Object.prototype）仍未找到目标属性，则返回 undefined。

原型属性赋值与原始值概念

原型对象的属性赋值特性

虽然原型对象的属性主要用于构建原型链，我们依然可以直接对其赋值。然而，将原始值直接赋给 prototype 属性是无效的，例如：

function Foo() {}
Foo.prototype = 1; // no effect

此处补充一个相关概念，即原始值与引用值的区别： 在 JavaScript 中，变量存储的值分为两种类型：原始值和引用值。

1. 原始值 (primitive value)：

原始值是固定且简单的数据，存储在栈内存（stack）中，变量直接访问其存储位置。JavaScript 中的原始类型包括五种：Undefined、Null、Boolean、Number 和 String。

2. 引用值 (reference value)：

引用值通常指较大的对象，存储在堆内存（heap）中。变量中存储的是一个指向堆内存中实际对象的指针。所有引用类型均继承自 Object。

原型链性能影响与优化建议

若所需属性位于原型链高层，查找过程将对性能产生显著负面影响。在性能要求严苛的场景中，此因素需重点考量。此外，查找不存在的属性会遍历整个原型链。 同理，遍历对象属性时，原型链上的所有属性均会被访问。

总结

理解原型式继承是编写复杂 JavaScript 代码的基础，同时需关注原型链的深度。在性能敏感的场景中，过长的原型链会显著降低属性查找效率，此时应考虑拆分或优化原型链。此外，务必区分原型对象 prototype 与内部原型 __proto__，本文主要聚焦于 prototype 的讨论，暂不深入 __proto__ 的细节。