AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

揭秘原型链：探索 JavaScript 面向对象编程的核心（上）

2024-01-26 316
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 揭秘原型链：探索 JavaScript 面向对象编程的核心（上）

一、引言

原型链的定义和背景

原型链是 JavaScript 中一种用于实现继承和共享属性的机制。

它基于原型对象和原型链的概念，允许对象之间共享属性和方法。

在 JavaScript 中，每个对象都有一个原型对象（Prototype），它是一个包含该对象的属性和方法的对象。当你访问一个对象的属性或方法时，如果该对象本身没有定义这个属性或方法，那么 JavaScript 会沿着原型链向上查找，直到找到定义了该属性或方法的原型对象。

原型链的背景是为了实现继承和代码复用。在 JavaScript 中，没有像其他面向对象语言中的类继承机制，而是通过原型链来实现继承。通过将一个对象的原型对象设置为另一个对象，就可以实现继承，从而使子对象可以访问父对象的属性和方法。

原型链的工作方式可以用下面的图来表示：

Object ---> Person ---> Employee

在这个例子中，Person 是 Employee 的原型对象，Employee 可以访问 Person 中的属性和方法。同样，Object 是所有对象的原型对象，因此 Person 和 Employee 都可以访问 Object 中的属性和方法。

原型链是 JavaScript 中非常重要的概念，它对于实现继承、代码复用和对象的扩展都非常有用。理解原型链的工作原理对于深入理解 JavaScript 的面向对象编程特性非常重要。

原型链在 JavaScript 中的重要性

原型链在 JavaScript 中具有重要的作用，主要体现在以下几个方面：

  1. 实现继承：原型链是 JavaScript 中实现继承的主要机制。通过将一个对象的原型对象设置为另一个对象，可以实现子对象继承父对象的属性和方法。这种继承方式可以实现代码的复用和扩展，提高了开发效率。
  2. 共享属性和方法：原型链允许对象之间共享属性和方法。当多个对象需要共享相同的属性或方法时，可以将这些属性或方法定义在一个原型对象中，然后将该原型对象作为这些对象的原型。这样，所有的子对象都可以访问和使用这些共享的属性和方法，避免了代码的重复定义。
  3. 动态扩展对象：原型链使得对象可以在运行时动态地扩展。通过向原型对象中添加属性或方法，可以在不修改原始对象的情况下为其添加新的功能。这种动态扩展对象的能力提高了代码的灵活性和可维护性。
  4. 理解面向对象编程：原型链是理解 JavaScript 面向对象编程的关键概念之一。它提供了一种不同于其他面向对象语言中的类继承机制的方式，帮助开发者更好地理解 JavaScript 中的对象、属性和方法的关系。

总之，原型链在 JavaScript 中扮演着重要的角色，它提供了一种灵活、高效的方式来实现继承、共享属性和方法，以及动态扩展对象。理解原型链对于深入理解 JavaScript 的面向对象编程特性和开发高效的 JavaScript 代码非常重要。

二、原型链的基本概念

对象原型

在 JavaScript 中，对象原型（Object Prototype）是指一个对象用于定义其他对象的属性和方法的模板。每个对象都有一个关联的原型对象，它可以被用来共享属性和方法，从而实现继承和代码复用。

当你创建一个新的对象时，它会自动继承其原型对象的属性和方法。你可以通过对象的 __proto__ 属性来访问其原型对象，也可以通过 Object.getPrototypeOf() 方法来获取对象的原型对象。

原型对象本身也是一个对象，它可以有自己的属性和方法。当你访问一个对象的属性或方法时，如果该对象本身没有定义这个属性或方法，JavaScript 会沿着原型链向上查找，直到找到定义了该属性或方法的原型对象。

通过原型链，你可以实现对象之间的继承。一个对象可以将另一个对象作为其原型，从而继承该对象的属性和方法。这种继承方式与其他面向对象语言中的类继承机制不同，它是基于原型对象的继承。

