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

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

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


2.构造函数和原型对象

构造函数是用于创建对象的特殊函数。它通常以大写字母开头,通过使用 new 关键字来调用构造函数,我们可以创建一个新的对象实例。构造函数在创建对象时可以执行一些初始化操作,并为对象添加属性和方法。

 

原型对象是构造函数的一个属性,它是一个普通的 JavaScript 对象。原型对象上的属性和方法可以被通过构造函数创建的对象实例所继承。通过将属性和方法定义在原型对象上,我们可以实现方法的共享和节省内存空间。

 

让我们通过一个示例来说明构造函数和原型对象的概念以及如何使用它们来创建对象和共享方法:

 

// 构造函数function Person(name, age) {
  this.name = name;
  this.age = age;}
// 在原型对象上添加方法Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");};
// 创建对象实例var person1 = new Person("John", 25);var person2 = new Person("Alice", 30);
// 调用共享的方法
person1.sayHello(); // 输出: "Hello, my name is John and I am 25 years old."
person2.sayHello(); // 输出: "Hello, my name is Alice and I am 30 years old."

 

在这个示例中,我们定义了一个构造函数 Person,它接受 name age 参数,并将它们赋值给对象的属性。

 

然后,我们通过在原型对象 Person.prototype 上添加一个方法 sayHello,使得通过 Person 构造函数创建的对象实例可以访问该方法。我们创建了两个对象实例 person1 person2,并分别调用了共享的方法 sayHello

 

以下是一个简单的构造函数和原型对象的流程图示意图:


 

+----------------------------------+
|           Constructor            |
|                                  |
|  +--------------------------+    |
|  |   Prototype Properties   |    |
|  +--------------------------+    |
|                                  |
|  - Property: name               |
|  - Property: age                |
|  - Method: sayHello()           |
|                                  |
+----------------------------------+
        ^
        |
        |
+----------------------------------+
|          Object Instance         |
|                                  |
|  +--------------------------+    |
|  |     Instance Properties   |    |
|  +--------------------------+    |
|                                  |
|  - Property: name               |
|  - Property: age                |
|                                  |
+----------------------------------+

 

在这个示意图中,构造函数和原型对象之间存在关联,构造函数拥有原型对象的引用。通过构造函数,我们可以创建对象实例,并且这些实例可以通过原型对象继承原型上的属性和方法。


带你读《现代Javascript高级教程》七、原型和原型链(3)https://developer.aliyun.com/article/1349648?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