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

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

七、原型和原型链

JavaScript是一门支持面向对象编程的语言,它的函数是第一公民,同时也拥有类的概念。不同于传统的基于类的继承,JavaScript的类和继承是基于原型链模型的。在ES2015/ES6中引入了class关键字,但其本质仍然是基于原型链的语法糖。

 

image.png

proto

1.原型(Prototype)

原型(Prototype)是JavaScript中对象的一个特殊属性,它用于实现属性和方法的继承。在JavaScript中,每个对象都有一个原型属性,它指向另一个对象,这个对象被称为原型对象。通过原型链,对象可以从原型对象继承属性和方法。

 

原型的概念可以用以下方式解释:每个JavaScript对象都是基于一个构造函数创建的,构造函数是对象的模板或蓝图。在创建对象时,构造函数会创建一个关联的原型对象,对象通过原型链继承原型对象上的属性和方法。原型对象是一个普通的JavaScript对象,它具有自己的属性和方法。

 

让我们以一个示例来说明原型的概念和作用:

 

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

 

在这个示例中,我们定义了一个构造函数Person,它有一个name属性。然后,我们通过给原型对象Person.prototype添加一个sayHello方法,使得所有通过Person构造函数创建的实例都可以访问该方法。我们创建了两个实例person1和person2,并分别调用了sayHello方法。

 

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

 

  • 继承:原型链允许对象继承其原型对象上的属性和方法。通过原型链,子对象可以访问和复用父对象的属性和方法,实现了继承的概念
  • 代码复用和共享:通过将方法和属性定义在原型对象上,可以实现多个对象共享相同的方法和属性。这样可以节省内存空间,提高性能,同时也方便了代码的维护和扩展。

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

 

+----------------------+
           |     Object.prototype |
           +----------------------+
                      ^
                      |
           +----------------------+
           |    Constructor.prototype |
           +----------------------+
                      ^
                      |
           +----------------------+
           |       Object instance |
           +----------------------+

 

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

 

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