JavaScript原型链与继承机制深入研究-js教程-PHP中文网

JavaScript原型链与继承机制深入研究

betcha

发布： 2025-11-18 19:27:06

原创

175人浏览过

JavaScript通过原型链实现继承，每个对象包含一个指向其原型的内部链接，访问属性时会沿链查找直至找到或到达null。函数的prototype属性作为实例的原型，构造函数创建实例时其[[Prototype]]指向该prototype。例如Person构造函数的实例p通过原型链访问Person.prototype上的greet方法。查找机制为：先查自身属性，若无则逐级向上遍历[[Prototype]]链，终点为Object.prototype（其[[Prototype]]为null），因此所有对象可继承toString、hasOwnProperty等方法。实现继承有多种方式：原型链继承将子类原型设为父类实例，但存在共享引用问题；借用构造函数可在子类调用父类构造函数以传递参数并隔离数据，但无法复用方法；组合继承结合两者优点，是常用模式；寄生组合继承进一步优化，避免重复调用父类构造函数，被视为最佳实践。ES6引入class和extends语法糖，使代码更清晰，如Animal类与继承它的Dog类，d.speak()输出“Rex barks”，底层仍基于原型链。推荐使用Object.getPrototypeOf(obj)而非__proto__获取原型，确保标准兼容性。掌握原型链结构与继承机制是理解JavaScript面向对象特性的核心。

javascript原型链与继承机制深入研究

JavaScript的原型链与继承机制是理解语言核心的关键。不同于基于类的编程语言，JavaScript采用基于对象的继承模型，其核心依赖于原型（prototype）和原型链的动态链接机制。这种设计让对象之间可以共享属性和方法，并实现灵活的继承关系。

原型与构造函数的关系

在JavaScript中，每个函数都有一个prototype属性，它指向一个对象，这个对象就是该函数作为构造函数时，其实例所继承的原型。当使用new操作符调用构造函数创建实例时，新对象的内部[[Prototype]]指针会指向构造函数的prototype对象。

例如：

function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log("Hello, I'm " + this.name);
};
const p = new Person("Alice");
p.greet(); // 输出: Hello, I'm Alice

这里，p本身没有greet方法，但通过[[Prototype]]链可以访问到Person.prototype上的greet。

立即学习“Java免费学习笔记（深入）”；

原型链的查找机制

当你访问一个对象的属性或方法时，JavaScript引擎首先检查该对象自身是否具有该属性。如果没有，就会沿着[[Prototype]]链向上查找，直到找到匹配属性或到达原型链末端（即null）为止。

原型链的终点是Object.prototype，它的[[Prototype]]为null。所有普通对象都默认继承自Object.prototype，因此具备hasOwnProperty、toString等基础方法。

比如：

console.log(p.toString()); // 继承自 Object.prototype

这个调用过程是：p → Person.prototype → Object.prototype → 找到toString方法。

居然设计家

居然之家和阿里巴巴共同打造的家居家装AI设计平台

199

查看详情

实现继承的几种方式

JavaScript提供了多种模拟继承的方式，每种都有其适用场景和局限性。

原型链继承：将子类型的原型设置为父类型的一个实例。缺点是所有实例共享引用类型属性。
借用构造函数（经典继承）：在子类构造函数中调用父类构造函数，可传参且避免共享引用。但无法复用方法，且父类原型不可见。
组合继承：结合前两者，最常用。既能在实例上继承属性，又能通过原型链共享方法。
寄生组合继承：优化版组合继承，避免了父类构造函数被调用两次的问题，被认为是最佳实践。

现代开发中，class语法糖让继承更直观：

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(this.name + " makes a sound");
  }
}
class Dog extends Animal {
  speak() {
    console.log(this.name + " barks");
  }
}
const d = new Dog("Rex");
d.speak(); // Rex barks

虽然写法像类，底层依然是原型链实现。