首页
/ 正文

JavaScript prototype（原型对象）（建议收藏）

更新时间: 2025-04-16 18:31:48

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 核心机制之一，原型对象的概念常被开发者视为“理解 JavaScript 的钥匙”，但其抽象性也让许多初学者感到困惑。本文将用通俗的语言、生活化的比喻和代码示例，带你一步步揭开原型对象的神秘面纱。无论你是编程新手还是中级开发者，都能通过本文掌握这一关键知识点，并提升面向对象编程的实践能力。

一、基础概念解析：对象与原型的诞生

1.1 什么是对象？

在 JavaScript 中，对象（Object） 是数据与行为的集合体，例如：

const person = {  
  name: "Alice",  
  age: 25,  
  sayHello: function() {  
    console.log(`Hello, my name is ${this.name}`);  
  }  
};

上述代码创建了一个包含属性和方法的对象。但当需要创建多个类似对象（如多个 Person 实例）时，重复编写相同代码显然低效。这时，构造函数和 prototype（原型对象） 应运而生。

1.2 构造函数与实例化

构造函数是一种特殊的函数，通过 new 关键字调用时，会执行以下操作：

创建一个空对象；
将空对象的 [[Prototype]]（隐式原型）指向构造函数的 prototype 属性；
将构造函数内部的 this 绑定到新对象；
返回新对象。

示例代码：

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

const alice = new Person("Alice", 25);

此时，alice 的 [[Prototype]] 指向 Person.prototype。

1.3 原型对象的定义

每个函数天生具有 prototype 属性，其本质是一个对象，包含可被所有实例共享的属性和方法。例如：

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

alice.greet(); // 输出 "Hello, I'm Alice"

通过 Person.prototype，我们为所有 Person 实例添加了 greet() 方法，而无需在每个实例中重复定义。

二、原型链：对象属性的“寻根之旅”

2.1 什么是原型链？

当访问一个对象的属性或方法时，JavaScript 会从对象本身开始搜索，若未找到，则沿着其 [[Prototype]] 指向逐级向上查找，直到找到目标或到达原型链顶端（null）。这一过程称为 原型链（Prototype Chain）。

比喻：
可以将原型链想象为家族族谱。当你询问“我的曾祖父是谁？”时，如果自己不知道，会去问父亲，父亲不知道则去问祖父，祖父也不知道才去问曾祖父。这种层层追溯的过程，就是原型链的工作原理。

2.2 原型链的实现示例

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 的原型指向 Animal 的实例  
Dog.prototype = Object.create(Animal.prototype);  

Dog.prototype.bark = function() {  
  console.log("Woof!");  
};  

const bulldog = new Dog("Buddy", "Bulldog");  
bulldog.eat();   // 通过 Animal.prototype 继承  
bulldog.bark();  // 通过 Dog.prototype 定义

在此示例中，bulldog 的原型链为：
bulldog → Dog.prototype → Animal.prototype → Object.prototype → null。

2.3 原型链的优缺点

优点	缺点
减少内存占用，共享方法	遍历属性时可能包含非自身属性
灵活实现继承	修改原型可能影响所有实例

三、深入实践：原型对象的常见应用场景

3.1 为已有对象添加方法

// 为所有数组添加一个双倍求和方法  
Array.prototype.sumDouble = function() {  
  return this.reduce((acc, num) => acc + num * 2, 0);  
};  

const arr = [1, 2, 3];  
console.log(arr.sumDouble()); // 输出 12（(1+2+3)*2）

注意：直接修改内置对象的原型可能引发命名冲突，建议谨慎使用。

3.2 继承模式：经典与寄生组合

经典继承

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

Parent.prototype.getParentInfo = function() {  
  return `Parent: ${this.name}`;  
};  

function Child(name, age) {  
  Parent.call(this, name); // 继承构造函数属性  
  this.age = age;  
}  

Child.prototype = Object.create(Parent.prototype);  
Child.prototype.constructor = Child; // 修复构造函数指向  

const child = new Child("Bob", 8);  
console.log(child.getParentInfo()); // 输出 "Parent: Bob"

寄生组合继承（推荐）

通过 Object.create 和闭包避免重复调用父构造函数：

function inheritChild(Parent) {  
  function F() {} // 中间函数  
  F.prototype = Parent.prototype;  
  return function Child(...args) {  
    Parent.call(this, ...args); // 调用父构造函数  
    return F.prototype; // 返回中间函数的原型  
  };  
}

3.3 原型与静态方法的区别

class MathHelper {  
  // 实例方法（通过 prototype 访问）  
  static multiply(a, b) {  
    return a * b;  
  }  

  // 静态方法（直接通过类名调用）  
  add(a, b) {  
    return a + b;  
  }  
}  

// 正确调用方式  
console.log(MathHelper.multiply(3, 4)); // 12  
console.log(new MathHelper().add(5, 6)); // 11

总结：

实例方法通过 prototype 定义，供实例使用；
静态方法直接定义在类上，无需实例化即可调用。

四、常见误区与调试技巧

4.1 误区一：直接覆盖原型对象

function Person() {}  

// 错误操作：完全替换原型对象  
Person.prototype = {  
  greet: function() {  
    console.log("Hello");  
  }  
};  

