构造函数原型对象语法、原型链、原型对象

目录

一、前言

二、编程思想

面向过程

面向对象

三、构造函数

四、原型对象

constructor 属性

对象原型

原型继承

原型链

一、前言

    通过本篇博客，我们将了解面向对象编程的一般特征，掌握基于构造函数原型对象的逻辑封装，掌握基于原型对象实现的继承，理解什么原型链及其作用，能够处理程序异常提升程序执行的健壮性。

二、编程思想

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

面向过程

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

面向对象

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

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

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

面向对象的特性：

  • 封装性

  • 继承性

  • 多态性

三、构造函数

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

<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. 构造函数实例创建的对象彼此独立、互不影响

四、原型对象

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

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

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

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

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

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

原型对象具体的作用：

<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>

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

constructor 属性

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

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

 使用场景：

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

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

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

对象原型

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

注意：

  • proto 是JS非标准属性

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

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

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

原型继承

继承是面向对象编程的另一个特征，通过继承进一步提升代码封装的程度，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>

原型链

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

<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 属性是否出现在某个实例对象的原型链上

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

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

相关文章

【NOIP普及组】摆花

【NOIP普及组】摆花

【NOIP普及组】摆花 C语言代码C 代码Java代码Python代码 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 小明的花店新开张&#xff0c;为了吸引顾客&#xff0c;他想在花店的门口摆上一排花&#xff0c;共 m 盆。通过调 查顾客的喜好&am…
阅读更多...
pdf转excel；pdf中表格提取

pdf转excel；pdf中表格提取

一、问题描述 在工作中或多或少会遇到&#xff1a;需要将某份pdf中的表格数据提取出来&#xff0c;以便能够“修改使用”数据 可将pdf中的表格提取出来&#xff0c;解决办法还有点复杂 尤其涉及“pdf中表格不是标准的单元格”的时候&#xff0c;提取数据到excel不太容易 比…
阅读更多...
Qt中 QWidget 和 QMainWindow 区别

Qt中 QWidget 和 QMainWindow 区别

QWidget 用来构建简单窗口 QMainWindow 用来构建更复杂的窗口&#xff0c;QMainWindow 继承自QWidget&#xff0c;在QWidget 的基础上提供了菜单栏、工具栏、状态栏等功能 菜单栏&#xff08;QMenuBar&#xff09;工具栏&#xff08;QToolBar&#xff09;状态栏&#xff08;Q…
阅读更多...
《深入浅出Apache Spark》系列③：Spark SQL解析层优化策略与案例解析

《深入浅出Apache Spark》系列③：Spark SQL解析层优化策略与案例解析

导读&#xff1a;本系列是Spark系列分享的第三期。第一期分享了Spark Core的一些基本原理和一些基本概念&#xff0c;包括一些核心组件。Spark的所有组件都围绕Spark Core来运转&#xff0c;其中最活跃的一个上层组件是Spark SQL。第二期分享则专门介绍了Spark SQL的基本架构和…
阅读更多...
安全的时钟启动

安全的时钟启动

Note&#xff1a;文章内容以 Xilinx 系列 FPGA 进行讲解 1、什么是安全启动时钟 通常情况下&#xff0c;在MMCM/PLL的LOCKED信号抬高之后&#xff08;由0变为1&#xff09;&#xff0c;MMCM/PLL就处于锁定状态&#xff0c;输出时钟已保持稳定。但在此之前&#xff0c;输出时钟会…
阅读更多...
【mongodb】数据库的安装及连接初始化简明手册

【mongodb】数据库的安装及连接初始化简明手册

NoSQL(NoSQL Not Only SQL )&#xff0c;意即"不仅仅是SQL"。 在现代的计算系统上每天网络上都会产生庞大的数据量。这些数据有很大一部分是由关系数据库管理系统&#xff08;RDBMS&#xff09;来处理。 通过应用实践证明&#xff0c;关系模型是非常适合于客户服务器…
阅读更多...
丹韵红墙成红毯至美背景！冠珠华脉「雍华京韵」于M essential大秀绽放京韵时尚

丹韵红墙成红毯至美背景！冠珠华脉「雍华京韵」于M essential大秀绽放京韵时尚

东方美学代表品牌M essential近日于上海科学会堂举办十周年大秀&#xff0c;并发布品牌全新2024/25冬春系列。冠珠瓷砖作为国风新韵合作品牌&#xff0c;以高定岩板华脉「雍华京韵」系列的宫墙丹韵打造红毯背景墙&#xff0c;中国高定岩板与中国高级时装作品碰撞着“中国美”的…
阅读更多...
工程认证与Spring Boot：计算机课程管理的新探索

工程认证与Spring Boot：计算机课程管理的新探索

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了基于工程教育认证的计算机课程管理平台的开发全过程。通过分析基于工程教育认证的计算机课程管理平台管理的不足&#xff0c;创建了一个计算机管理基于工程教育认…
阅读更多...
excel功能

excel功能

