JavaScript继承与原型链：揭开对象传承的神秘面纱

摸着石头过河的石头2025-10-15 10:55

前言

你是否曾经好奇过，为什么在JavaScript中我们可以调用Array.prototype.push()方法，或者为什么Object.prototype.toString.call([])能够正确返回[object Array]？这些看似简单的操作背后，其实隐藏着JavaScript最核心的设计理念之一------原型链继承机制。

JavaScript的继承系统与传统的基于类（class-based）的面向对象语言（如Java、C++）有很大不同。它采用了一种基于原型（prototype-based）的继承方式，这种设计既有其独特的灵活性，也给初学者带来了不少困惑。在这篇文章中，我将带你深入浅出地理解JavaScript中的继承和原型链概念，从基础原理到高级应用，让你彻底掌握这一核心知识点。

一、理解JavaScript中的对象

在深入探讨继承和原型链之前，我们首先需要明确JavaScript中对象的基本概念。

1.1 什么是对象？

在JavaScript中，对象是属性的集合。这些属性可以是原始值、对象或函数。简单来说，对象就是一个存放相关数据和功能的容器。

javascript 复制代码 
// 创建一个简单的对象
const person = {
  name: "张三",
  age: 25,
  sayHello: function() {
    console.log(`你好，我是${this.name}`);
  }
};

person.sayHello(); // 输出: 你好，我是张三

JavaScript中的对象具有一个特殊的内置属性，通常被称为**[[Prototype]]**（在浏览器控制台中显示为__proto__）。这个属性指向了该对象的原型对象。

1.2 对象的创建方式

在JavaScript中，创建对象有多种方式：

  1. 对象字面量：最简单直接的方式

    javascript 复制代码 
    const obj = { key: "value" };

  2. 构造函数 ：使用new关键字调用函数

    javascript 复制代码 
    function Person() {}
const person = new Person();

  3. Object.create()：基于现有对象创建新对象

    javascript 复制代码 
    const prototypeObj = { greet: () => "Hello" };
const newObj = Object.create(prototypeObj);

  4. ES6的Class语法：更接近传统面向对象的语法糖

    javascript 复制代码 
    class Person {
  constructor(name) {
    this.name = name;
  }
}
const person = new Person("张三");

无论使用哪种方式创建对象，它们都会与原型链建立联系。

二、原型链的基本原理

2.1 什么是原型链？

JavaScript中的每个对象都有一个原型对象，对象从原型对象继承方法和属性。当我们访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript会沿着原型链向上查找，直到找到该属性或方法，或者到达原型链的末端（null）。

让我们通过一个简单的例子来理解原型链的工作原理：

javascript 复制代码 
// 创建一个构造函数
function Animal(name) {
  this.name = name;
}

// 在Animal的原型上添加方法
Animal.prototype.eat = function() {
  console.log(`${this.name}正在进食`);
};

// 创建一个Dog构造函数
function Dog(name, breed) {
  Animal.call(this, name); // 调用Animal构造函数
  this.breed = breed;
}

// 设置Dog的原型为Animal的实例
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// 在Dog的原型上添加方法
Dog.prototype.bark = function() {
  console.log(`${this.name}汪汪叫`);
};

// 创建一个Dog实例
const myDog = new Dog("小黑", "拉布拉多");

myDog.bark(); // 输出: 小黑汪汪叫 (Dog.prototype)
myDog.eat();  // 输出: 小黑正在进食 (Animal.prototype)
myDog.toString(); // 输出: [object Object] (Object.prototype)

在这个例子中，myDog对象的原型链是：myDog -> Dog.prototype -> Animal.prototype -> Object.prototype -> null。当我们调用myDog.eat()时，JavaScript首先检查myDog对象本身是否有eat方法，没有找到就沿着原型链向上查找，最终在Animal.prototype上找到了这个方法。

2.2 构造函数、原型和实例的关系

在JavaScript中，构造函数、原型对象和实例之间存在着三角关系：

  1. 构造函数有一个prototype属性，指向原型对象
  2. 原型对象有一个constructor属性，指向构造函数
  3. 实例对象有一个内部的[[Prototype]]属性，指向原型对象
javascript 复制代码 
function Person() {}
const person = new Person();

console.log(Person.prototype === person.__proto__); // true
console.log(Person.prototype.constructor === Person); // true

三、JavaScript中的继承方式