原型链在 JavaScript 中非常重要，它是实现继承、共享属性和方法、动态扩展对象等功能的基础。理解原型链对于深入理解 JavaScript 的面向对象编程特性和开发高效的 JavaScript 代码非常重要。

原型链的结构

原型链是一个由对象和它们的原型对象组成的链，用于实现继承和共享属性和方法。

下面是一个简单的示例来展示原型链的结构：

// 创建一个 Person 类
function Person(name, age) {
  this.name = name;
  this.age = age;
}
// 创建一个 Employee 类，继承自 Person 类
function Employee(salary) {
  Person.call(this, "John", 30); // 调用 Person 类的构造函数
  this.salary = salary;
}
// 为 Person 类添加一个方法
Person.prototype.getInfo = function() {
  return `姓名：${this.name}，年龄：${this.age}`;
};
// 为 Employee 类添加一个方法
Employee.prototype.getSalary = function() {
  return this.salary;
};
// 创建 Person 对象和 Employee 对象
const person = new Person("John", 30);
const employee = new Employee(5000);
// 访问对象的属性和方法
console.log(person.getInfo()); // 输出：姓名：John，年龄：30
console.log(employee.getInfo()); // 输出：姓名：John，年龄：30
console.log(employee.getSalary()); // 输出：5000

在这个示例中，我们创建了两个类：Person 和 Employee。Employee 类继承自 Person 类，通过调用 Person 类的构造函数来初始化 Employee 对象的属性。

每个类都有一个原型对象，它是一个用于共享属性和方法的模板。在这个例子中，Person.prototype 和 Employee.prototype 分别是 Person 类和 Employee 类的原型对象。

当我们创建 person 和 employee 对象时，它们会自动继承其类的原型对象的属性和方法。因此，person 对象可以访问 Person.prototype 上的 getInfo 方法，而 employee 对象可以访问 Person.prototype 上的 getInfo 方法以及 Employee.prototype 上的 getSalary 方法。

原型链的结构可以用下面的图来表示：

Person.prototype -> Person
Employee.prototype -> Person.prototype -> Object.prototype -> null
person -> Employee.prototype -> Person.prototype -> Object.prototype -> null
employee -> Employee.prototype -> Person.prototype -> Object.prototype -> null

在这个图中，每个对象都有一个指向其原型对象的指针（__proto__ 属性），从而形成了一个原型链。当访问一个对象的属性或方法时，如果该对象本身没有定义这个属性或方法，JavaScript 会沿着原型链向上查找，直到找到定义了该属性或方法的原型对象。

通过原型链，我们可以实现继承、共享属性和方法、动态扩展对象等功能。理解原型链对于深入理解 JavaScript 的面向对象编程特性和开发高效的 JavaScript 代码非常重要。

三、原型链的工作原理

继承和属性共享

在 JavaScript 中，继承和属性共享是通过原型链实现的。

继承是指一个类（子类）可以从另一个类（父类）中继承属性和方法。子类可以访问父类的属性和方法，并且可以根据需要覆盖或扩展这些属性和方法。在上面的示例中，Employee 类从 Person 类继承了属性和方法，因此 employee 对象可以访问 Person 类的属性和方法。

属性共享是指多个对象可以共享相同的属性和方法。这是通过原型对象实现的。原型对象是一个用于共享属性和方法的模板，所有的子类对象都可以访问原型对象上的属性和方法。在上面的示例中，Person.prototype 和 Employee.prototype 分别是 Person 类和 Employee 类的原型对象，它们用于共享属性和方法。

当我们创建 person 和 employee 对象时，它们会自动继承其类的原型对象的属性和方法。因此，person 对象可以访问 Person.prototype 上的 getInfo 方法，而 employee 对象可以访问 Person.prototype 上的 getInfo 方法以及 Employee.prototype 上的 getSalary 方法。

