JavaScript 中的面向对象编程---＞构造函数---＞原型对象与原型链，由浅入深详细讲解！

前言：哈喽，大家好，我是前端菜鸟的自我修养！今天给大家分享JavaScript 中的面向对象编程--->构造函数--->原型对象与原型链，由浅入深详细讲解！并提供具体代码帮助大家深入理解，彻底掌握！原创不易，如果能帮助到带大家，欢迎收藏+关注哦 💕

🌈🌈文章目录

一、编程思想

1.面向过程

2.面向对象

二、构造函数

三、原型对象与原型链

1.原型对象

2.constructor 属性

3.对象原型

4.原型继承

5.原型链

一、编程思想

目标：学习 JavaScript 中基于原型的面向对象编程序的语法实现，理解面向对象编程的特征。

1.面向过程

面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。

举个栗子：蛋炒饭

2.面向对象

面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。

在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工。

面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。

面向对象的特性：

  • 封装性

  • 继承性

  • 多态性

二、构造函数

对比以下通过面向对象的构造函数实现的封装：

 <script>function Person() {this.name = '佚名'// 设置名字this.setName = function (name) {this.name = name}// 读取名字this.getName = () => {console.log(this.name)}}​// 实例对像，获得了构造函数中封装的所有逻辑let p1 = new Person()p1.setName('小明')console.log(p1.name)​// 实例对象let p2 = new Person()console.log(p2.name)</script>

封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现的封装。

同样的将变量和函数组合到了一起并能通过 this 实现数据的共享，所不同的是借助构造函数创建出来的实例对象之

间是彼此不影响的。

总结：

  1. 构造函数体现了面向对象的封装特性

  2. 构造函数实例创建的对象彼此独立、互不影响

三、原型对象与原型链

1.原型对象

构造函数通过原型分配的函数是所有对象所共享的。

  • JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象，所以我们也称为原型对象

  • 这个对象可以挂载函数，对象实例化不会多次创建原型上函数，节约内存

  • 我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。

  • 构造函数和原型对象中的this 都指向 实例化的对象

  <script>function Person() {}​// 每个函数都有 prototype 属性console.log(Person.prototype)</script>

了解了 JavaScript 中构造函数与原型对象的关系后，再来看原型对象具体的作用，如下代码所示：

  <script>function Person() {// 此处未定义任何方法}​// 为构造函数的原型对象添加方法Person.prototype.sayHi = function () {console.log('Hi~');}// 实例化let p1 = new Person();p1.sayHi(); // 输出结果为 Hi~</script>

构造函数 Person 中未定义任何方法，这时实例对象调用了原型对象中的方法 sayHi，接下来改动一下代码：

  <script>function Person() {// 此处定义同名方法 sayHithis.sayHi = function () {console.log('嗨!');}}​// 为构造函数的原型对象添加方法Person.prototype.sayHi = function () {console.log('Hi~');}​let p1 = new Person();p1.sayHi(); // 输出结果为 嗨!</script>

构造函数 Person 中定义与原型对象中相同名称的方法，这时实例对象调用则是构造函中的方法 sayHi。

通过以上两个简单示例不难发现 JavaScript 中对象的工作机制：当访问对象的属性或方法时，先在当前实例对象是查找，然后再去原型对象查找，并且原型对象被所有实例共享。

  <script>function Person() {// 此处定义同名方法 sayHithis.sayHi = function () {console.log('嗨!' + this.name)}}​// 为构造函数的原型对象添加方法Person.prototype.sayHi = function () {console.log('Hi~' + this.name)}// 在构造函数的原型对象上添加属性Person.prototype.name = '小明'​let p1 = new Person()p1.sayHi(); // 输出结果为 嗨!let p2 = new Person()p2.sayHi()</script>

总结：结合构造函数原型的特征，实际开发中往往会将封装的功能函数添加到原型对象中。

2.constructor 属性

在哪里？==> 每个原型对象里面都有个constructor 属性（constructor 构造函数）

作用：该属性指向该原型对象的构造函数， 简单理解，就是指向我的爸爸，我是有爸爸的孩子

使用场景：

如果有多个对象的方法，我们可以给原型对象采取对象形式赋值.

但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了

此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。

3.对象原型

对象都会有一个属性 proto 指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法，就是因为对象有 proto 原型的存在。

注意：

  • proto 是JS非标准属性

  • [[prototype]]和proto意义相同

  • 用来表明当前实例对象指向哪个原型对象prototype

  • proto对象原型里面也有一个 constructor属性，指向创建该实例对象的构造函数

4.原型继承

继承是面向对象编程的另一个特征，通过继承进一步提升代码封装的程度，JavaScript 中大多是借助原型对象实现继承的特性。

龙生龙、凤生凤、老鼠的儿子会打洞描述的正是继承的含义。

  <body><script>// 继续抽取   公共的部分放到原型上// const Person1 = {//   eyes: 2,//   head: 1// }// const Person2 = {//   eyes: 2,//   head: 1// }// 构造函数  new 出来的对象 结构一样，但是对象不一样function Person() {this.eyes = 2this.head = 1}// console.log(new Person)// 女人  构造函数   继承  想要 继承 Personfunction Woman() {​}// Woman 通过原型来继承 Person// 父构造函数（父类）   子构造函数（子类）// 子类的原型 =  new 父类  Woman.prototype = new Person()   // {eyes: 2, head: 1} // 指回原来的构造函数Woman.prototype.constructor = Woman​// 给女人添加一个方法  生孩子Woman.prototype.baby = function () {console.log('宝贝')}const red = new Woman()console.log(red)// console.log(Woman.prototype)// 男人 构造函数  继承  想要 继承 Personfunction Man() {​}// 通过 原型继承 PersonMan.prototype = new Person()Man.prototype.constructor = Manconst pink = new Man()console.log(pink)</script></body>

5.原型链

基于原型对象的继承使得不同构造函数的原型对象关联在一起，并且这种关联的关系是一种链状的结构，我们将原型对象的链状结构关系称为原型链

 

 <body><script>// function Objetc() {}console.log(Object.prototype)console.log(Object.prototype.__proto__)​function Person() {​}const ldh = new Person()// console.log(ldh.__proto__ === Person.prototype)// console.log(Person.prototype.__proto__ === Object.prototype)console.log(ldh instanceof Person)console.log(ldh instanceof Object)console.log(ldh instanceof Array)console.log([1, 2, 3] instanceof Array)console.log(Array instanceof Object)</script></body>
 

 
① 当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。
 
② 如果没有就查找它的原型（也就是 proto指向的 prototype 原型对象）
 
③ 如果还没有就查找原型对象的原型（Object的原型对象）
 
④ 依此类推一直找到 Object 为止（null）
 
⑤ proto对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线
 
⑥ 可以使用 instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上
 

 

  好了，本文就到这里吧，点个关注再走嘛~ 
 

 

 
🚀 个人简介：7年开发经验，某大型国企前端负责人，信息系统项目管理师、CSDN优质创作者、阿里云专家博主，华为云云享专家，分享前端相关技术与工作常见问题~
 💟 作    者：前端菜鸟的自我修养❣️
 📝 专    栏：javascript深入研究
 🌈 若有帮助，还请 关注➕点赞➕收藏  ，不行的话我再努努力💪💪💪 
 

 

 
 更多专栏订阅推荐：
 
👍 前端工程搭建
 💕 vue从基础到起飞
 
📝 前端工作常见问题汇总
 
✍️ GIS地图与大数据可视化
 

 












本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/371565.html


如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！











相关文章










【算法训练记录——Day42】








【算法训练记录——Day42】




Day42——动态规划Ⅳ 1.leetcode_1049最后一块石头的重量II2.leetcode_494目标和3.leetcode_474一和零 1.leetcode_1049最后一块石头的重量II 思路&#xff1a;石头只能用一次。。。怎么才能让碰撞后重量最小呢&#xff0c;还要转换成动态规划&#xff0c;难以理解。。 看题解&…




阅读更多...

















基于轨迹信息的图像近距离可行驶区域方案验证








基于轨迹信息的图像近距离可行驶区域方案验证




一 图像可行驶区域方案 
1.1 标定场景 1.2 标定步骤 
设计一定间距标定场&#xff0c;在标定场固定位置设置摄像头标定标识点。主车开到标定场固定位置录制主车在该位置各个摄像头数据&#xff0c;通过摄像头捕获图像获取图像上关键点坐标pts-2d基于标定场设计&#xff0c;计算…




阅读更多...

















恢复出厂设置手机变成砖








恢复出厂设置手机变成砖




上周&#xff0c;许多Google Pixel 6&#xff08;6、6a、6 Pro&#xff09;手机用户在恢复出厂设置后都面临着设备冻结的问题。 
用户说他们在下载过程中遇到了丢失 tune2fs 文件的错误 。  
这会导致屏幕显示以下消息&#xff1a;“Android 系统无法启动。您的数据可能会被损坏…




阅读更多...

















Python28-9 XGBoost算法








Python28-9 XGBoost算法




XGBoost&#xff08;eXtreme Gradient Boosting&#xff0c;其正确拼写应该是 "Extreme Gradient Boosting"&#xff0c;而XGBoost 的作者在命名时故意使用了不规范的拼写&#xff0c;将“eXtreme”中的“X”大写&#xff0c;以突出其极限性能和效率&#xff09;是一…




阅读更多...

















探索多模态预训练：MAnTiS、ActionCLIP、CPT与CoOp的Prompt技巧








探索多模态预训练：MAnTiS、ActionCLIP、CPT与CoOp的Prompt技巧




上一篇博文整理了 预训练新范式&#xff08;Prompt-tuning&#xff0c;Prefix-tuning&#xff0c;P-tuning&#xff09; &#xff0c;主要是围绕NLP上的成果&#xff0c;具体的概念本文也不做过多赘述。本篇文章将主要整理几篇有代表性的Prompt方法在多模态领域中的应用。 Mult…




阅读更多...

















普中51单片机：数码管显示原理与实现详解（四）








普中51单片机：数码管显示原理与实现详解（四）




文章目录 引言数码管的结构数码管的工作原理静态数码管电路图开发板IO连接图代码演示 动态数码管实现步骤数码管驱动方式电路图开发板IO连接图真值表代码演示1代码演示2代码演示3 引言 
数码管&#xff08;Seven-Segment Display&#xff09;是一种常见的显示设备&#xff0c;广…




阅读更多...

















C-11 三角剖分的调研








C-11 三角剖分的调研




C-11 三角剖分算法 
三角剖分就是将输入的多边形&#xff0c;分割成一系列互不重叠的三角形&#xff0c;其重要性就在这不多赘述。这个是一个别人总结的链接&#xff1a;http://vterrain.org/Implementation/Libs/triangulate.html  
图片链接&#xff1a;http://www-cgrl.cs.m…




阅读更多...

















【笔记】在window上连接虚拟机中的redis








【笔记】在window上连接虚拟机中的redis




愚昧啊 困扰了我近两天的问题居然是因为是java代码写错地方了 
在虚拟机中进入redis.conf文件 
vim redis.conf 
/bind  --斜杠搜索关键词 
将值设置为 bind 0.0.0.0 
保存 退出:wq 回到java中 添加redis依赖 刷新maven 就是在这一步出问题……………………………………自己在蓝…




阅读更多...

















新型水冷电阻设计-双面水冷电阻器








新型水冷电阻设计-双面水冷电阻器




一款革命性的电阻器&#xff0c;专为低压和中压应用而设计&#xff0c;尤其是汽车、牵引或船舶系统中的恶劣条件。 
EAK采用先进材料制造&#xff0c;采用专利设计&#xff0c;将电阻元件与水基冷却液封装并完全分离&#xff0c;为水冷应用提供模块化、轻量级、小容量、高功率解…




阅读更多...

















PYTHON自学笔记（一）vscode配置








PYTHON自学笔记（一）vscode配置




安装python 
自行官网下载 
安装vscode 
自行官网下载 
环境变量设置 
把python和scripts的文件路径&#xff0c;添加到环境变量的path中&#xff0c;如图&#xff1a;  此项不弄&#xff0c;在命令行模式中系统不会认为你装了python和pip&#xff0c;你的输入相关命令shell不会…




阅读更多...

















【Elasticsearch】Elasticsearch倒排索引详解








【Elasticsearch】Elasticsearch倒排索引详解




文章目录 &#x1f4d1;引言一、倒排索引简介二、倒排索引的基本结构三、Elasticsearch中的倒排索引3.1 索引和文档3.2 创建倒排索引3.3 倒排索引的存储结构3.4 词典和倒排列表的优化 四、倒排索引的查询过程4.1 过程4.2 示例 五、倒排索引的优缺点5.1 优点5.2 缺点 六、倒排索…




阅读更多...

















ComfyUI+MuseV+MuseTalk图片数字人








ComfyUI+MuseV+MuseTalk图片数字人




电脑配置 
GPU12G&#xff0c;如果自己电脑配置不够&#xff0c;选择云gpu&#xff0c;我就是用的这个&#xff0c;自己电脑太老配置跟不上 
环境&#xff1a; 
Python 3.11.8 
torch 2.2.1 
cuda_12.1 
资源提供&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1_idZbF…




阅读更多...

















subset使用








subset使用




在R语言中&#xff0c;subset()函数用于从数据框中选择满足特定条件的观测。其语法如下&#xff1a; 
subset(x, subset, select, drop  FALSE) 
参数说明&#xff1a; 
x&#xff1a;数据框或矩阵。 subset&#xff1a;逻辑条件&#xff0c;用于筛选满足特定条件的行。 select…




阅读更多...

















MySQL—统计函数和数学函数以及GROUP BY配合HAVING








MySQL—统计函数和数学函数以及GROUP BY配合HAVING




合计/统计函数 
count -- 演示 mysql 的统计函数的使用
-- 统计一个班级共有多少学生&#xff1f;
SELECT COUNT(*) FROM student
-- 统计数学成绩大于 90 的学生有多少个&#xff1f;
SELECT COUNT(*) FROM student
WHERE math > 90
-- 统计总分大于 250 的人数有多少&…




阅读更多...

















axios和Mybatis








axios和Mybatis




除了get和post方法还有其他的方法&#xff1a; 发送 PUT 请求 
发送 PUT 请求通常用于更新服务器上的资源。 
const updateData  {title: foo updated,body: bar updated,userId: 1
};axios.put(https://jsonplaceholder.typicode.com/posts/1, updateData).then(function (res…




阅读更多...

















麦蕊智数，，另外一个提供免费的股票数据API，可以通过其提供的接口获取实时和历史的股票数据。








麦蕊智数，，另外一个提供免费的股票数据API，可以通过其提供的接口获取实时和历史的股票数据。




麦蕊智数&#xff0c;&#xff0c;提供免费的股票数据API&#xff0c;可以通过其提供的接口获取实时和历史的股票数据。 
API接口&#xff1a;http://api.mairui.club/hslt/new/您的licence 备用接口&#xff1a;http://api1.mairui.club/hslt/new/您的licence 请求频率&#x…




阅读更多...

















Node.js_fs模块








Node.js_fs模块




文件删除 文件重命名和移动&#xff08;本质都是修改路径&#xff09; 文件夹操作  
创建文件夹(mkdir)  读取文件夹(readdir) 
&#xff08;打印出来是该文件夹下名称的数组形式&#xff09; 读取当前的文件夹(readdir) 删除文件夹 &#xff08;rmdir&#xff09; 查看资源状态…




阅读更多...

















Golang | Leetcode Golang题解之第222题完全二叉树的节点个数








Golang | Leetcode Golang题解之第222题完全二叉树的节点个数




题目&#xff1a; 题解&#xff1a; 
func countNodes(root *TreeNode) int {if root  nil {return 0}level : 0for node : root; node.Left ! nil; node  node.Left {level}return sort.Search(1<<(level1), func(k int) bool {if k < 1<<level {return false}…




阅读更多...

















Apache Seata新特性支持 -- undo_log压缩








Apache Seata新特性支持 -- undo_log压缩




本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 Apache Seata新特性支持 – undo_log压缩 
Seata新特性支持 – undo_log压缩 
现状 & 痛点…




阅读更多...

















线程池理解及7个参数








线程池理解及7个参数




定义理解 
线程池其实是一种池化的技术实现&#xff0c;池化技术的核心思想就是实现资源的复用&#xff0c;避免资源的重复创建和销毁带来的性能开销。线程池可以管理一堆线程&#xff0c;让线程执行完任务之后不进行销毁&#xff0c;而是继续去处理其它线程已经提交的任务。 
…




阅读更多...


















最新文章












推荐文章


















Copyright @ 2022~2023