JavaScript提供了多种实现继承的方式，每种方式都有其优缺点。让我们逐一探讨：

3.1 原型链继承

原型链继承是JavaScript中最基本的继承方式，通过将子类的原型设置为父类的实例来实现继承。

javascript 复制代码 
// 父类
function Parent() {
  this.name = "parent";
  this.colors = ["red", "blue", "green"];
}

Parent.prototype.sayName = function() {
  console.log(this.name);
};

// 子类
function Child() {
  this.age = 18;
}

// 继承 - 将子类的原型设置为父类的实例
Child.prototype = new Parent();
Child.prototype.constructor = Child;

// 创建实例
const child1 = new Child();
const child2 = new Child();

child1.colors.push("black");
console.log(child1.colors); // ["red", "blue", "green", "black"]
console.log(child2.colors); // ["red", "blue", "green", "black"] - 注意这里也被改变了

优点：简单直观，易于实现

缺点：

  1. 所有实例共享父类实例的属性（如上面的colors数组）
  2. 无法向父类构造函数传递参数

3.2 构造函数继承

为了解决原型链继承的问题，我们可以使用构造函数继承，通过在子类构造函数中调用父类构造函数来实现。

javascript 复制代码 
// 父类
function Parent(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}

// 子类
function Child(name, age) {
  // 调用父类构造函数
  Parent.call(this, name);
  this.age = age;
}

// 创建实例
const child1 = new Child("张三", 18);
const child2 = new Child("李四", 20);

child1.colors.push("black");
console.log(child1.colors); // ["red", "blue", "green", "black"]
console.log(child2.colors); // ["red", "blue", "green"] - 这里没有被改变
console.log(child1.sayName); // undefined - 无法继承父类原型上的方法

优点：

  1. 解决了实例共享父类属性的问题
  2. 可以向父类构造函数传递参数

缺点：无法继承父类原型上的方法

3.3 组合继承

组合继承结合了原型链继承和构造函数继承的优点，是JavaScript中最常用的继承模式。

javascript 复制代码 
// 父类
function Parent(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}

Parent.prototype.sayName = function() {
  console.log(this.name);
};

// 子类
function Child(name, age) {
  // 调用父类构造函数（第二次调用Parent）
  Parent.call(this, name);
  this.age = age;
}

// 设置原型链（第一次调用Parent）
Child.prototype = new Parent();
Child.prototype.constructor = Child;

// 添加子类自己的方法
Child.prototype.sayAge = function() {
  console.log(this.age);
};

// 创建实例
const child = new Child("张三", 18);
child.sayName(); // 输出: 张三
child.sayAge(); // 输出: 18

优点：

  1. 解决了实例共享父类属性的问题
  2. 可以继承父类原型上的方法
  3. 可以向父类构造函数传递参数

缺点：父类构造函数被调用了两次，造成了一定的性能损耗

3.4 原型式继承

原型式继承是由道格拉斯·克罗克福德（Douglas Crockford）提出的一种继承方式，它基于已有的对象创建新对象，实现思路类似于Object.create()。