通过原型链，我们可以实现继承和属性共享，从而提高代码的复用性和可扩展性。理解原型链对于深入理解 JavaScript 的面向对象编程特性和开发高效的 JavaScript 代码非常重要。

原型链的查询过程

原型链的查询过程是指当访问一个对象的属性或方法时，JavaScript 会沿着原型链向上查找，直到找到定义了该属性或方法的原型对象。

以下是一个简单的示例来演示原型链的查询过程：

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.getInfo = function() {
  return `姓名：${this.name}，年龄：${this.age}`;
};
function Employee(salary) {
  Person.call(this, "John", 30); // 调用 Person 类的构造函数
  this.salary = salary;
}
Employee.prototype = Object.create(Person.prototype); // 将 Employee 的原型对象设置为 Person 的原型对象
Employee.prototype.getSalary = function() {
  return this.salary;
};
const person = new Person("John", 30);
const employee = new Employee(5000);
console.log(person.getInfo()); // 输出：姓名：John，年龄：30
console.log(employee.getInfo()); // 输出：姓名：John，年龄：30
console.log(employee.getSalary()); // 输出：5000

在这个示例中，我们创建了两个类：Person 和 Employee。Employee 类继承自 Person 类，通过调用 Person 类的构造函数来初始化 Employee 对象的属性。

每个类都有一个原型对象，它是一个用于共享属性和方法的模板。在这个例子中，Person.prototype 和 Employee.prototype 分别是 Person 类和 Employee 类的原型对象。

当我们创建 person 和 employee 对象时，它们会自动继承其类的原型对象的属性和方法。因此，person 对象可以访问 Person.prototype 上的 getInfo 方法，而 employee 对象可以访问 Person.prototype 上的 getInfo 方法以及 Employee.prototype 上的 getSalary 方法。

当我们访问 person.getInfo() 或 employee.getInfo() 时，JavaScript 会沿着原型链向上查找，直到找到定义了该方法的原型对象。在这个例子中，Person.prototype.getInfo() 方法被找到并执行，因此输出结果为 姓名：John，年龄：30。

当我们访问 employee.getSalary() 时，同样的过程会发生，但是这次 JavaScript 会在 Employee.prototype 上找到定义了该方法的原型对象，并执行 Employee.prototype.getSalary() 方法，因此输出结果为 5000。

通过原型链，我们可以实现继承、共享属性和方法、动态扩展对象等功能。理解原型链对于深入理解 JavaScript 的面向对象编程特性和开发高效的 JavaScript 代码非常重要。

四、原型链的应用

  • 实现继承
  • 共享属性和方法


