带你读《现代Javascript高级教程》七、原型和原型链(3)

简介: 带你读《现代Javascript高级教程》七、原型和原型链(3)

带你读《现代Javascript高级教程》七、原型和原型链(2)https://developer.aliyun.com/article/1349649?groupCode=tech_library


3.原型链

原型链是 JavaScript 中对象之间通过原型链接起来的机制,用于实现属性和方法的继承。它是由一系列的原型对象组成,每个对象都有一个指向其原型对象的连接,形成了一条链式结构。

 

原型链的概念可以通过以下方式解释:在 JavaScript 中,每个对象都有一个内部属性 [[Prototype]](__proto__),它指向该对象的原型。当我们访问一个对象的属性或方法时,如果该对象本身没有这个属性或方法,JavaScript 引擎会自动沿着原型链向上查找,直到找到匹配的属性或方法或者到达原型链的顶部(Object.prototype)

 

让我们通过一个示例来说明原型链的概念和工作原理:

 

// 父对象构造函数function Parent() {
  this.name = "Parent";}
// 在父对象原型上添加方法Parent.prototype.sayHello = function() {
  console.log("Hello, I am " + this.name);};
// 子对象构造函数function Child() {
  this.name = "Child";}
// 通过原型继承建立子对象和父对象的连接Child.prototype = Object.create(Parent.prototype);
// 创建子对象实例var child = new Child();
// 调用父对象原型上的方法
child.sayHello(); // 输出: "Hello, I am Child"

 

在这个示例中,我们定义了一个父对象构造函数 Parent,它有一个属性 name 和一个原型方法 sayHello。然后,我们定义了一个子对象构造函数 Child,它也有一个属性 name。通过 Object.create() 方法,我们将子对象的原型连接到父对象的原型上,建立了子对象和父对象之间的原型链关系。

 

最后,我们创建了子对象实例 child,并调用了父对象原型上的方法 sayHello

 

以下是一个简单的原型链示意图:

 

 

+----------------------+
           |     Object.prototype |
           +----------------------+
                      ^
                      |
           +----------------------+
           |   Parent.prototype    |
           +----------------------+
                      ^
                      |
           +----------------------+
           |   Child.prototype     |
           +----------------------+
                      ^
                      |
           +----------------------+
           |     Child instance    |
           +----------------------+

 

在这个示意图中,Object.prototype 是所有对象的顶层原型,Parent.prototype 是父对象的原型,Child.prototype 是子对象的原型,Child instance 是基于子对象构造函数创建的对象实例。

 

原型链的重要性体现在以下几个方面:

 

  • 继承:原型链允许对象通过继承获取其他对象的属性和方法。子对象可以继承父对象的属性和方法,而父对象又可以继承更上层对象的属性和方法,以此类推。
  • 代码复用和共享:通过原型链,我们可以在原型对象上定义方法和属性,从而实现多个对象之间的方法共享和代码复用。这样可以节省内存空间,提高性能,并减少代码的冗余。
  • 扩展和修改:通过在原型对象上添加新的方法和属性,我们可以在整个原型链中的所有对象实例上访问和使用这些扩展。这样可以方便地对现有对象进行功能扩展和修改。


带你读《现代Javascript高级教程》七、原型和原型链(4)https://developer.aliyun.com/article/1349647?groupCode=tech_library

相关文章
|
12天前
|
设计模式 JavaScript 前端开发
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
JavaScript的继承机制基于原型链,它定义了对象属性和方法的查找规则。每个对象都有一个原型,通过原型链,对象能访问到构造函数原型上的方法。例如`Animal.prototype`上的`speak`方法可被`Animal`实例访问。原型链的尽头是`Object.prototype`,其`[[Prototype]]`为`null`。继承方式包括原型链继承(通过`Object.create`)、构造函数继承(使用`call`或`apply`)和组合继承(结合两者)。ES6的`class`语法是语法糖,但底层仍基于原型。继承选择应根据需求,理解原型链原理对JavaScript面向对象编程至关重要
24 7
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
|
13天前
|
前端开发 JavaScript 安全
高级前端开发需要知道的 25 个 JavaScript 单行代码
1. 不使用临时变量来交换变量的值 2. 对象解构,让数据访问更便捷 3. 浅克隆对象 4. 合并对象 5. 清理数组 6. 将 NodeList 转换为数组 7. 检查数组是否满足指定条件 8. 将文本复制到剪贴板 9. 删除数组重复项 10. 取两个数组的交集 11. 求数组元素的总和 12. 根据指定条件判断,是否给对象的属性赋值 13. 使用变量作为对象的键 14. 离线状态检查器 15. 离开页面弹出确认对话框 16. 对象数组,根据对象的某个key求对应值的总和 17. 将 url 问号后面的查询字符串转为对象 18. 将秒数转换为时间格式的字符串 19.
23 3
高级前端开发需要知道的 25 个 JavaScript 单行代码
|
3天前
|
JavaScript
js奥义:原型与原型链(1)
js奥义:原型与原型链(1)
|
13天前
|
JavaScript 前端开发
JavaScript进阶-原型链与继承
【6月更文挑战第18天】JavaScript的原型链和继承是其面向对象编程的核心。每个对象都有一个指向原型的对象链,当查找属性时会沿着此链搜索。原型链可能导致污染、效率下降及构造函数与原型混淆的问题,应谨慎扩展原生原型、保持原型结构简洁并使用`Object.create`或ES6的`class`。继承方式包括原型链、构造函数、组合继承和ES6的Class继承,需避免循环引用、方法覆盖和不当的构造函数使用。通过代码示例展示了这两种继承形式,理解并有效利用这些机制能提升代码质量。
|
3天前
|
前端开发 JavaScript 容器
程序技术好文:纯原生javascript下拉框表单美化实例教程
程序技术好文:纯原生javascript下拉框表单美化实例教程
|
5天前
|
JavaScript 前端开发 Java
深入ES6:解锁 JavaScript 类与继承的高级玩法
深入ES6:解锁 JavaScript 类与继承的高级玩法
|
5天前
|
前端开发 JavaScript 安全
解锁 JavaScript ES6:函数与对象的高级扩展功能
解锁 JavaScript ES6:函数与对象的高级扩展功能
|
9天前
|
JavaScript 前端开发
JS原型链
JS原型链
8 0
|
25天前
|
Web App开发 资源调度 JavaScript
【保姆级】前端使用node.js基础教程
【6月更文挑战第3天】Node.js 是基于 Chrome V8 引擎的 JavaScript 运行环境,用于服务器端编程。常用命令包括:安装 Node.js,通过 `node -v` 查看版本;使用 npm(Node 包管理器)进行初始化、安装/卸载包、查看版本和更新;运行 `.js` 脚本;使用 `node inspect` 调试;借助 nodemon 实现自动重启;通过 `npm list` 管理包;
11 0
|
2月前
|
JavaScript 前端开发
前端 JS 经典:原型和原型链
前端 JS 经典:原型和原型链
26 0