javascript 复制代码 
// 原型式继承函数
function objectCreate(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

// 要继承的对象
const person = {
  name: "张三",
  friends: ["李四", "王五"],
  sayName: function() {
    console.log(this.name);
  }
};

// 创建新对象
const anotherPerson = objectCreate(person);
anotherPerson.name = "赵六";
anotherPerson.friends.push("钱七");

const yetAnotherPerson = objectCreate(person);
yetAnotherPerson.name = "孙八";

console.log(anotherPerson.friends); // ["李四", "王五", "钱七"]
console.log(yetAnotherPerson.friends); // ["李四", "王五", "钱七"] - 注意这里也被改变了

优点：不需要创建构造函数，直接基于现有对象创建新对象

缺点 ：所有实例共享原型对象的属性（如上面的friends数组）

3.5 寄生式继承

寄生式继承是在原型式继承的基础上，增强新创建的对象，为其添加属性和方法。

javascript 复制代码 
// 原型式继承函数
function objectCreate(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

// 寄生式继承函数
function createAnother(original) {
  const clone = objectCreate(original); // 创建新对象
  clone.sayHi = function() { // 增强对象
    console.log("Hi");
  };
  return clone;
}

// 要继承的对象
const person = {
  name: "张三",
  friends: ["李四", "王五"]
};

// 创建新对象
const anotherPerson = createAnother(person);
anotherPerson.sayHi(); // 输出: Hi

优点：可以增强新创建的对象

缺点：

  1. 所有实例共享原型对象的属性
  2. 方法无法复用，每次创建都会创建新的方法函数

3.6 寄生组合式继承

寄生组合式继承结合了组合继承和寄生式继承的优点，是JavaScript中最理想的继承模式。

javascript 复制代码 
// 寄生组合式继承函数
function inheritPrototype(child, parent) {
  const prototype = Object.create(parent.prototype); // 创建父类原型的副本
  prototype.constructor = child; // 修复constructor指向
  child.prototype = prototype; // 设置子类的原型
}

// 父类
function Parent(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}

Parent.prototype.sayName = function() {
  console.log(this.name);
};

// 子类
function Child(name, age) {
  Parent.call(this, name); // 调用父类构造函数
  this.age = age;
}

// 继承父类的原型
inheritPrototype(Child, Parent);

// 添加子类自己的方法
Child.prototype.sayAge = function() {
  console.log(this.age);
};

// 创建实例
const child = new Child("张三", 18);
child.sayName(); // 输出: 张三
child.sayAge(); // 输出: 18

优点：

  1. 解决了实例共享父类属性的问题
  2. 可以继承父类原型上的方法
  3. 可以向父类构造函数传递参数
  4. 避免了父类构造函数被调用两次的问题

缺点：实现相对复杂

3.7 ES6的Class继承

ES6引入了class关键字，提供了更接近传统面向对象语言的语法糖，使继承的实现更加简洁清晰。

javascript 复制代码 
// 父类
class Parent {
  constructor(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
  }
  
  sayName() {
    console.log(this.name);
  }
}

// 子类 - 使用extends关键字继承
class Child extends Parent {
  constructor(name, age) {
    super(name); // 调用父类的constructor
    this.age = age;
  }
  
  sayAge() {
    console.log(this.age);
  }
}

// 创建实例
const child = new Child("张三", 18);
child.sayName(); // 输出: 张三
child.sayAge(); // 输出: 18

优点：

  1. 语法简洁清晰，更接近传统面向对象语言
  2. 解决了之前所有继承方式的问题
  3. 可以使用super关键字调用父类的方法

缺点：本质上是原型继承的语法糖，理解底层原理仍然很重要

四、原型链的高级应用

了解原型链的原理后，我们可以利用它来实现一些高级功能。

4.1 扩展内置对象

我们可以通过扩展内置对象的原型来为其添加新的方法。

javascript 复制代码 
// 为Array扩展一个求和方法
Array.prototype.sum = function() {
  return this.reduce((total, current) => total + current, 0);
};

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.sum()); // 输出: 15

注意：扩展内置对象的原型可能会导致命名冲突或影响第三方库的正常工作，因此在实际开发中应谨慎使用。

4.2 原型混入（Mixins）

原型混入是一种实现代码复用的技术，它允许我们将多个对象的属性和方法合并到一个对象中。

javascript 复制代码 
// 定义多个混入对象
const canEat = {
  eat: function() {
    console.log(`${this.name}正在进食`);
  }
};

const canSleep = {
  sleep: function() {
    console.log(`${this.name}正在睡觉`);
  }
};

// 定义一个构造函数
function Person(name) {
  this.name = name;
}

// 使用Object.assign实现混入
Object.assign(Person.prototype, canEat, canSleep);

// 创建实例
const person = new Person("张三");
person.eat(); // 输出: 张三正在进食
person.sleep(); // 输出: 张三正在睡觉

4.3 实现接口继承

虽然JavaScript没有内置的接口概念，但我们可以通过原型链来模拟接口继承。

javascript 复制代码 
// 定义一个接口
const Serializable = {
  serialize: function() {
    throw new Error("serialize方法必须被实现");
  }
};

// 定义一个构造函数并实现接口
function Person(name) {
  this.name = name;
}

// 继承接口
Person.prototype = Object.create(Serializable);
Person.prototype.constructor = Person;

// 实现接口方法
Person.prototype.serialize = function() {
  return JSON.stringify({ name: this.name });
};

// 创建实例
const person = new Person("张三");
console.log(person.serialize()); // 输出: {"name":"张三"}

五、原型链的常见问题与解决方案

在使用原型链时，我们可能会遇到一些常见问题，下面介绍这些问题及其解决方案。

5.1 原型链过长导致的性能问题

原型链过长会导致属性查找的时间增加，从而影响性能。解决方法是尽量保持原型链的简短，避免不必要的继承层次。

javascript 复制代码 
// 不推荐: 过长的原型链
function A() {}
function B() {}
B.prototype = new A();
function C() {}
C.prototype = new B();
function D() {}
D.prototype = new C();

// 推荐: 保持原型链简短
function Base() {}
function Derived() {}
Derived.prototype = Object.create(Base.prototype);

5.2 意外修改原型对象

直接修改原型对象可能会影响所有基于该原型创建的实例。解决方法是使用Object.freeze()或Object.seal()来保护原型对象。

javascript 复制代码 
// 冻结原型对象，防止被修改
function Person() {}
Person.prototype.sayHello = function() {
  console.log("Hello");
};
Object.freeze(Person.prototype);

// 尝试修改原型对象（将会失败）
Person.prototype.sayGoodbye = function() {
  console.log("Goodbye");
};

const person = new Person();
console.log(typeof person.sayGoodbye); // 输出: undefined

5.3 判断属性是否属于对象自身

使用for...in循环遍历对象的属性时，会遍历到原型链上的所有可枚举属性。解决方法是使用hasOwnProperty()方法来判断属性是否属于对象自身。

javascript 复制代码 
function Person() {
  this.name = "张三";
}

Person.prototype.age = 18;

const person = new Person();

// 使用for...in循环遍历属性
for (const key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(`自有属性: ${key} = ${person[key]}`);
  } else {
    console.log(`继承属性: ${key} = ${person[key]}`);
  }
}
// 输出:
// 自有属性: name = 张三
// 继承属性: age = 18

