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

JS-04何为继承以及实现方式

目录

1 JS中继承的概念

2 为什么要使用继承?-解决内存浪费

2.1 问题引入

2.2 问题解决

2.3 拓展

 3 继承的实现方式

3.1 原型链继承 1

3.2 原型链继承 2


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的原型对象是谁呢?

  1. 首先要知道Person的构造函数:Function
  2. 所以Person的原型对象是:Function.prototype

p1的原型对象是谁呢?

  1. 首先要知道p1是谁创建的? Person
  2. 所以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 为什么要使用继承&#xff1f;-解决内存浪费 2.1 问题引入 2.2 问题解决 2.3 拓展 3 继承的实现方式 3.1 原型链继承 1 3.2 原型链继承 2 1 JS中继承的概念 通过【某种方式】让一个对象可以访问到另一个对象中的属性和方法&#xff0c;我们把这种…...

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包&#xff0c;直接执行java -jar xxx.jar即可以启动程序 1、引用 spring-boot-maven-plugin插件 <build><plugins><plugin><groupId>org.springframework.boot<…...

移除元素-力扣

第一种解法&#xff0c;暴力解法&#xff0c;使用两个for循环一个进行遍历&#xff0c;一个进行覆盖&#xff0c;代码如下&#xff1a; class Solution { public:int removeElement(vector<int>& nums, int val) {int size nums.size();for(int i 0; i < size; …...

代码随想录算法训练营第三天| 203.移除链表元素、 707.设计链表、 206.反转链表

203.移除链表元素 题目链接&#xff1a; 203.移除链表元素 文档讲解&#xff1a;代码随想录 状态&#xff1a;没做出来&#xff0c;做题的时候定义了一个cur指针跳过了目标val遍历了一遍链表&#xff0c;实际上并没有删除该删的节点。 错误代码&#xff1a; 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手机模块应用&#xff0c;兼容大部分机型&#xff0c;使用LSPatch&#xff0c;您可以个性化您的Android设备&#xff0c;添加新的功能&#xff0c;修改系统设置&#xff0c;甚至完全改变系统的外观。您可以根据自己的需求选择和安装各种Xposed模块…...

深入解析kube-scheduler的算法自定义插件

目录 ​编辑 一、问题引入 二、自定义步骤 三、最佳实践考虑 一、问题引入 当涉及到 Kubernetes 集群的调度和资源分配时&#xff0c;kube-scheduler 是一个关键组件。kube-scheduler 负责根据集群的调度策略&#xff0c;将 Pod 分配到适当的节点上。kube-scheduler 默认使…...

java原型模式 (Prototype Pattern) 介绍

原型模式&#xff08;Prototype Pattern&#xff09;是一种创建型设计模式&#xff0c;它通过复制现有的实例来创建新对象&#xff0c;而不是通过实例化类来创建对象。这个模式允许你创建对象时避免复杂的初始化步骤&#xff0c;并且能够动态地创建对象的副本。 原型模式的关键…...

LLama3 | 一. 本地 Web Demo 部署

前置工作 课程文档&#xff1a;Llama3-Tutorial/docs/hello_world.md at main SmartFlowAI/Llama3-Tutorial GitHub 1.安装vscode 2.安装vscode插件 Remote SSH 3.配置 VSCode 远程连接开发机 ssh连接开发机 进行端口映射 在开发机控制台中点击自定义服务&#xff0c;复…...

MariaDB 给指定列值自动加密(持久数据加触发器)

文章目录 代码插入时&#xff0c;自动加密更新时&#xff0c;自动加密查看触发器数据操作示例update数据取出解密取 注意一次尝试&#xff0c;看加密后数据长度 参考链接&#xff1a; 一篇非常好的讲解触发器的文章&#xff1a;示例、原理MySQL/MariaDB触发器。 用触发器自动加…...

深入理解Linux系统管理与网络配置高级指南

深入理解Linux系统管理与网络配置高级指南 目录 深入理解Linux系统管理与网络配置高级指南 一、Linux文件系统管理 二、Linux进程管理 三、Linux系统管理 四、Linux网络管理 五、Linux磁盘管理 一、Linux文件系统管理 1.1 文件和目录操作 在Linux中&#xff0c;一切皆…...

朴素贝叶斯+SMSSpamCollections

1. 打开 Jupyter 后&#xff0c;在工作目录中&#xff0c;新建一个文件夹命名为 Test01 &#xff0c;并且在文件夹中导入数据 集。在网页端界面点击 “upload” 按钮&#xff0c;在弹出的界面中选择要导入的数据集。然后数据集出现 在 jupyter 文件目录中&#xff0c;此时…...

【Android Studio】使用UI工具绘制,ConstraintLayout 限制性布局,快速上手

文章目录 一、前言二、绘制效果三、ConstraintLayout 使用方法3.1 创建布局文件3.2 替换配置3.3 设置约束&#xff0c;步骤13.4 设置约束&#xff0c;步骤23.5 其他设置 四、结束 一、前言 在进行Android APP开发过程中&#xff0c;减少layout嵌套即可改善UI的绘制性能&#x…...

深度神经网络详解

深度神经网络详解 一、引言二、深度神经网络的基本概念1. 什么是神经网络2. 深度神经网络的定义3. 基本结构4. 激活函数 三、深度神经网络的发展历史1. 初期发展2. 反向传播算法的提出3. 深度学习的崛起 四、深度神经网络的架构1. 前馈神经网络&#xff08;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 是该表的主键&#xff08;有不同值的列&#xff09;。 该表的每一行都包含了一场比赛的分数。Score 是…...

【论文笔记】| 蛋白质大模型ProLLaMA

【论文笔记】| 蛋白质大模型ProLLaMA ProLLaMA: A Protein Large Language Model for Multi-Task Protein Language Processing Peking University Theme: Domain Specific LLM Main work&#xff1a; 当前 ProLLM 的固有局限性&#xff1a;&#xff08;i&#xff09;缺乏自然…...

MySQL笔记第一天(从小白到入门)

文章目录 MySQL笔记SQL语言介绍数据库系统关系型数据库非关系型数据库SQL和数据库系统的关系数据库系统架构 MySQL的介绍概念MySQL的版本 MySQL的DDL操作-重点基本数据库操作基本表操作 MySQL的DML操作-重点insert-插入数据update-更新数据delete-删除数据 MySQL的约束-了解概述…...

初识Qt:从Hello world到对象树的深度解析

Qt中的对象树深度解析 Hello world1.图形化界面创建命令行式创建在栈上创建在堆上创建为什么传文本需要QString&#xff0c;std::string不行吗&#xff1f;那为什么要传入this指针&#xff1f;为什么new后不用显示调用delete函数呢&#xff0c;不会造成内存泄漏问题吗&#xff…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...