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

JS进阶-原型

news 2026/2/10 0:19:18

原型

原型就是一个对象，也称为原型对象

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

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

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

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

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

实例对象可直接访问原型对象中函数与分析

先找实例对象属性或函数，再找原型对象中属性或函数

构造函数和原型对象里面的this指向实例化的对象

console.dir()方法可以在控制台显示指定javascript对象的属性。打印出该对象的所有属性和属性值
    function Star(uname, age) {this.uname = unamethis.age = age}Star.prototype.sing = function () {console.log('唱歌')}const ldh = new Star('刘德华', 55)const zxy = new Star('张学友', 58)ldh.sing()zxy.sing()console.log(ldh.sing === zxy.sing)//true

 公共的属性写到构造函数里面，公共的方法写到原型对象身上。

案例：数组扩展方法

    const arr = [1, 2, 3]Array.prototype.sum = function () {return this.reduce((prev, item) => prev + item, 0)}console.log(arr.sum())

constructor属性

每个原型对象和对象原型__proto__里面都有个constructor属性（constructor构造函数）

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

使用场景：如果有多个对象的方法，我们可以给原型对象采取对象形式赋值。

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

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

    function Star() { }Star.prototype = {constructor: Star,sing: function () {console.log('唱歌')},dance: function () {console.log('跳舞')}}

对象原型__proto__

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

注意：

__proto__在实例对象里面

__proto__是JS非标准属性

[[prototype]]和__proto__意义相同

只读的，只能获取不能赋值

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

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

原型继承

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

    const Person = {eyes: 2,head: 1}function Man() {}Man.prototype = PersonMan.prototype.constructor = Manconst pink = new Man()console.log(pink)

问题：继承方法时会混乱，会覆盖不独立

    function Person() {this.eyes = 2this.head = 1}function Woman() {}Woman.prototype = new Person()Woman.prototype.constructor = WomanWoman.prototype.baby = function () {console.log('宝贝')}const red = new Woman()console.log(red)

原型链

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

查找规则

1.当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。

2.如果没有就查找它的原型（也就是__proto__指向的prototype原型对象）

3.如果还没有就查找原型对象的原型（Object的原型对象）

4.依次类推一直找到Object为止（null）

5.__proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线

6.可以使用instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上

Array instanceof Object //true,万物皆为对象

案例：模态框封装

<!doctype html>
<html><head><meta charset="utf-8">
</head><body><button id='delete'>删除</button><button id='login'>登录</button><script>function Model(title = '', message = '') {this.modelBox = document.createElement('div')this.modelBox.className = 'model'this.modelBox.innerHTML = `<div class="header">${title}<i>x</i></div><div class="body">${message}</div>`console.log(this.modelBox)}//new Model('温馨提示', '您没有删除权限')//new Model('友情提示', '您还没登录呢')Model.prototype.open = function () {const box = document.querySelector('.model')box && box.remove()document.body.append(this.modelBox)this.modelBox.querySelector('i').addEventListener('click', () => {this.close()})}document.querySelector('#delete').addEventListener('click', () => {const del = new Model('温馨提示', '您没有删除权限')del.open()})document.querySelector('#login').addEventListener('click', () => {const login = new Model('友情提示', '您还没登录呢')login.open()})Model.prototype.close = function () {this.modelBox.remove()}</script>
</body>

相关文章：

JS进阶-原型

原型 原型就是一个对象&#xff0c;也称为原型对象 构造函数通过原型分配的函数是所有对象所共享的 JavaScript规定&#xff0c;每一个构造函数都有一个prototype属性&#xff0c;指向另一个对象&#xff0c;所以我们也称为原型对象 这个对象可以挂载函数&#xff0c;对象实…...

编程日记 2023/10/12 3:11:08

虹科方案 | 汽车CAN/LIN总线数据采集解决方案

全文导读&#xff1a;现代汽车配备了复杂的电子系统&#xff0c;CAN和LIN总线已成为这些系统之间实现通信的标准协议&#xff0c;为了开发和优化汽车的电子功能&#xff0c;汽车制造商和工程师需要可靠的数据采集解决方案。基于PCAN和PLIN设备&#xff0c;虹科提供了一种高效、…...

编程日记 2023/10/12 3:10:07

