彻底懂原型链，别说你会 JavaScript：核心原理与面试考点

引言

JavaScript 作为一门独特的编程语言，其面向对象编程模型与传统的类式继承语言有显著差异。理解原型（Prototype）和原型链（Prototype Chain）是掌握 JavaScript 继承机制的核心，也是成为高级前端开发者的必备知识。本文将系统讲解这些概念，并探讨相关的类型判断、拷贝技术以及 ES 新特性。

一、原型与原型链的核心概念

1.1 什么是原型？

每个 JavaScript 对象都有一个内置属性 [[Prototype]]（通常称为原型），它指向另一个对象。当访问对象的属性或方法时，如果对象本身没有该成员，JavaScript 引擎会去其原型对象中查找；如果原型对象中也没有，就继续查找原型的原型，直到找到 null 为止。

// 创建基础对象
const animal = {
  type: 'unknown',
  eat() {
    console.log('Eating...');
  }
};

// 创建继承自animal的对象
const dog = Object.create(animal);
dog.type = 'dog';
dog.bark = function() {
  console.log('Woof!');
};

console.log(dog.type); // "dog" - 自身属性
dog.eat(); // "Eating..." - 从原型继承
dog.bark(); // "Woof!" - 自身方法

1.2 构造函数与原型对象

在 JavaScript 中，构造函数用于创建特定类型的对象。每个构造函数都有一个 prototype 属性，这个属性指向一个对象，该对象就是通过此构造函数创建的所有实例的原型。
// 定义构造函数

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

// 在原型上定义方法
Person.prototype.greet = function() {
  return `Hello, I'm ${this.name}`;
};

// 创建实例
const alice = new Person('Alice', 30);
const bob = new Person('Bob', 25);

console.log(alice.greet()); // "Hello, I'm Alice"
console.log(bob.greet()); // "Hello, I'm Bob"

// 验证原型关系
console.log(alice.__proto__ === Person.prototype); // true
console.log(Object.getPrototypeOf(bob) === Person.prototype); // true

注意：__proto__ 是一个非标准的访问器，推荐使用标准方法 Object.getPrototypeOf() 和 Object.setPrototypeOf() 来操作原型。

1.3 原型链的工作原理

原型链是由对象的原型串联而成的链式结构，它是 JavaScript 实现继承的基础。当访问一个对象的属性时，解析器会沿着原型链向上查找，直到找到对应属性或到达链的末端（null）。

// 原型链结构示例
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__ === null); // true

// alice的完整原型链
// alice -> Person.prototype -> Object.prototype -> null

所有对象最终都继承自 Object.prototype，而 Object.prototype 的原型是 null，标志着原型链的结束。

原型链示意图:

二、数据类型判断的三种方式

在 JavaScript 中，准确判断数据类型是常见需求，不同方法各有优劣：

2.1 typeof 操作符

`typeof` 返回一个表示数据类型的字符串，适用于基本类型判断：
console.log(typeof 42); // "number"
console.log(typeof "hello"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" - 历史遗留bug
console.log(typeof {}); // "object"
console.log(typeof []); // "object" - 数组也是对象
console.log(typeof function() {}); // "function"

特点：

• 简单快捷，适用于基本类型（除 null 外）
• 无法区分对象、数组、日期等引用类型
• 对 null 判断结果不准确

2.2 instanceof 操作符

instanceof 用于检测构造函数的 prototype 是否出现在对象的原型链上：

console.log([] instanceof Array); // true
console.log([] instanceof Object); // true
console.log({} instanceof Object); // true
console.log(new Date() instanceof Date); // true
console.log("hello" instanceof String); // false
console.log(new String("hello") instanceof String); // true

特点：

• 适用于判断对象的具体类型
• 基于原型链判断，可能存在多继承的判断结果
• 无法判断基本类型（除非是包装对象）

2.3 Object.prototype.toString.call()

这是最可靠的类型判断方法，返回统一格式的类型字符串：

console.log(Object.prototype.toString.call(42)); // "[object Number]"
console.log(Object.prototype.toString.call("hello")); // "[object String]"
console.log(Object.prototype.toString.call(true)); // "[object Boolean]"
console.log(Object.prototype.toString.call(undefined)); // "[object Undefined]"
console.log(Object.prototype.toString.call(null)); // "[object Null]"
console.log(Object.prototype.toString.call({})); // "[object Object]"
console.log(Object.prototype.toString.call([])); // "[object Array]"
console.log(Object.prototype.toString.call(function() {})); // "[object Function]"
console.log(Object.prototype.toString.call(new Date())); // "[object Date]"

特点：

• 能够准确判断所有数据类型，包括 null 和 undefined
• 返回格式统一，便于解析和处理
• 是通用且推荐的类型判断方案

三、浅拷贝与深拷贝

在处理对象和数组时，拷贝操作非常常见，根据拷贝深度可分为：

3.1 浅拷贝

浅拷贝创建新对象，但新对象中的引用类型属性仍然指向原对象的对应属性：

const original = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    country: 'USA'
  }
};

