JavaScript原型链继承机制深入剖析-js教程-PHP中文网

JavaScript原型链继承机制深入剖析

幻影之瞳

发布： 2025-10-25 20:51:02

原创

471人浏览过

JavaScript继承基于原型链，通过构造函数的prototype与实例的[[Prototype]]链接实现属性查找；经典继承方式是将子类原型设为父类实例，但存在引用共享、无法传参等问题；因此推荐寄生组合式继承，即在子类构造函数中用call调用父类构造函数继承实例属性，并用Object.create(Parent.prototype)设置子类原型以避免共享，再修正constructor指向，兼顾效率与安全性，也是ES6 class编译后的默认实现。

javascript原型链继承机制深入剖析

JavaScript 的继承机制和其他面向对象语言不同，它基于原型链（Prototype Chain）实现。理解原型链是掌握 JavaScript 面向对象编程的核心。

原型与原型链的基本概念

在 JavaScript 中，每个函数都有一个 prototype 属性，这个属性指向一个对象，即该函数的原型对象。原型对象中包含可以被实例共享的属性和方法。

每个通过构造函数创建的对象都会有一个内部链接指向构造函数的原型对象，这个链接称为 [[Prototype]]。在大多数环境中可通过 __proto__ 访问（不推荐直接使用），或通过 Object.getPrototypeOf() 获取。

当访问一个对象的属性时，JavaScript 引擎会先在该对象自身查找，若未找到，则沿着 [[Prototype]] 链向上查找，直到找到属性或链结束（即到达 null）。这条查找路径就是原型链。

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

实现原型链继承的方式

最经典的原型链继承方式是将子类的原型设置为父类的一个实例：

定义父构造函数，并在其 prototype 上添加方法
定义子构造函数
将子构造函数的 prototype 指向父构造函数的实例
修正子构造函数 prototype 的 constructor 指向

示例代码：

function Parent() {
  this.name = 'parent';
}
Parent.prototype.getName = function() {
  return this.name;
};

function Child() {
  this.type = 'child';
}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

登录后复制

这里使用 Object.create() 创建一个以 Parent.prototype 为原型的新对象，避免了直接赋值带来的副作用（如执行父构造函数）。