登录
首页 >  文章 >  前端

JavaScript原型链与面向对象详解

时间：2026-05-31 11:21:35 136浏览 收藏

JavaScript 的面向对象编程不依赖传统类机制，而是以简洁却强大的原型链为核心——每个对象通过内部 [[Prototype]] 链接向上追溯，属性和方法查找自动沿链进行，直至 null；函数的 prototype、实例的 __proto__（或 Object.getPrototypeOf）、constructor 属性共同构建并维护这条动态链接，而继承本质上就是精心拼接原型链的过程。理解这一机制，不仅揭开 this、new、instanceof 等行为背后的真相，更让你真正掌握 JavaScript 独特而灵活的面向对象本质。

JavaScript原型链剖析_JavaScript面向对象编程

JavaScript 的面向对象特性与其他语言不同，它基于原型（Prototype）而非类来实现继承和对象创建。理解原型链是掌握 JavaScript 面向对象编程的关键。

原型与 prototype 属性

在 JavaScript 中，每个函数都有一个 prototype 属性，这个属性指向一个对象，即该函数的原型对象。当我们使用构造函数创建实例时，实例会自动连接到构造函数的原型对象。

例如：

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log("Hello, I'm " + this.name);
};

const p1 = new Person("Alice");
p1.greet(); // 输出: Hello, I'm Alice

这里，p1 虽然没有定义 greet 方法，但它能访问这个方法，因为它通过原型链找到了 Person.prototype 上的方法。

__proto__ 与原型链查找机制

每个 JavaScript 对象都有一个内部属性 [[Prototype]]，可通过 __proto__ 访问（现代开发中推荐使用 Object.getPrototypeOf()）。这个属性指向该对象的原型。

当访问一个对象的属性或方法时，JavaScript 引擎会：

  • 先在对象自身查找
  • 如果没找到，就沿着 __proto__ 指向的原型对象继续查找
  • 一直向上追溯，直到原型链末端（null）为止

比如上面的例子中：

p1.__proto__ === Person.prototype // true
Person.prototype.__proto__ === Object.prototype // true
Object.prototype.__proto__ === null // true

这就构成了完整的原型链：p1 → Person.prototype → Object.prototype → null

constructor 属性的作用

原型对象默认有一个 constructor 属性，指向对应的构造函数。

Person.prototype.constructor === Person // true
p1.constructor === Person // true

这个属性可用于判断对象是由哪个构造函数创建的，但要注意：如果重写了整个 prototype，需要手动修复 constructor 指向，否则会导致判断出错。

实现继承的本质：原型链拼接

JavaScript 中的“继承”实际上是通过调整原型链实现的。常见的做法是将子类型的原型设置为父类型的一个实例。

function Animal(name) {
  this.name = name;
}

Animal.prototype.eat = function() {
  console.log(this.name + " is eating.");
};

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

const dog = new Dog("Max", "Golden Retriever");
dog.eat(); // Max is eating.

这里用 Object.create() 创建了一个以 Animal.prototype 为原型的新对象，从而让 Dog 实例可以通过原型链访问 Animal 的方法。

基本上就这些。原型链看似复杂，核心就是对象之间的链接关系和属性查找规则。掌握了这一点，JavaScript 的面向对象编程就清晰多了。不复杂但容易忽略。

终于介绍完啦！小伙伴们，这篇关于《JavaScript原型链与面向对象详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！

资料下载
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>