文章标签：
JavaScript
前端开发
开发者
阿珊和她的猫
目录
相关文章
代码bug生产队
|
JavaScript 前端开发 开发者
理解JavaScript中的原型链：基础与实践
【10月更文挑战第8天】理解JavaScript中的原型链：基础与实践
代码bug生产队
382 0
我是快乐的嘟嘟
|
JavaScript 前端开发
JavaScript 原型链的实现原理是什么？
JavaScript 原型链的实现原理是通过构造函数的`prototype`属性、对象的`__proto__`属性以及属性查找机制等相互配合，构建了一个从对象到`Object.prototype`的链式结构，实现了对象之间的继承、属性共享和动态扩展等功能，为 JavaScript 的面向对象编程提供了强大的支持。
我是快乐的嘟嘟
449 59
我是快乐的嘟嘟
|
JavaScript 前端开发
原型链在 JavaScript 中的作用是什么？
原型链是 JavaScript 中实现面向对象编程的重要机制之一，它为代码的组织、复用、扩展和多态性提供了强大的支持，使得 JavaScript 能够以简洁而灵活的方式构建复杂的应用程序。深入理解和熟练运用原型链，对于提升 JavaScript 编程能力和开发高质量的应用具有重要意义。
我是快乐的嘟嘟
380 57
游客lijmi4663rgsa
|
数据采集 JavaScript 前端开发
一站搞定原型链：深入理解JavaScript的继承机制
综上所述，可以得出： 1. 原型链是对象通过原型实现属性和方法继承的一种机制。 2. 每个对象都有一个 __proto__ 属性，指向它的原型对象。 3. 每个函数（包括构造函数）都有一个 prototype 属性，指向一个对象，这个对象的属性和方法可以被实例共享。 4. 构造函数创建对象时，新对象的 __proto__ 属性指向构造函数的 prototype 对象。 5. 继承可以通过设置原型对象实现，也可以使用 ES6 的 class 语法糖。 只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一
游客lijmi4663rgsa
495 0
德国都芳最好
|
JavaScript 前端开发
如何使用原型链继承实现 JavaScript 继承？
【10月更文挑战第22天】使用原型链继承可以实现JavaScript中的继承关系，但需要注意其共享性、查找效率以及参数传递等问题，根据具体的应用场景合理地选择和使用继承方式，以满足代码的复用性和可维护性要求。
德国都芳最好
339 1
小周sir
|
JavaScript 前端开发 开发者
探索JavaScript原型链：深入理解与实战应用
【10月更文挑战第21天】探索JavaScript原型链：深入理解与实战应用
小周sir
393 1
chnjames
|
JavaScript 前端开发 Java
JavaScript中的面向对象编程（OOP） - 终极指南
本文介绍了 JavaScript 的面向对象编程 (OOP) 概念，包括继承、多态、封装和抽象等关键要素，并通过代码示例帮助开发者理解和应用 OOP 思维。
chnjames
441 5
小周sir
|
JavaScript 前端开发 开发者
深入理解JavaScript原型链：从基础到进阶
【10月更文挑战第13天】深入理解JavaScript原型链：从基础到进阶
小周sir
561 0
小周sir
|
JavaScript 前端开发 开发者
原型链深入解析：JavaScript中的核心机制
【10月更文挑战第13天】原型链深入解析：JavaScript中的核心机制
小周sir
672 0
小周sir
|
JavaScript 前端开发 安全
深入理解JavaScript原型链：从基础到进阶
【10月更文挑战第13天】深入理解JavaScript原型链：从基础到进阶
小周sir
427 0

热门文章

最新文章

  • 1
    解读 V8 GC Log（一）: Node.js 应用背景与 GC 基础知识
  • 2
    统计项目代码行数轻松搞定：使用 Node.js 脚本自动统计代码量
  • 3
    uniapp、vue、小程序、js图片转base64 示例代码
  • 4
    E聊SDK在TypeScript下的条件编译(使用js-conditional-compile-loader插件)
  • 5
    Javascript Array和String的互转换
  • 6
    nginx and node.js配合使用 helloworld
  • 7
    在前端的JavaScript脚本中，如何高效率的使用数据库中的配置信息
  • 8
    JavaScript操作XML（IE6下）
  • 9
    《你不知道的JavaScript》读书笔记（一）
  • 10
    node.js入门 - 10.api：io
  • 1
    局域网监控其他电脑的设备信息管理 Node.js 跳表算法
    408
  • 2
    Chrome 下载大文件报错！用 Streamsaver.js 完美填坑
    5559
  • 3
    百宝箱开放平台 ✖️ Node.js SDK
    627
  • 4
    电脑管控软件的进程优先级调度：Node.js 红黑树算法
    489
  • 5
    企业上网监控系统的恶意 URL 过滤 Node.js 布隆过滤器算法
    547
  • 6
    JavaScript进阶挑战：巩固核心知识点
    363
  • 7
    js实现promise常用场景使用示例
    523
  • 8
    基于 Node.js 图结构的局域网设备拓扑分析算法在局域网内监控软件中的应用研究
    616
  • 9
    Nest.js控制器深度解析：路由与请求处理的高级特性
    565
  • 10
    js react antd 实现页面低分变率和高分变率下字体大小自适用，主要是配置antd
    615

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！