JS-04何为继承以及实现方式
目录
1 JS中继承的概念
2 为什么要使用继承?-解决内存浪费
2.1 问题引入
2.2 问题解决
2.3 拓展
3 继承的实现方式
3.1 原型链继承 1
3.2 原型链继承 2
1 JS中继承的概念
通过【某种方式】让一个对象可以访问到另一个对象中的属性和方法,我们把这种方式称之为继承 `并不是所谓的xxx extends yyy`
2 为什么要使用继承?-解决内存浪费
2.1 问题引入
有些对象会有方法(动作、行为),而这些方法都是函数,如果把这些方法和函数都放在构造函数中声明就会导致内存的浪费🍂
function Person(){this.say=function(){console.log("你好")}}var p1=new Person();var p2=new Person();console.log(p1.say === p2.say); //false现象:两个实例的say方法不相等,控制台输出为false
结论:若将方法放入构造函数中,则当每创建一个实例时就会再次创建结构相似的方法。这两个方法不是同一个。所以会造成内存的浪费
2.2 问题解决
🍃解决方案:把say方法写在他们共同的(父对象)中
function Person(name,age){this.name=name;this.age=age;this.say=function(){}}var p1=new Person();var p2=new Person();//p1对象和p2对象的say方法是否是同一个方法:falseconsole.log(p1.say===p2.say);//由于say方法可能功能相似,但是不是同一个方法(没有指向同一块内存,会造成内存浪费)//解决方案:把say方法写在他们共同的(父对象)中//其实他们共同的父对象,就可以通过:Person.prototype来获取//-->只要把say方法写在Person.prototype中,那么say方法就是同一个方法Person.prototype.run=function(){console.log('时速555KM');}//此时p1和p2都可以访问到run方法p1.run();p2.run();//验证p1.run和p2.run是否是同一个方法?console.log(p1.run == p2.run); //指向同一个方法,这种方法避免了内存的浪费console.log(p1.run == Person.prototype.run);//truevar p3=new Person();console.log(p3.run == p1.run); //trueconsole.log(p3.run === p1.run);//true🌸结论:只要往某个构造函数的prototype对象中添加某个属性、方法,那么这样的属性、方法都可以被所有的构造函数的实例所共享
==>这里的【构造函数的prototype对象】称之为原型对象
Person.prototype是 p1 p2 p3 的原型对象
Person.prototype是Person构造函数的【实例】的原型对象
2.3 拓展
猜猜看?
Person的原型对象是谁呢?
- 首先要知道Person的构造函数:Function
- 所以Person的原型对象是:Function.prototype
p1的原型对象是谁呢?
- 首先要知道p1是谁创建的? Person
- 所以p1的原型对象时: Person.prototype
3 继承的实现方式
3.1 原型链继承 1
代码片实现,如下:
<script>function Dog(){}var d1=new Dog();//为了让d1有一个叫的方法,//不行:d1.say=function(){}//正确:在原型中添加方法Dog.prototype.say=function(){console.log('汪汪汪');} </script>🍂缺点:添加1、2个方法无所谓,但是如果方法很多会导致过多的代码冗余。代码片如下:
function Cat(name){this.name=name;}var tom=new Cat("汤姆");//实例//目的:把say方法放在tom的原型对象中(Cat.prototype)Cat.prototype.say=function(){}//问题:Cat.prototype.s1=function(){}Cat.prototype.s2=function(){}Cat.prototype.s3=function(){}Cat.prototype.s4=function(){}Cat.prototype.s5=function(){}//通过上面的方式,给tom的原型对象添加了好多方法,也就是让tom拥有了好多方法,但是代码产生了不少的冗余(重复)
3.2 原型链继承 2
🍃解决上面问题代码冗余问题,改良版思路:
//-->为了减少这种重复,改良版:Cat.prototype = {a1:function(){},a2:function(){},a3:function(){},a4:function(){},a5:function(){}}console.log(tom.s1); //可以访问console.log(tom.a1); //undefined原因:tom对象在创建的时候已经有了一个确定的原型对象,就是旧的Cat.prototype由于Cat.prototype后面被重新赋值,但是tom对象的原型对象却没有改变,所以tom对象并不能访问到新原型对象中的a1-a5方法
如何解决这个问题?
-->先改变原型、再创建对象🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀
Person.prototype={constructor:Person,say:function(){console.log("你好");},run:function(){console.log("正在进行running");}}+ 注意点:
+ a、一般情况下,应该先改变原型对象,再创建对象
+ b、一般情况下,对于新原型,会添加一个constructor属性,从而不破坏原有的原型对象的结构<script>function Tiger(){}Tiger.prototype={a:function(){},b:function(){}}//创建tiger实例,此时的tiger实例的原型对象是新原型,所以tiger可以访问到新原型中的属性和方法(a/b)var tiger=new Tiger();console.log(tiger.a);console.log(tiger.b); </script>
🐶其他继承实现方式(拷贝继承、原型式继承、借用构造函数实现继承),后续将会继续发布分享,敬请期待!!
相关文章:
JS-04何为继承以及实现方式
目录 1 JS中继承的概念 2 为什么要使用继承?-解决内存浪费 2.1 问题引入 2.2 问题解决 2.3 拓展 3 继承的实现方式 3.1 原型链继承 1 3.2 原型链继承 2 1 JS中继承的概念 通过【某种方式】让一个对象可以访问到另一个对象中的属性和方法,我们把这种…...
6款网站登录页(附带源码)
6款网站登录页 效果图及部分源码123456 领取源码下期更新预报 效果图及部分源码 1 部分源码 <style>* {margin: 0;padding: 0;}html {height: 100%;}body {height: 100%;}.container {height: 100%;background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);}.l…...
spring boot打的包直接运行
Spring Boot 提供了一个插件 spring-boot-maven-plugin 把程序打包成一个可执行的jar包,直接执行java -jar xxx.jar即可以启动程序 1、引用 spring-boot-maven-plugin插件 <build><plugins><plugin><groupId>org.springframework.boot<…...
移除元素-力扣
第一种解法,暴力解法,使用两个for循环一个进行遍历,一个进行覆盖,代码如下: class Solution { public:int removeElement(vector<int>& nums, int val) {int size nums.size();for(int i 0; i < size; …...
代码随想录算法训练营第三天| 203.移除链表元素、 707.设计链表、 206.反转链表
203.移除链表元素 题目链接: 203.移除链表元素 文档讲解:代码随想录 状态:没做出来,做题的时候定义了一个cur指针跳过了目标val遍历了一遍链表,实际上并没有删除该删的节点。 错误代码: public ListNode re…...
【题解】AB33 相差不超过k的最多数(排序 + 滑动窗口)
https://www.nowcoder.com/practice/562630ca90ac40ce89443c91060574c6?tpId308&tqId40490&ru/exam/oj 排序 滑动窗口 #include <iostream> #include <vector> #include <algorithm> using namespace std;int main() {int n, k;cin >> n &…...
LSPatch免root手机模块应用
软件介绍 LSPatch是一款免root手机模块应用,兼容大部分机型,使用LSPatch,您可以个性化您的Android设备,添加新的功能,修改系统设置,甚至完全改变系统的外观。您可以根据自己的需求选择和安装各种Xposed模块…...
深入解析kube-scheduler的算法自定义插件
目录 编辑 一、问题引入 二、自定义步骤 三、最佳实践考虑 一、问题引入 当涉及到 Kubernetes 集群的调度和资源分配时,kube-scheduler 是一个关键组件。kube-scheduler 负责根据集群的调度策略,将 Pod 分配到适当的节点上。kube-scheduler 默认使…...
java原型模式 (Prototype Pattern) 介绍
原型模式(Prototype Pattern)是一种创建型设计模式,它通过复制现有的实例来创建新对象,而不是通过实例化类来创建对象。这个模式允许你创建对象时避免复杂的初始化步骤,并且能够动态地创建对象的副本。 原型模式的关键…...
LLama3 | 一. 本地 Web Demo 部署
前置工作 课程文档:Llama3-Tutorial/docs/hello_world.md at main SmartFlowAI/Llama3-Tutorial GitHub 1.安装vscode 2.安装vscode插件 Remote SSH 3.配置 VSCode 远程连接开发机 ssh连接开发机 进行端口映射 在开发机控制台中点击自定义服务,复…...
MariaDB 给指定列值自动加密(持久数据加触发器)
文章目录 代码插入时,自动加密更新时,自动加密查看触发器数据操作示例update数据取出解密取 注意一次尝试,看加密后数据长度 参考链接: 一篇非常好的讲解触发器的文章:示例、原理MySQL/MariaDB触发器。 用触发器自动加…...
深入理解Linux系统管理与网络配置高级指南
深入理解Linux系统管理与网络配置高级指南 目录 深入理解Linux系统管理与网络配置高级指南 一、Linux文件系统管理 二、Linux进程管理 三、Linux系统管理 四、Linux网络管理 五、Linux磁盘管理 一、Linux文件系统管理 1.1 文件和目录操作 在Linux中,一切皆…...
朴素贝叶斯+SMSSpamCollections
1. 打开 Jupyter 后,在工作目录中,新建一个文件夹命名为 Test01 ,并且在文件夹中导入数据 集。在网页端界面点击 “upload” 按钮,在弹出的界面中选择要导入的数据集。然后数据集出现 在 jupyter 文件目录中,此时…...
【Android Studio】使用UI工具绘制,ConstraintLayout 限制性布局,快速上手
文章目录 一、前言二、绘制效果三、ConstraintLayout 使用方法3.1 创建布局文件3.2 替换配置3.3 设置约束,步骤13.4 设置约束,步骤23.5 其他设置 四、结束 一、前言 在进行Android APP开发过程中,减少layout嵌套即可改善UI的绘制性能&#x…...
深度神经网络详解
深度神经网络详解 一、引言二、深度神经网络的基本概念1. 什么是神经网络2. 深度神经网络的定义3. 基本结构4. 激活函数 三、深度神经网络的发展历史1. 初期发展2. 反向传播算法的提出3. 深度学习的崛起 四、深度神经网络的架构1. 前馈神经网络(Feedforward Neural …...
MYSQL 数据迁移利器 MYSQLSH
1 迁移背景 将数据库从mysql5.7 迁移到mysql8.0. mysqlsh 支持mysql5.7以上版本。 2 查看数据量 SELECT TABLE_SCHEMA, round(SUM(data_length+index_length)/1024/1024,2) AS TOTAL_MB, round(SUM(data_length)/1024/1024,2) AS DATA_MB, …...
【MYSQL】分数排名
表: Scores ---------------------- | Column Name | Type | ---------------------- | id | int | | score | decimal | ---------------------- id 是该表的主键(有不同值的列)。 该表的每一行都包含了一场比赛的分数。Score 是…...
【论文笔记】| 蛋白质大模型ProLLaMA
【论文笔记】| 蛋白质大模型ProLLaMA ProLLaMA: A Protein Large Language Model for Multi-Task Protein Language Processing Peking University Theme: Domain Specific LLM Main work: 当前 ProLLM 的固有局限性:(i)缺乏自然…...
MySQL笔记第一天(从小白到入门)
文章目录 MySQL笔记SQL语言介绍数据库系统关系型数据库非关系型数据库SQL和数据库系统的关系数据库系统架构 MySQL的介绍概念MySQL的版本 MySQL的DDL操作-重点基本数据库操作基本表操作 MySQL的DML操作-重点insert-插入数据update-更新数据delete-删除数据 MySQL的约束-了解概述…...
初识Qt:从Hello world到对象树的深度解析
Qt中的对象树深度解析 Hello world1.图形化界面创建命令行式创建在栈上创建在堆上创建为什么传文本需要QString,std::string不行吗?那为什么要传入this指针?为什么new后不用显示调用delete函数呢,不会造成内存泄漏问题吗ÿ…...
国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制,因此这个了16进制的数据既可以翻译成为这个机器码,也可以翻译成为这个国标码,所以这个时候很容易会出现这个歧义的情况; 因此,我们的这个国…...
HTML 语义化
目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案: 语义化标签: <header>:页头<nav>:导航<main>:主要内容<article>&#x…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
stm32G473的flash模式是单bank还是双bank?
今天突然有人stm32G473的flash模式是单bank还是双bank?由于时间太久,我真忘记了。搜搜发现,还真有人和我一样。见下面的链接:https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...
Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...
Opencv中的addweighted函数
一.addweighted函数作用 addweighted()是OpenCV库中用于图像处理的函数,主要功能是将两个输入图像(尺寸和类型相同)按照指定的权重进行加权叠加(图像融合),并添加一个标量值&#x…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
什么是库存周转?如何用进销存系统提高库存周转率?
你可能听说过这样一句话: “利润不是赚出来的,是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业,很多企业看着销售不错,账上却没钱、利润也不见了,一翻库存才发现: 一堆卖不动的旧货…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统,可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析:自动解析Markdown文档结构PPT模板分析:分析PPT模板的布局和风格智能布局决策:匹配内容与合适的PPT布局自动…...
ardupilot 开发环境eclipse 中import 缺少C++
目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...
