当前位置： 首页 > news >正文

JavaScript Es6_3笔记

news 2026/1/19 15:45:27

JavaScript 进阶

文章目录

  • JavaScript 进阶
    • 编程思想
      • 面向过程
      • 面向对象
    • 构造函数
    • 原型对象
      • constructor 属性
      • 对象原型
      • 原型继承
      • 原型链

了解构造函数原型对象的语法特征，掌握 JavaScript 中面向对象编程的实现方式，基于面向对象编程思想实现 DOM 操作的封装。

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

编程思想

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

面向过程

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

调用就可以了。

举个栗子：蛋炒饭

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XQz3VQjS-1692723574306)(assets/1676792906898.png)]

面向对象

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mxBgXUuD-1692723574307)(assets/1676792930329.png)]

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

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

面向对象的特性：

  • 封装性

  • 继承性

  • 多态性

构造函数

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

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

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

前面我们学过的构造函数方法很好用，但是 存在浪费内存的问题

原型对象

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

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

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

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>

原型链

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

象的链状结构关系称为原型链

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e3C3TRX7-1692723574307)(assets/1676793388695.png)]

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

相关文章：

JavaScript Es6_3笔记

JavaScript 进阶 文章目录 JavaScript 进阶编程思想面向过程面向对象 构造函数原型对象constructor 属性对象原型原型继承原型链 了解构造函数原型对象的语法特征&#xff0c;掌握 JavaScript 中面向对象编程的实现方式&#xff0c;基于面向对象编程思想实现 DOM 操作的封装。 …...

编程日记 2023/8/27 18:57:41

Qt产生随机数

Qt产生随机数 提问&#xff1a;注意&#xff1a;实现&#xff1a; 提问&#xff1a; 有没有小伙伴遇到这么一种情况&#xff0c;使用rand()和qrand()函数生成的随机数好像不是那么随机&#xff0c;每次都一样。那这种就叫做“伪随机”&#xff0c;因为没有种随机数种子&#x…...

编程日记 2023/8/27 18:56:41

postgresql常用函数-数学函数

postgresql常用函数 简介数学函数算术运算符绝对值取整函数乘方与开方指数与对数整数商和余数弧度与角度常量 π符号函数生成随机数 简介 函数&#xff08;function&#xff09;是一些预定义好的代码模块&#xff0c;可以将输入进行计算和处理&#xff0c;最终输出一个 结果值…...

编程日记 2023/8/27 18:55:36

【排序】快速排序（前后指针法）—— 考的最少的一种算法

以从小到大的顺序进行说明。 前后指针法 是指对于一个数组&#xff0c;定义前后各一个指针&#xff08;prev 和 cur&#xff09; prev用于卡一个比基准值大的值进行交换cur用于向前遍历出比基准值小的&#xff0c;和prev进行交换 图解 初始化 选出基准值4 如果cur 所在的值…...

编程日记 2023/8/27 18:54:35

软考：中级软件设计师:关系代数：中级软件设计师:关系代数，规范化理论函数依赖，它的价值和用途，键，范式，模式分解

软考&#xff1a;中级软件设计师:关系代数 提示&#xff1a;系列被面试官问的问题&#xff0c;我自己当时不会&#xff0c;所以下来自己复盘一下&#xff0c;认真学习和总结&#xff0c;以应对未来更多的可能性 关于互联网大厂的笔试面试&#xff0c;都是需要细心准备的 &…...

编程日记 2023/8/27 18:53:34

openCV实战-系列教程2：阈值与平滑处理（图像阈值/图像平滑处理/高斯/中值滤波）、源码解读

1、图像阈值 t图像阈值函数&#xff0c;就是需要判断一下像素值大于一个数应该怎么处理&#xff0c;小于一个数应该怎么处理 ret, dst cv2.threshold(src, thresh, maxval, type) 参数解析&#xff1a; src&#xff1a; 原始输入图&#xff0c;只能输入单通道图像&#…...

编程日记 2023/8/27 18:52:32

C语言第五章-循环结构练习

1、设计一个小型模拟彩票中奖机&#xff0c;已知彩票中奖号码是一个固定的3位数&#xff08;原始号码&#xff09;。对任意一个3位数&#xff0c;取出它的每位数字和原始号码的每位数字比较&#xff0c;有1位数相同中三等奖&#xff0c;有2位数相同中二等奖&#xff0c;有3位数…...

编程日记 2023/8/27 18:51:30

Echarts面积图2.0（范围绘制）

代码&#xff1a; // 以下代码可以直接粘贴在echarts官网的示例上 // 范围值 let normalValue {type: 内部绘制,minValue: 200,maxValue: 750 } // 原本的绘图数据 let seriesData [820, 932, 901, 934, 1290, 1330, 1320] let minData Array.from({length: seriesData.len…...

编程日记 2023/8/27 18:50:28

flink checkpoint时exact-one模式和atleastone模式的区别

背景&#xff1a; flink在开启checkpoint的时候有两种模式可以选择&#xff0c;exact-one和atleastone模式&#xff0c;那么这两种模式有什么区别呢&#xff1f; exact-one和atleastone模式的区别 先说结论&#xff1a;exact-one可以完全做到状态的一致性&#xff0c;而atle…...

编程日记 2023/8/27 18:49:27

