JavaScript 测试 Prototype（保姆级教程）

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

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

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

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

在 JavaScript 开发中，理解与测试对象的 Prototype（原型） 是掌握语言核心机制的关键。原型链作为 JavaScript 实现继承的核心机制，直接影响代码的复用性、性能以及可维护性。然而，对于许多开发者而言，原型的抽象概念和动态特性往往成为理解的难点。本文将从基础概念出发，通过案例和代码示例，深入讲解如何通过测试 Prototype 来确保代码的正确性，帮助开发者在项目中避免因原型链问题引发的隐性 Bug。

理解 JavaScript 的原型链与继承机制

什么是 Prototype？

JavaScript 中的每个对象都包含一个 [[Prototype]] 内部属性（可通过 __proto__ 访问），指向其原型对象。原型对象同样可以拥有自己的原型，这一链条最终形成 原型链。例如：

function Animal(name) {  
  this.name = name;  
}  
Animal.prototype.speak = function() {  
  return "动物在发声！";  
};  

const dog = new Animal("Buddy");  
console.log(dog.__proto__ === Animal.prototype); // true  
console.log(dog.speak()); // "动物在发声！"  

在此案例中，dog 对象的原型是 Animal.prototype，而 Animal.prototype 的原型是 Object.prototype。当访问 dog.speak() 时，JavaScript 会沿着原型链查找，直到找到该方法或到达链底（null）。

原型链的作用与测试必要性

原型链的核心作用是 方法复用。通过将方法定义在原型而非实例上，所有实例共享这些方法，节省内存。例如：

function Car(brand) {  
  this.brand = brand;  
}  
Car.prototype.start = function() {  
  return `${this.brand} 正在启动！`;  
};  

const car1 = new Car("Toyota");  
const car2 = new Car("Honda");  
console.log(car1.start() === car2.start()); // true  

但若未正确测试 Prototype，可能出现以下问题：

1. 方法覆盖：错误地将方法定义在实例而非原型上，导致每个实例独立存储方法，浪费内存。
2. 继承断裂：子类未正确继承父类的原型方法，导致功能缺失。
3. 意外污染：直接修改内置对象（如 Array.prototype），引发全局副作用。

JavaScript 测试 Prototype 的核心方法与工具

1. 检查对象的原型归属

使用 Object.getPrototypeOf() 或 instanceof 可验证对象的原型关系：

function Parent() {}  
Parent.prototype.greet = function() { return "Hello!"; };  

const child = new Parent();  

// 方法1：直接比较原型对象  
console.log(Object.getPrototypeOf(child) === Parent.prototype); // true  

// 方法2：通过 instanceof 检查继承关系  
console.log(child instanceof Parent); // true  

比喻：这就像检查身份证上的户籍信息，确认对象是否属于某个“家族”（构造函数）。

2. 区分实例属性与原型属性

通过 hasOwnProperty() 方法判断属性是否直接存在于实例：

const obj = { name: "Alice" };  
obj.constructor.prototype.age = 25;  

console.log(obj.hasOwnProperty("name")); // true（实例属性）  
console.log(obj.hasOwnProperty("age")); // false（原型属性）  

误区：若未区分两者，可能误删原型上的共享方法：

delete obj.age; // 不会删除原型上的 age，但可能引发错误  

3. 遍历原型链

通过循环 __proto__ 属性可手动遍历原型链：

function printPrototypeChain(obj) {  
  let current = obj;  
  while (current) {  
    console.log(current.constructor.name);  
    current = Object.getPrototypeOf(current);  
  }  
}  

const exampleObj = {};  
printPrototypeChain(exampleObj); // 输出 "Object", "Function", "..."  

深入 Prototype 测试：继承链的验证与调试

场景1：验证子类是否继承父类方法

function Vehicle() {}  
Vehicle.prototype.move = function() { return "移动中！"; };  

function Bike() {}  
Bike.prototype = Object.create(Vehicle.prototype); // 正确设置原型链  

const myBike = new Bike();  
console.log(myBike.move()); // "移动中！"  

测试逻辑：

• 确保 Bike.prototype 的原型指向 Vehicle.prototype。
• 验证 myBike 能调用父类的 move() 方法。

场景2：检测原型方法的意外覆盖

function Parent() {}  
Parent.prototype.sayHi = function() { return "Parent says Hi!"; };  

const childInstance = new Parent();  
childInstance.sayHi = function() { return "Child says Bye!"; };  

// 错误测试：直接调用 childInstance.sayHi() 会返回覆盖后的内容  
console.log(childInstance.sayHi()); // "Child says Bye!"  
// 正确测试：检查原型上的方法是否未被破坏  
console.log(Parent.prototype.sayHi()); // "Parent says Hi!"  

关键点：通过直接访问原型对象的方法，可避免实例属性的干扰。

实战案例：通过测试 Prototype 解决实际问题

问题描述：子类未正确继承方法

function Animal(name) {  
  this.name = name;  
}  
Animal.prototype.speak = function() {  
  return `${this.name} 在发声！`;  
};  

function Cat(name) {  
  Animal.call(this, name); // 调用父类构造函数  
}  
// 错误：未正确设置 Cat.prototype 的原型  
Cat.prototype = Object.create(Animal.prototype); // 必要步骤！  

const myCat = new Cat("Whiskers");  
console.log(myCat.speak()); // 若未设置原型链会报错  

测试方案：

1. 确认 Cat.prototype 的原型是否指向 Animal.prototype：

   console.log(Object.getPrototypeOf(Cat.prototype) === Animal.prototype); // true  
   

2. 验证 myCat 能访问父类方法：

   console.log(myCat.speak() === "Whiskers 在发声！"); // true  
   

自动化测试与原型测试的结合

使用 Jest 验证 Prototype 方法

// car.js  
class Car {  
  constructor(brand) {  
    this.brand = brand;  
  }  
}  
Car.prototype.start = function() {  
  return `${this.brand} 启动！`;  
};  

// car.test.js  
const { Car } = require('./car');  

test("Car 实例应继承 start 方法", () => {  
  const testCar = new Car("Tesla");  
  expect(testCar.start()).toBe("Tesla 启动！");  
  expect(Object.getPrototypeOf(testCar).constructor).toBe(Car); // 验证原型归属  
});  

此测试确保：

• start 方法存在于 Car.prototype。
• 实例调用方法时返回预期结果。

最佳实践与常见误区

1. 避免直接修改内置对象的 Prototype

// 错误：污染 Array 的原型，可能导致其他代码出错  
Array.prototype.myCustomMethod = function() { /* ... */ };  

// 正确：通过继承或组合实现功能  
class MyArray extends Array {  
  myCustomMethod() { /* ... */ }  
}  

2. 使用 Object.create() 明确原型关系

const obj = Object.create(null); // 创建无原型的对象  
// 或  
const objWithProto = Object.create(Parent.prototype);  

3. 区分 __proto__ 与 prototype

• prototype 是构造函数的属性，指向其原型对象。
• __proto__ 是对象的属性，指向其原型对象。

结论

通过系统化测试 JavaScript 的 Prototype，开发者能有效避免因继承链断裂、方法覆盖或原型污染引发的 Bug。从基础的原型归属验证到复杂继承场景的调试，结合代码示例与自动化测试工具（如 Jest），开发者可以建立起对原型机制的深刻理解。记住：原型链如同“隐形的接力棒”，它将方法与属性逐层传递，而测试正是确保这根接力棒始终正确传递的关键步骤。掌握这一技能，你将更自信地驾驭 JavaScript 的动态特性，写出高效且可靠的代码。