六、继承与原型链的最佳实践

在实际开发中，我们应该遵循一些最佳实践来正确使用继承和原型链。

6.1 优先使用组合而非继承

继承会导致子类与父类的强耦合，而组合则更加灵活。在设计系统时，我们应该优先考虑组合而非继承。

javascript 复制代码 
// 不推荐: 过度使用继承
class Animal {}
class Dog extends Animal {}
class PetDog extends Dog {}

// 推荐: 优先使用组合
class Animal {}
class Dog extends Animal {
  constructor(name, owner) {
    super();
    this.name = name;
    this.owner = owner; // 组合: Dog包含owner属性
  }
}

6.2 使用ES6的Class语法

ES6的Class语法提供了更清晰、更简洁的方式来实现继承，应该优先使用。

javascript 复制代码 
// 推荐: 使用ES6的Class语法
class Parent {
  constructor(name) {
    this.name = name;
  }
  
  sayName() {
    console.log(this.name);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
}

6.3 保护原型链

避免直接修改内置对象的原型，同时也要注意保护自定义对象的原型不被意外修改。

javascript 复制代码 
// 不推荐: 修改内置对象的原型
Array.prototype.myCustomMethod = function() {};

// 推荐: 创建自定义工具函数
function myCustomFunction(arr) {
  // 对数组进行操作
}

6.4 理解this的指向

在原型方法中，this的指向可能会因为调用方式的不同而改变，需要特别注意。

javascript 复制代码 
function Person(name) {
  this.name = name;
}

Person.prototype.sayName = function() {
  console.log(this.name);
};

const person = new Person("张三");
const sayName = person.sayName;
sayName(); // 输出: undefined (this指向全局对象或undefined)

解决方法是使用bind()、call()或apply()来确保this的正确指向，或者使用箭头函数（在ES6的Class中）。

javascript 复制代码 
// 使用bind
const sayName = person.sayName.bind(person);
sayName(); // 输出: 张三

// 使用箭头函数（在ES6的Class中）
class Person {
  constructor(name) {
    this.name = name;
  }
  