统计excel中每个名字出现的次数 在Excel中统计每个名字出现的次数&#xff0c;您可以使用COUNTIF函数或数据透视表。以下是两种方法的详细步骤&#xff1a; 方法一&#xff1a;使用COUNTIF函数 准备数据&#xff1a;确保您的姓名列表位于一个连续的单元格区域&#xff0c;例如…
阅读更多...
【flask开启进程,前端内容图片化并转pdf-会议签到补充】

【flask开启进程,前端内容图片化并转pdf-会议签到补充】

flask开启进程,前端内容图片化并转pdf-会议签到补充 flask及flask-socketio开启threading页面内容转图片转pdf流程前端主js代码内容转图片-browser端browser端的同步编程flask的主要功能route,def 总结 用到了pdf,来回数据转发和合成,担心flask卡顿,响应差,于是刚好看到threadi…
阅读更多...
聊一聊Spring中的自定义监听器

聊一聊Spring中的自定义监听器

前言 通过一个简单的自定义的监听器&#xff0c;从源码的角度分一下Spring中监听的整个过程&#xff0c;分析监听的作用。 一、自定义监听案例 1.1定义事件 package com.lazy.snail;import lombok.Getter; import org.springframework.context.ApplicationEvent;/*** Class…
阅读更多...
VMWareTools安装及文件无法拖拽解决方案

VMWareTools安装及文件无法拖拽解决方案

文章目录 1 安装VMWare Tools2 安装vmware tools之后还是无法拖拽文件解决方案2.1 确认vmware tools安装2.2 客户机隔离2.3 修改自定义配置文件2.4 安装open-vm-tools-desktop软件 1 安装VMWare Tools 打开虚拟机VMware Workstation&#xff0c;启动Ubuntu系统&#xff0c;菜单…
阅读更多...
ADC前端控制与处理模块--AD7606_Module

ADC前端控制与处理模块--AD7606_Module

总体框架 AD7606_Module主要由3个模块组成组成&#xff0c;AD7606_Data_Pkt和AD7606_Drive以及AD7606_ctrl。 1.AD7606_Data_Pkt主要作用是把AD芯片数据组好数据包&#xff0c;然后发送给上位机&#xff1b; 2.AD7606_Drive主要负责和芯片的交互部分 3.AD7606_ctrl控制模块的作…
阅读更多...
Unity 插件 - Project窗口资源大小显示

Unity 插件 - Project窗口资源大小显示

Unity 插件 - Project窗口资源大小显示 &#x1f354;功能&#x1f32d;安装 &#x1f354;功能 &#x1f4a1;.显示Project Assets 和Packages下所有文件的大小&#xff08;右侧显示&#xff09; &#x1f4a1;.统计选中文件夹及其子文件夹下所有文件的大小并显示&#xff08…
阅读更多...
HTB：Photobomb[WriteUP]

HTB：Photobomb[WriteUP]

目录 连接至HTB服务器并启动靶机 使用nmap对靶机进行端口开放扫描 再次使用nmap对靶机开放端口进行脚本、服务扫描 使用ffuf进行简单的子域名扫描 使用浏览器直接访问该域名 选取一个照片进行下载&#xff0c;使用Yakit进行抓包 USER_FLAG&#xff1a;a9afd9220ae2b5731…
阅读更多...
ssm教室信息管理系统+vue

ssm教室信息管理系统+vue

系统包含&#xff1a;源码论文 所用技术&#xff1a;SpringBootVueSSMMybatisMysql 免费提供给大家参考或者学习&#xff0c;获取源码看文章最下面 需要定制看文章最下面 目 录 目 录 III 1 绪论 1 1.1 研究背景 1 1.2目的和意义 1 1.3 论文结构安排 2 2 相关技术 3 …
阅读更多...
详解Java之Spring MVC篇二

详解Java之Spring MVC篇二

目录 获取Cookie/Session 理解Cookie 理解Session Cookie和Session的区别 获取Cookie 获取Session 获取Header 获取User-Agent 获取Cookie/Session 理解Cookie HTTP协议自身是“无状态”协议&#xff0c;但是在实际开发中&#xff0c;我们很多时候是需要知道请求之间的…
阅读更多...
量子计算及其在密码学中的应用

量子计算及其在密码学中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 量子计算及其在密码学中的应用 量子计算及其在密码学中的应用 量子计算及其在密码学中的应用 引言 量子计算概述 定义与原理 发展…
阅读更多...
当财政支持减弱时，国有企业如何实现降本增效？

当财政支持减弱时，国有企业如何实现降本增效？

当财政支持减弱时&#xff0c;国有企业如何实现降本增效&#xff1f; 随着市场环境的不断变化和上级市场化政策要求的不断推进&#xff0c;部分国有企业面临着双重压力&#xff0c;一方面&#xff0c;市场的快速变革要求企业不断创新、提升竞争力&#xff1b;另一方面&#xff…
阅读更多...
引入 axios，根据 api 文档生成调用接口

引入 axios，根据 api 文档生成调用接口

起步 | Axios Docs 安装 axios npm install axios 生成 api 调用接口【可选】 https://github.com/ferdikoomen/openapi-typescript-codegen 安装 npm install openapi-typescript-codegen --save-dev 然后执行生成代码 # http://localhost:8805/api/user/v3/api-docs&a…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023