js原型链理解示例

a函数继承b函数，b函数继承c函数，那a函数的实例abc可以直接读取c函数的prototype属性吗？

在 JavaScript 中，函数可以通过原型链继承其他函数的属性和方法。上面提到“a函数继承b函数，b函数继承c函数”，通常是指构造函数之间的继承关系，这涉及到原型链的层级结构。在这种情况下，a 的实例可以访问到 c 函数的 prototype 属性中的方法和属性，前提是这些属性没有被覆盖。

原型链继承的基本原理

JavaScript 中的继承是通过原型链实现的。当一个对象尝试访问某个属性时，如果该对象本身没有这个属性，JavaScript 引擎会沿着原型链向上查找，直到找到该属性或到达原型链的末端（即 null）。

示例代码

假设我们有三个构造函数 C、B 和 A，其中 A 继承自 B，而 B 继承自 C。我们可以使用以下方式来设置这种继承关系：

// 定义 C 构造函数及其 prototype 属性
function C() {}
C.prototype.cMethod = function() {
    console.log("C method");
};

// 定义 B 构造函数及其 prototype 属性，并让 B 继承 C
function B() {}
B.prototype = Object.create(C.prototype);
B.prototype.constructor = B;
B.prototype.bMethod = function() {
    console.log("B method");
};

// 定义 A 构造函数及其 prototype 属性，并让 A 继承 B
function A() {}
A.prototype = Object.create(B.prototype);
A.prototype.constructor = A;
A.prototype.aMethod = function() {
    console.log("A method");
};

// 创建 A 的实例
const abc = new A();

// 测试是否可以访问 C 的 prototype 属性
abc.cMethod(); // 输出: "C method"
abc.bMethod(); // 输出: "B method"
abc.aMethod(); // 输出: "A method"

解释

1. 定义构造函数：首先，我们定义了三个构造函数 C、B 和 A，并分别为它们的 prototype 添加了一些方法。

2. 设置继承关系：

   • 使用 Object.create() 方法将 B.prototype 设置为继承自 C.prototype。
   • 同样地，将 A.prototype 设置为继承自 B.prototype。
   • 为了确保构造函数正确指向自己，我们在每次设置原型之后都重置了 constructor 属性。

3. 创建实例：创建 A 的实例 abc。

4. 访问原型链上的方法：

   • abc.cMethod() 能够成功调用，因为 cMethod 是定义在 C.prototype 上的方法，通过原型链从 A 实例可以访问到它。
   • 同理，abc.bMethod() 和 abc.aMethod() 分别调用了定义在 B.prototype 和 A.prototype 上的方法。

注意事项

• 属性覆盖：如果在某一层级上定义了一个与上级相同的属性或方法，那么下层的定义会覆盖上层的定义。例如，如果你在 B.prototype 或 A.prototype 上定义了一个同名的 cMethod，那么 abc.cMethod() 将调用最近定义的那个版本，而不是 C.prototype 上的原始版本。

• 性能考虑：虽然原型链提供了强大的继承机制，但过长的原型链可能会影响性能。因此，在设计复杂的继承结构时，应尽量保持原型链的简洁。

通过这种方式，你可以构建多层次的继承关系，并且实例能够沿着原型链访问到其祖先构造函数的 prototype 属性中的方法和属性。