QEMU 仿真RISC-V freeRTOS 程序

1. 安裝RISC-V 仿真環境 --QEMU 安裝包下載地址: https://www.qemu.org/ 安裝命令及安裝成功效果如下所示, target-list 設定爲riscv32-softmmu, $ cat ~/project/qemu-8.0.4/install.sh sudo apt-get install libglib2.0-dev sudo apt-get install libpixman-1-dev ./co…...

编程日记 2023/8/27 18:48:26

用大白话来讲讲多线程的知识架构

感觉多线程的知识又多又杂&#xff0c;自从接触java&#xff0c;就在一遍一遍捋脉络和深入学习。现在将这次的学习成果展示如下。 什么是多线程&#xff1f; 操作系统运行一个程序&#xff0c;就是一个线程。同时运行多个程序&#xff0c;就是多线程。即在同一时间&#xff0…...

编程日记 2023/8/27 18:47:25

【uniapp】微信小程序 ， 海报轮播图弹窗，点击海报保存到本地，长按海报图片分享，收藏或保存

uivew 2.0 uniapp 海报画板 DCloud 插件市场 第一步&#xff0c;下载插件并导入HbuilderX 第二步&#xff0c;文件内 引入 海报组件 <template><painter ref"haibaorefs"></painter> <template> <script>import painter from /comp…...

编程日记 2023/8/27 18:46:22

SpringBoot与前端交互遇到的一些问题

一、XXX.jar中没有主清单属性 场景&#xff1a; SpringBoot打的jar包在Linux运行报错 解决方案&#xff1a; 百度找了很多都是一样的答案&#xff0c;但是解决不了我的问题&#xff0c;于是我新建了一个springboot项目发现打的jar包可以在Linux上运行。检查了下只要把下面这2个…...

编程日记 2023/8/27 18:45:21

Maven介绍与配置+IDEA集成Maven+使用Maven命令

目录 一、Maven简介 二、配置环境变量 三、IDEA集成Maven 1.配置本地仓库地址 2.集成Maven 3. pom.xml文件介绍 四、Maven命令 jar包太多、jar包相互依赖、不方便管理、项目编译还需要jar包&#xff0c;Maven工具来帮你&#xff01; 一、Maven简介 Maven 是 Apache 软…...

编程日记 2023/8/27 18:44:20

毕业设计题目源码-毕业论文参考

目录 java语言ssm框架springboot框架微信小程序jspservletmysqljspservletsqlserverssh框架springmvc框架oracle无数据库 C#/asp/net语言B/S结构 浏览器模式C/S结构 窗体模式 安卓/androidapp 客户端appweb 客户端服务端 php语言php java语言 ssm框架 题目ssm828基于java的珠…...

编程日记 2023/8/27 18:43:19

SSH报错-Terminal shell path: C:\WINDOWS\System32\cmd.exe 此时不应有

最近接盘了实验室的工作&#xff0c;需要重新配置连接自己的VScode的SSH远程连接服务器&#xff0c;结果配置了一个下午都没搞好&#xff0c;决定记录一下&#xff0c;希望大家避免踩坑。在vscode上遇到的是这个报错&#xff1a; 错误日志 [11:40:12.097] Checking ssh with …...

编程日记 2023/8/27 18:42:15

Docker 轻量级可视化工具Portainer

1. 是什么 Portainer 是一款轻量级的应用&#xff0c;它提供了图形化界面&#xff0c;用于方便地管理Docker环境&#xff0c;包括单机环境和集群环境。 2. 安装 2.1 官网 https://www.protainer.io/ https://docs.portainer.io/ce-2.9/start/install/server/docker/linux 2.2 …...

编程日记 2023/8/27 18:41:14

站点平台技术架构

系统架构部署思维导图 平台模块分配&#xff1a; 1.账号模块 2.权限模块 3.站点模块 4.配置模块 5.系统升级 6.日志模块 一、前期工作 1.系统保持一致性方案&#xff1a; GIT版本控制&#xff1a;通过总控端向租户端发送一个更新同步请求&#xff0c;租户端收到请求后执行GI…...

编程日记 2023/8/27 18:40:13

一个以太坊合约的漏洞分析-重入攻击

请找出下列合约漏洞&#xff0c;并说明如何盗取ContractB 中的数字资产&#xff0c;并修复合约。中说明&#xff1a;ContractB 的contract_a接口为ContractA 地址 pragma solidity ^0.8.21; interface ContractA {function get_price() external view returns (uint256); }int…...

编程日记 2023/8/27 18:39:12

测试先行：探索测试驱动开发的深层价值

引言 在软件开发的世界中，如何确保代码的质量和可维护性始终是一个核心议题。测试驱动开发（TDD）为此提供了一个答案。与传统的开发方法相比，TDD鼓励开发者从用户的角度出发，先定义期望的结果，再进行实际的开发。这种方法不仅可以确保代码满足预期的需求，还可以在整个开…...

编程日记 2023/8/27 18:38:10

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2026/1/19 6:59:44

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2026/1/17 20:26:12

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2025/10/3 22:08:23

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2026/1/15 5:44:53

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

编程新知 2026/1/15 6:47:58

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/25 1:21:53

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

编程新知 2025/9/24 12:50:07

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

编程新知 2025/9/12 0:57:34

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

编程新知 2026/1/17 21:58:24