带你读《现代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

相关文章
|
3天前
|
JavaScript 前端开发
js开发:请解释原型继承和类继承的区别。
JavaScript中的原型继承和类继承用于共享对象属性和方法。原型继承通过原型链实现共享,节省内存,但不支持私有属性。
19 0
|
3天前
|
JavaScript 前端开发 安全
JavaScript原型链的使用
【4月更文挑战第22天】JavaScript中的原型链是理解继承的关键,它允许对象复用属性和方法,减少代码冗余。示例展示如何通过原型链实现继承、扩展内置对象、构造函数与原型链的关系以及查找机制。应注意避免修改`Object.prototype`,使用安全方式设置原型链,并谨慎处理构造函数和副作用。
|
3天前
|
JavaScript 前端开发 网络安全
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
16 4
|
3天前
|
Web App开发 JavaScript 前端开发
《手把手教你》系列技巧篇(三十九)-java+ selenium自动化测试-JavaScript的调用执行-上篇(详解教程)
【5月更文挑战第3天】本文介绍了如何在Web自动化测试中使用JavaScript执行器(JavascriptExecutor)来完成Selenium API无法处理的任务。首先,需要将WebDriver转换为JavascriptExecutor对象,然后通过executeScript方法执行JavaScript代码。示例用法包括设置JS代码字符串并调用executeScript。文章提供了两个实战场景:一是当时间插件限制输入时,用JS去除元素的readonly属性;二是处理需滚动才能显示的元素,利用JS滚动页面。还给出了一个滚动到底部的代码示例,并提供了详细步骤和解释。
31 10
|
23小时前
|
JavaScript 前端开发
web前端JS高阶面试题(1),高级开发工程师面试
web前端JS高阶面试题(1),高级开发工程师面试
|
23小时前
|
前端开发 JavaScript
前端 js 经典:原型对象和原型链
前端 js 经典:原型对象和原型链
11 1
|
1天前
|
JavaScript 前端开发
JavaScript高级四、高阶技巧
JavaScript高级四、高阶技巧
|
2天前
|
JavaScript 前端开发
JavaScript 原型链继承:掌握面向对象的基础
JavaScript 原型链继承:掌握面向对象的基础
|
3天前
|
JavaScript 前端开发
在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
【5月更文挑战第11天】JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
18 2
|
3天前
|
存储 JavaScript 前端开发
Javascript教程
Javascript教程
9 0