// 此时 Person.prototype.constructor 指向 Object

正确做法：使用 Object.assign 或 Object.create 保留原型链：

Person.prototype = Object.create(Person.prototype);  
Object.assign(Person.prototype, {  
  greet: function() { ... }  
});

4.2 误区二：原型链过长导致性能问题

过度嵌套继承会增加属性查找时间。例如：

A → B → C → D → ... → Z → null

解决方案：

优先使用组合而非继承；
避免深层继承层级。

4.3 调试工具：`proto` 与 `Object.getPrototypeOf()`

const obj = {};  
console.log(obj.__proto__ === Object.prototype); // true  
console.log(Object.getPrototypeOf(obj) === Object.prototype); // true

注意：__proto__ 是非标准属性，建议使用 Object.getPrototypeOf() 替代。

五、进阶应用：ES6 Class 语法背后的原型机制

ES6 的 class 语法是对原型继承的语法糖，其底层仍依赖原型链。例如：

class Vehicle {  
  constructor(brand) {  
    this.brand = brand;  
  }  

  start() {  
    console.log("Vehicle started");  
  }  
}  

class Car extends Vehicle {  
  constructor(brand, model) {  
    super(brand); // 调用父类构造函数  
    this.model = model;  
  }  

  drive() {  
    console.log("Driving");  
  }  
}

上述代码等价于：

function Vehicle(brand) {  
  this.brand = brand;  
}  

Vehicle.prototype.start = function() { ... };  

function Car(brand, model) {  
  Vehicle.call(this, brand);  
  this.model = model;  
}  

Car.prototype = Object.create(Vehicle.prototype);  
Car.prototype.constructor = Car;  
Car.prototype.drive = function() { ... };

结论

通过本文的讲解，我们系统梳理了 JavaScript prototype（原型对象） 的核心概念、实现原理及实战技巧。原型对象不仅是理解 JavaScript 面向对象特性的关键，更是高效开发的基石。

记住以下要点：

原型对象是函数的 prototype 属性，用于共享方法；
原型链通过 [[Prototype]] 连接，实现属性的逐级查找；
继承需谨慎设计，避免性能与命名冲突问题；
ES6 Class 语法本质仍是基于原型的实现。

希望本文能帮助你在实际开发中灵活运用原型机制，解决复杂场景下的对象设计问题。如果你有任何疑问或实践中的案例，欢迎在评论区交流！

JavaScript prototype（原型对象）（建议收藏）

前言

一、基础概念解析：对象与原型的诞生

1.1 什么是对象？

1.2 构造函数与实例化

1.3 原型对象的定义

二、原型链：对象属性的“寻根之旅”

2.1 什么是原型链？

2.2 原型链的实现示例

2.3 原型链的优缺点

三、深入实践：原型对象的常见应用场景

3.1 为已有对象添加方法

3.2 继承模式：经典与寄生组合

经典继承

寄生组合继承（推荐）

3.3 原型与静态方法的区别

四、常见误区与调试技巧

4.1 误区一：直接覆盖原型对象

4.2 误区二：原型链过长导致性能问题

4.3 调试工具：`proto` 与 `Object.getPrototypeOf()`

五、进阶应用：ES6 Class 语法背后的原型机制

结论

最新发布

jQuery.each()方法（长文解析）

jQuery.extend()方法（长文解析）

jQuery.fn.extend()方法（千字长文）

jQuery.globalEval()方法（长文讲解）

jQuery.grep() 方法（长文讲解）

jQuery.inArray() 方法（长文讲解）

jQuery.isArray() 方法（手把手讲解）

jQuery.isEmptyObject() 方法（千字长文）

jQuery.isFunction() 方法（建议收藏）

jQuery.isNumeric() 方法（手把手讲解）

JavaScript prototype（原型对象）（建议收藏）

前言

一、基础概念解析：对象与原型的诞生

1.1 什么是对象？

1.2 构造函数与实例化

1.3 原型对象的定义

二、原型链：对象属性的“寻根之旅”

2.1 什么是原型链？

2.2 原型链的实现示例

2.3 原型链的优缺点

三、深入实践：原型对象的常见应用场景

3.1 为已有对象添加方法

3.2 继承模式：经典与寄生组合

经典继承

寄生组合继承（推荐）

3.3 原型与静态方法的区别

四、常见误区与调试技巧

4.1 误区一：直接覆盖原型对象

4.2 误区二：原型链过长导致性能问题

4.3 调试工具：__proto__ 与 Object.getPrototypeOf()

五、进阶应用：ES6 Class 语法背后的原型机制

结论

最新发布

jQuery.each()方法（长文解析）

jQuery.extend()方法（长文解析）

jQuery.fn.extend()方法（千字长文）

jQuery.globalEval()方法（长文讲解）

jQuery.grep() 方法（长文讲解）

jQuery.inArray() 方法（长文讲解）

jQuery.isArray() 方法（手把手讲解）

jQuery.isEmptyObject() 方法（千字长文）

jQuery.isFunction() 方法（建议收藏）

jQuery.isNumeric() 方法（手把手讲解）

4.3 调试工具：`proto` 与 `Object.getPrototypeOf()`