备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

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

2024-01-26 33
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 揭秘原型链：探索 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
前端开发
开发者
关键词：
JavaScript原型链
JavaScript面向对象编程
原型链JavaScript面向对象编程
原型链JavaScript
阿珊和她的猫
目录
相关文章
小老头头头头
|
8天前
|
JavaScript
什么是js的原型链
什么是js的原型链
小老头头头头
19 1
龙大吉
|
1月前
|
JavaScript 前端开发
在JavaScript中，如何优化原型链的性能？
在JavaScript中，如何优化原型链的性能？
龙大吉
16 2
龙大吉
|
1月前
|
JavaScript 前端开发
谈谈对 JavaScript 中的原型链的理解。
谈谈对 JavaScript 中的原型链的理解。
龙大吉
18 1
Boale_H
|
1月前
|
JavaScript 前端开发
js继承的超详细讲解：原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承、class继承
js继承的超详细讲解：原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承、class继承
Boale_H
55 0
阿珊和她的猫
|
1月前
|
JavaScript 前端开发
深入理解 JavaScript 对象原型，解密原型链之谜（下）
深入理解 JavaScript 对象原型，解密原型链之谜（下）
阿珊和她的猫
23 0
阿珊和她的猫
|
1月前
|
JavaScript 前端开发
深入理解 JavaScript 对象原型，解密原型链之谜（上）
深入理解 JavaScript 对象原型，解密原型链之谜（上）
阿珊和她的猫
24 0
m0_黎明
|
2月前
|
JavaScript 前端开发
解释一下js的原型和原型链
解释一下js的原型和原型链
m0_黎明
17 0
鑫宝Code
|
2月前
|
JavaScript 前端开发 索引
【JavaScript】面试手撕数组原型链(易)
续借上文，这篇文章主要讲的是数组原型链相关的考题，有些人可能会纳闷，数组和原型链之间有什么关系呢？我们日常使用的数组forEach,map等都是建立在原型链之上的。举个🌰，如我有一个数组const arr = [1,2,3]我想要调用arr.sum方法对arr数组的值进行求和，该如何做呢？我们知道数组没有sum函数，于是我们需要在数组的原型上定义这个函数，才能方便我们调用，具体代码如下。接下来我们就是采用这种方式去实现一些数组常用的方法。
鑫宝Code
39 6
会敲代码的_TT
|
2月前
|
前端开发 JavaScript
前端深入理解JavaScript面向对象编程与Class
随着JavaScript的发展，ECMAScript 6（ES6）引入了许多新的语言特性和语法糖，其中包括了面向对象编程的Class（类）机制。Class提供了一种更简洁、更直观的方式来定义对象和操作对象的行为。本文将介绍ES6中Class的概念、语法和特性，并通过示例代码来说明其实际应用。
会敲代码的_TT
55 1
jcLee95
|
3月前
|
存储 JavaScript 前端开发
JavaScript中的类型、面向对象编程 深度解析
JavaScript中的类型、面向对象编程 深度解析
jcLee95
13 0

热门文章

最新文章

  • 1
    JavaScript基础语法（codewhy版本）（一）
  • 2
    JavaScript 权威指南第七版（GPT 重译）（三）(1)
  • 3
    JavaScript高级笔记-coderwhy版本（六）
  • 4
    JavaScript 权威指南第七版（GPT 重译）（六）(4)
  • 5
    JavaScript 权威指南第七版（GPT 重译）（四）(4)
  • 6
    JavaScript 权威指南第七版（GPT 重译）（二）(1)
  • 7
    JavaScript 权威指南第七版（GPT 重译）（六）(3)
  • 8
    JavaScript 权威指南第七版（GPT 重译）（三）(2)
  • 9
    报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决？
  • 10
    在Blazor中使用Chart.js快速创建图表
  • 1
    监控内网电脑软件设计与实现：基于Node.js的服务器端架构分析
    104
  • 2
    Java Script 中的垃圾回收机制有哪些缺点
    13
  • 3
    描述 JavaScript 中的垃圾回收机制。
    20
  • 4
    如何使用 JavaScript 操作 DOM？
    15
  • 5
    解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
    19
  • 6
    JavaScript 中的数组方法有哪些？
    10
  • 7
    JS设置日期为0时0分0秒
    27
  • 8
    JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
    24
  • 9
    JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
    21
  • 10
    深入理解JavaScript中的闭包与作用域链
    9

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Python语言基础 - 函数、面向对象、异常处理
  • 5天玩转Java面向对象编程
  • Java面向对象编程
  • Java面向对象开发

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 面向对象-1：类的定义
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）