// 浅拷贝方法1: Object.assign()
const copy1 = Object.assign({}, original);

// 浅拷贝方法2: 扩展运算符
const copy2 = { ...original };

// 修改基本类型属性不影响
original.name = 'Jane';
console.log(copy1.name); // "John"

// 修改引用类型属性会影响拷贝对象
original.address.city = 'Los Angeles';
console.log(copy2.address.city); // "Los Angeles"
常用的浅拷贝方法：
- `Object.assign()`
- 扩展运算符 `...`
- `Array.prototype.slice()`
- `Array.prototype.concat()`

3.2 深拷贝

深拷贝创建完全独立的新对象，递归复制所有层级的属性：
// 实现一个简单的深拷贝函数

function deepClone(obj) {
  // 处理null和基本类型
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  
  // 处理日期
  if (obj instanceof Date) {
    return new Date(obj);
  }
  
  // 处理数组
  if (obj instanceof Array) {
    return obj.map(item => deepClone(item));
  }
  
  // 处理普通对象
  const clone = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key]);
    }
  }
  return clone;
}

// 使用示例
const original = {
  name: 'John',
  address: { city: 'New York' }
};

const deepCopy = deepClone(original);
original.address.city = 'London';
console.log(deepCopy.address.city); // "New York" - 不受影响

3.3 ES2022 新特性：structuredClone()

ES2022 引入了原生深拷贝 API structuredClone()：

const original = {
  name: 'John',
  age: 30,
  address: { city: 'New York' },
  birthDate: new Date(1990, 0, 1)
};

const cloned = structuredClone(original);

original.address.city = 'Paris';
console.log(cloned.address.city); // "New York" - 深拷贝成功
console.log(cloned.birthDate instanceof Date); // true - 正确复制日期对象

限制：

• 不能克隆函数、Symbol
• 不能处理循环引用
• 某些内置对象（如 RegExp）的克隆有特殊行为
• 不能克隆 Map 和 Set 中的函数值

四、原型和原型链的优缺点

优点

1. 动态灵活性：可以在运行时为原型添加方法，所有实例都能立即使用

function Car(model) {
  this.model = model;
}

const myCar = new Car('Tesla');

// 运行时添加方法
Car.prototype.drive = function() {
  console.log(`${this.model} is driving`);
};

myCar.drive(); // "Tesla is driving" - 已创建的实例也能使用新方法

2. 内存高效：所有实例共享原型上的方法，而非每个实例单独拥有

3. 简洁的继承实现：通过原型链轻松实现继承，无需复杂的类层次

缺点

1. 理解难度大：原型链概念抽象，对初学者不友好

2. 意外修改风险：修改原型会影响所有相关实例，可能导致难以追踪的 bug

// 危险操作：修改内置原型
Array.prototype.forEach = function() {
  console.log('被篡改了!');
};

[1, 2, 3].forEach(item => console.log(item)); // 输出 "被篡改了!" 而非数组元素

3. 缺乏严格结构：相比类继承，原型继承结构不够清晰，大型项目中可能导致维护困难

4. 构造函数参数传递问题：原型链继承中，父类构造函数的参数传递不够直观

五、总结

原型和原型链是 JavaScript 面向对象编程的基础，理解它们对于掌握这门语言至关重要。尽管 ES6 引入了 class 语法糖，但其底层仍然是基于原型的机制。

在实际开发中，我们需要：

• 根据场景选择合适的类型判断方法（推荐 Object.prototype.toString.call()）
• 理解浅拷贝与深拷贝的区别，合理使用 structuredClone() 等工具
• 善用原型链的灵活性，同时避免其潜在风险

深入理解这些概念，将帮助我们编写更高效、更可维护的 JavaScript 代码，应对复杂的前端开发挑战。