异常教程

JavaScript prototype 属性（手把手讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在 JavaScript 开发中，"prototype 属性" 是一个核心概念，它与对象、函数、继承等机制紧密相关。无论是编写基础代码，还是设计复杂的应用架构，理解这一机制都能帮助开发者更高效地组织代码、优化性能。对于编程初学者和中级开发者而言，掌握 JavaScript prototype 属性不仅是理解语言底层逻辑的关键，也是解决实际开发中常见问题的必要条件。本文将通过循序渐进的方式，结合实例与比喻，深入剖析这一主题，帮助读者构建清晰的认知体系。

一、prototype 属性的基础概念

1.1 什么是 prototype 属性？

JavaScript 是一种基于对象（Object）的语言，而对象之间的关系往往通过 原型链（Prototype Chain） 实现。每个函数（Function）在定义时，都会自动获得一个名为 prototype 的属性。这个属性是一个对象，用于存储可以被所有实例共享的方法或属性。

简单比喻：
可以将 prototype 想象为一个“家族族谱”。假设有一个名为 Person 的构造函数（即创建对象的模板），那么 Person.prototype 就像是这个家族的公共财产库。所有通过 new Person() 生成的实例（如 john、mary）都能访问这个库中的“财产”（方法或属性），但不会直接拥有这些财产的所有权。

代码示例：

function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  return `Hello, my name is ${this.name}`;
};

const john = new Person("John");
console.log(john.sayHello()); // 输出 "Hello, my name is John"

1.2 prototype 属性的作用

prototype 的核心作用是支持 共享行为。通过将方法或属性定义在 prototype 上，而非直接写在构造函数内部，可以避免重复存储，节省内存。例如，若多个 Person 实例都需要 sayHello() 方法，每个实例无需单独保存一份方法代码——它们只需通过原型链引用同一个方法即可。

对比分析：

  • 直接在构造函数中定义方法：

    function Person(name) {
  this.name = name;
  this.sayHello = function() { ... }; // 每个实例都会独立存储这个函数
}

    这种方式会为每个实例单独创建方法，内存消耗较高。

  • 通过 prototype 定义方法：
    如前所示，sayHello 存储在 Person.prototype 上，所有实例共享该方法，内存效率更高。

二、原型链（Prototype Chain）的工作原理

2.1 原型链的连接

每个对象内部都包含一个指向其构造函数 prototype 的隐式引用，这个引用在 JavaScript 中被称为 [[Prototype]]。开发者可以通过 __proto__ 属性（非标准但广泛支持）或 Object.getPrototypeOf() 方法访问它。

关键关系：

const obj = new Person();
obj.__proto__ === Person.prototype; // true

2.2 原型链的继承逻辑

当访问一个对象的属性或方法时，JavaScript 引擎会按照以下步骤查找：

  1. 在对象自身的属性中查找；
  2. 若未找到，则沿着 [[Prototype]] 链向上层原型逐级查找；
  3. 若最终未找到，则返回 undefined。

比喻：
这就像一个孩子向父母、祖父母逐级询问“财产”（属性或方法）的过程。例如：

function Animal() {}
Animal.prototype.eat = function() { ... };

function Cat() {}
Cat.prototype = Object.create(Animal.prototype); // 将 Cat.prototype 的 [[Prototype]] 指向 Animal.prototype

const myCat = new Cat();
myCat.eat(); // 通过原型链找到 Animal.prototype.eat()

2.3 原型链的可视化示例

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  return `Hello, I'm ${this.name}`;
};

const john = new Person("John");
// 原型链结构：
// john → Person.prototype → Object.prototype → null

三、通过 prototype 属性实现继承

3.1 经典继承模式

通过将子类的 prototype 连接到父类的 prototype，可以实现继承。例如：

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  return "Some generic sound";
};

function Dog(name) {
  Animal.call(this, name); // 调用父类构造函数
}
Dog.prototype = Object.create(Animal.prototype); // 继承父类原型
Dog.prototype.constructor = Dog; // 修复构造函数指向

const myDog = new Dog("Buddy");
console.log(myDog.speak()); // "Some generic sound"

3.2 原型式继承的局限性

  • 共享引用类型属性：若父类的 prototype 包含数组或对象等引用类型，默认会被所有实例共享，可能导致意外行为。
  • 无法继承父类的私有属性：父类通过构造函数定义的私有属性（如 this._private）不会被子类实例直接访问。

四、prototype 属性的动态特性

4.1 动态修改 prototype 的影响

prototype 是一个可变对象，可以在运行时动态修改。例如：

function Tool() {}
Tool.prototype.use = function() { return "Using basic tool"; };

// 动态添加方法
Tool.prototype.advancedUse = function() { return "Advanced usage"; };

const myTool = new Tool();
console.log(myTool.advancedUse()); // 可以正常调用新方法

所有现有实例和未来实例都会自动继承这些修改，这为扩展功能提供了灵活性。

4.2 避免直接修改实例的 proto

虽然可以通过 __proto__ 直接修改对象的原型，但这种做法存在风险：

const obj = {};
obj.__proto__ = { foo: "bar" }; // 直接修改 [[Prototype]]
console.log(obj.foo); // "bar"

这种方式可能导致代码难以维护，并且在严格模式下可能被限制。

五、prototype 属性的实际应用场景

5.1 扩展内置对象

通过修改内置对象的 prototype（如 Array、String），可以为全局类型添加自定义方法。例如：

Array.prototype.last = function() {
  return this[this.length - 1];
};

const arr = [1, 2, 3];
console.log(arr.last()); // 3

注意：这种做法可能引发命名冲突，建议谨慎使用。

5.2 实现 Mixin 模式

通过合并多个原型对象的功能，可以灵活组合行为。例如：

function Flyable() {}
Flyable.prototype.fly = function() { ... };

function Swimmable() {}
Swimmable.prototype.swim = function() { ... };

function Duck() {}
Duck.prototype = Object.assign(Object.create(Object.prototype), 
  Flyable.prototype, 
  Swimmable.prototype
);

六、常见误区与解决方案

6.1 误将 prototype 与实例属性混淆

若在实例上直接定义与原型同名的属性，实例属性会“屏蔽”原型上的属性。例如：

Person.prototype.age = 30;
const john = new Person();
john.age = 25; // 实例属性覆盖原型属性

6.2 忽视 prototype 的共享特性

修改原型上的引用类型属性时，所有实例会共享该修改。例如：

function Car() {}
Car.prototype.wheels = [];
const car1 = new Car();
car1.wheels.push("wheel1");
const car2 = new Car();
console.log(car2.wheels); // ["wheel1"]

应避免在原型上直接存储可变引用类型，或使用工厂函数返回新实例。

结论

JavaScript 的 prototype 属性是理解对象模型与继承机制的核心。通过掌握其基础概念、原型链的查找逻辑、动态特性及实际应用场景，开发者能够更高效地组织代码、优化性能，并避免常见陷阱。建议读者通过以下步骤巩固知识：

  1. 编写简单构造函数，观察 prototype 的行为；
  2. 实践继承模式，对比不同实现方式的优缺点；
  3. 使用开发者工具（如 Chrome DevTools）调试原型链。

掌握这一机制后，JavaScript 的对象系统将不再神秘，反而成为构建复杂应用的强大工具。

最新发布

查看更多文章