HTML5+CSSDAY4综合案例一--热词

样式展示图&#xff1a; 代码如下&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>热词…...

编程日记 2023/10/12 3:09:07

【源码】hamcrest 源码阅读 泛型 extends 和迭代器模式

文章目录 前言1. 泛型参数和自定义迭代器1.1 使用场景1.2 实现 2. 值得一提 前言 官方文档 Hamcrest Tutorial 上篇文章 Hamcrest 源码阅读及空对象模式、模板方法模式的应用 本篇文章 迭代器模式 1. 泛型参数和自定义迭代器 hamcrest 作为一个matcher库&#xff0c;把某个…...

编程日记 2023/10/12 3:08:06

IntelliJ IDEA 2023.1 版本可以安装了

Maven 的导入时间更加快了。 收到的有邮件提醒安装。 安装后的版本&#xff0c;其实就是升级下&#xff0c;并没有什么主要改变。 IntelliJ IDEA 2023.1 版本可以安装了 - 软件技术 - OSSEZMaven 的导入时间更加快了。 收到的有邮件提醒安装。 安装后的版本&#xff0c;其实就是…...

编程日记 2023/10/12 3:07:04

安全论坛和外包平台汇总

文章目录 一. 网络安全论坛汇总二. 外包平台汇总1. 国内&#xff1a;2. 国外 一. 网络安全论坛汇总 安全焦点BugTraq&#xff1a;http://www.fuzzysecurity.com/Exploit-DB&#xff1a;https://www.exploit-db.com/hackone&#xff1a;https://www.hackerone.com/FreeBuf&…...

编程日记 2023/10/12 3:06:02

9-2-Dataset创建-import调用

文章目录 utils_dataset.pymain-调用utils_dateset.pyutils_dataset.py 1默认：没有改变尺寸，数据集中的图像可以是任意形状尺寸。dataloader中必须令batch_size=1 transforms.Resize((宽,高))(image) 和 batch_size=1 必须用其一 原因：当batch_size>1时，每个batch的数…...

编程日记 2023/10/12 3:05:01

XSS原理

原理&#xff1a; 这是一种将任意 Javascript 代码插入到其他Web用户页面里执行以达到攻击目的的漏洞。攻击者利用浏览器的动态展示数据功能&#xff0c;在HTML页面里嵌入恶意代码。当用户浏览改页时&#xff0c;这些潜入在HTML中的恶意代码会被执行&#xff0c;用户浏览器被攻…...

编程日记 2023/10/12 3:04:00

记一个带批注、表头样式的导入导出excel方法（基于easyexcel）

技术栈&#xff1a;easyexcel-2.2.10&#xff0c;poi-4.1.2&#xff0c;lombok&#xff0c;hutool-5.8.19&#xff1b;公司自用导入导出方法&#xff0c;可能不是那么的优雅&#xff0c;但胜在稳定实用。 /*** Author 955* Date 2023-10-10 11:52* Description 错误批注信息对…...

编程日记 2023/10/12 3:01:56

二叉搜索树--新增节点-力扣 701 题

例题细节二叉搜索树的基础操作-CSDN博客也讲过了&#xff08;put&#xff09;&#xff0c;下面给出递归实现 public TreeNode insertIntoBST(TreeNode node, int val) {//找到空位了if(node null) {return new TreeNode(val);}if(val < node.val) {//一直找到有null的位置…...

编程日记 2023/10/12 3:00:55

C++ - 智能指针 - auto_ptr - unique_ptr - std::shared_ptr - weak_ptr

前言 C当中的内存管理机制需要我们自己来进行控制&#xff0c;比如 在堆上 new 了一块空间&#xff0c;那么当这块空间不需要再使用的时候。我们需要手动 delete 掉这块空间&#xff0c;我们不可能每一次都会记得&#xff0c;而且在很大的项目程序当中&#xff0c;造成内存泄漏…...

编程日记 2023/10/12 2:59:54

【快速入门】JVM之类加载机制与Native

感慨&#xff1a; 如何定义一个合格的Java程序员&#xff0c;Java程序员要了解掌握哪些知识点&#xff0c;网上的面试题太多了&#xff0c;后端需要了解掌握的知识点太多太多了&#xff0c;Java基础、数据结构、异常、多线程、Spring、Spring boot、事务、算法、数据库&#xf…...