  sayName = () => {
    console.log(this.name);
  };
}

七、深入理解JavaScript的继承模型

JavaScript的原型继承模型与传统的基于类的继承模型有很大不同，理解这种差异对于掌握JavaScript至关重要。

7.1 基于原型 vs 基于类

在基于类的语言中，对象是类的实例，类定义了对象的结构和行为。而在JavaScript中，对象直接从其他对象继承属性和方法，不需要类的定义。

虽然ES6引入了class关键字，但它只是原型继承的语法糖，JavaScript的本质仍然是基于原型的语言。

7.2 委托 vs 复制

JavaScript的继承是通过委托（delegation）实现的，而不是通过复制。当我们访问一个对象的属性时，如果该对象本身没有这个属性，JavaScript会委托给它的原型对象来查找这个属性。

javascript 复制代码 
function Person() {}
Person.prototype.name = "张三";

const person1 = new Person();
const person2 = new Person();

console.log(person1.name); // 输出: 张三 (委托给Person.prototype)
console.log(person2.name); // 输出: 张三 (委托给Person.prototype)

// 修改原型对象的属性
Person.prototype.name = "李四";

console.log(person1.name); // 输出: 李四 (委托的结果也会改变)
console.log(person2.name); // 输出: 李四 (委托的结果也会改变)

7.3 构造函数的本质

在JavaScript中，构造函数只是一个普通的函数，当我们使用new关键字调用它时，它就变成了一个构造函数。new关键字会执行以下操作：

  1. 创建一个新的空对象
  2. 将这个空对象的原型指向构造函数的原型
  3. 将构造函数的this绑定到这个空对象
  4. 执行构造函数体
  5. 如果构造函数没有返回对象，则返回这个新对象
javascript 复制代码 
// 模拟new关键字的行为
function myNew(constructor, ...args) {
  // 创建一个新对象，原型指向构造函数的原型
  const obj = Object.create(constructor.prototype);
  // 调用构造函数，this绑定到新对象
  const result = constructor.apply(obj, args);
  // 如果构造函数返回了对象，则返回该对象，否则返回新对象
  return typeof result === 'object' && result !== null ? result : obj;
}

// 测试
function Person(name) {
  this.name = name;
}

const person1 = myNew(Person, "张三");
const person2 = new Person("李四");

console.log(person1.name); // 输出: 张三
console.log(person2.name); // 输出: 李四

八、总结

JavaScript的继承和原型链是这门语言的核心概念，理解它们对于掌握JavaScript至关重要。本文从基础原理到高级应用，全面介绍了JavaScript中的继承和原型链机制，包括：

  1. 对象、原型和构造函数的基本概念
  2. 原型链的工作原理
  3. 各种继承方式及其优缺点
  4. 原型链的高级应用
  5. 常见问题与解决方案
  6. 最佳实践
  7. JavaScript继承模型的深入理解

通过学习本文，相信你已经对JavaScript的继承和原型链有了更深入的理解。在实际开发中，你应该根据具体需求选择合适的继承方式，并遵循最佳实践来编写高质量的JavaScript代码。

记住，原型链是JavaScript的精髓所在，掌握它将帮助你更好地理解这门语言的设计理念和工作原理。

最后，创作不易请允许我插播一则自己开发的"数规规-排五助手"（有各种预测分析）小程序广告，感兴趣可以微信小程序体验放松放松，程序员也要有点娱乐生活，搞不好就中个排列五了呢？

感兴趣可以搜索微信小程序"数规规排五助手"体验体验！！

如果觉得本文有用，欢迎点个赞👍+收藏⭐+关注支持我吧！

相关推荐
_Mya_3 小时前
后端接口又改了？让 Apifox MCP 帮你自动同步类型定义
前端·人工智能·mcp
_AaronWong3 小时前
一键搞定UniApp WiFi连接！这个Vue 3 Hook让你少走弯路
前端·微信小程序·uni-app
_大学牲3 小时前
Flutter 之魂 GetX🔥（二）全面解析路由管理
前端·flutter
星链引擎3 小时前
客服机器人面向初学者的通俗版
前端
LRH3 小时前
React 双缓存架构与 diff 算法优化
前端·react.js
golang学习记3 小时前
Next.js 16 来了：引领全栈开发新潮流
前端
brzhang3 小时前
我用 Flutter 做了个小游戏，结果发现这玩意有点意思
前端·后端·架构
用户6387994773053 小时前
我把我的 monorepo 迁移到 Bun，这是我的真实反馈
javascript·架构
热门推荐
01两千字总结：Codex 国内如何安装和使用的教程，以及如何设置中文回答02BongoCat - 跨平台键盘猫动画工具03GitHub 镜像站点04UV安装并设置国内源05智能库存管理的需求预测模型：从业务痛点到落地代码的完整实践06Linux下V2Ray安装配置指南07GitLab 零基础入门指南：从安装到项目管理全流程082025羊城杯网络安全大赛 wp0946个Nano-banana 精选提示词，持续更新中10Cursor Plan Mode：AI 终于知道先想后做了