编程日记 2023/10/12 2:58:53

R实现数据分布特征的视觉化——多笔数据之间的比较

大家好&#xff0c;我是带我去滑雪&#xff01; 如果要对两笔数据或者多笔数据的分布情况进行比较&#xff0c;Q-Q图、柱状图、星形图都是非常好的选择&#xff0c;下面开始实战。 &#xff08;1&#xff09;绘制Q-Q图 首先导入数据bankwage.csv文件&#xff0c;该数据集…...

编程日记 2023/10/12 2:57:51

TCPUDP

TCP 1.什么是TCP TCP是处于运输层的通信协议&#xff0c;该协议能够实现数据的可靠性传输。 2.TCP报文格式 源端口和目的端口&#xff1a;各占两个字节&#xff0c;发送进程的端口和接收进程的端口号。 序号&#xff1a;占4个字节,序号如果增加到溢出&#xff0c;则下一个序…...

编程日记 2023/10/12 2:56:48

设计模式 - 备忘录模式

目录 一. 前言 二. 实现 三. 优缺点 一. 前言 备忘录模式又称快照模式&#xff0c;是一种行为型设计模式。它可以在不破坏封装性的前提下捕获一个对象的内部状态&#xff0c;并在对象之外保存这个状态&#xff0c;以便在需要的时候恢复到原先保存的状态。在不违反封装的情况…...

编程日记 2023/10/12 2:55:47

OpenCV4（C++）—— 几何图形的绘制

文章目录 一、基本图形1、线2、线圆3、线椭圆4、矩形 二、多边形 一、基本图形 1、线 绘制线&#xff0c;要给出两个点坐标 void cv::line(InputOutputArray img, Point pt1, Point pt2, const Scalar& color, int thickness 1, int lineType LINE_8, int shift 0);…...

编程日记 2023/10/12 2:54:46

智能优化算法常用指标一键导出为EXCEL，CEC2017函数集最优值，平均值，标准差，最差值，中位数，秩和检验，箱线图...

声明&#xff1a;对于作者的原创代码&#xff0c;禁止转售倒卖&#xff0c;违者必究&#xff01; 之前出了一篇关于CEC2005函数集的智能算法指标一键统计&#xff0c;然而后台有很多小伙伴在询问其他函数集该怎么调用。今天采用CEC2017函数集为例&#xff0c;进行展示。 为了突…...

编程日记 2023/10/12 2:53:45

python文件打包方式汇总

在Python中&#xff0c;你可以使用多种方法来打包你的项目&#xff0c;以下是最常见的两种方式&#xff1a; 使用PyInstaller&#xff1a; PyInstaller是一个非常实用的工具&#xff0c;可以将Python程序打包成独立的可执行文件。这样&#xff0c;你就可以在没有Python环境的…...

编程日记 2023/10/12 2:52:44

基于ChatGPT+词向量/词嵌入实现相似商品推荐系统

最近一个项目有个业务场景是相似商品推荐&#xff0c;给一个商品描述(比如 WIENER A/B 7IN 5/LB FZN )&#xff0c;系统给出商品库中最相似的TOP 5种商品&#xff0c;这种单纯的推荐系统用词向量就可以实现&#xff0c;不过&#xff0c;这个项目特点是商品库巨大&#xff0c;有…...

编程日记 2023/10/12 2:51:44

虾皮商品链接获取虾皮商品详情数据（用 Python实现虾皮商品信息抓取）

在网页抓取方面&#xff0c;可以使用 Python、Java 等编程语言编写程序&#xff0c;通过模拟 HTTP 请求&#xff0c;获取虾皮网站上的商品页面。在数据提取方面&#xff0c;可以使用正则表达式、XPath 等方式从 HTML 代码中提取出有用的信息。值得注意的是&#xff0c;虾皮网站…...

编程日记 2023/10/12 2:50:43

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2026/2/7 23:18:31

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

编程新知 2026/1/29 3:00:56

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

编程新知 2025/9/22 21:37:01

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2026/2/1 6:50:07

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/10/3 17:30:30

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2026/2/2 2:47:37

【论文阅读28】-CNN-BiLSTM-Attention-（2024）

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

编程新知 2026/2/2 3:06:53

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/11/2 5:30:15