7.原 型

7.1原型

在这里插入图片描述
在这里插入图片描述
【例如】
在这里插入图片描述
另外- this指向:
构造函数和原型对象中的this都指向实例化的对象

7.2 constructor属性

每个原型对象里面都有个constructor属性( constructor构造函数)
作用:该属性指向该原型对象的构造函数
在这里插入图片描述
使用场景:
如果有多个对象的方法,我们可以给原型对象采取对象形式赋值.
但是这样就会覆盖构造函数原型对象原来的内容,这样修改后的原型对象constructor就不再指向当前构造函数了
此时,我们可以在修改后的原型对象中,添加一个constructor指向原来的构造函数。
【例如】

<script>
   function Star() {
   }

   Star.prototype = {
     // 手动利用constructor 指回 Star构造函数
     constructor: Star,
     sing: function () {
       console.log('唱歌');
     },
     dance: function () {
        console.log('跳舞');
     }
   }
   console.log(Star.prototype) // 指向 Star
</script>

在这里插入图片描述

7.3对象原型

对象都会有一个属性 __proto__ 指向构造函数的prototype原型对象,之所以我们对象可以使用构造函数prototype原型对象的属性和方法,就是因为对象有 __proto__ 原型的存在。
在这里插入图片描述

注意:
__proto__ 是JS非标准属性
➢ [[prototypel] 和 __proto__ 意义相同
➢ 用来表明当前实例对象指向哪个原型对象prototype
__proto__ 对象原型里面也有一个constructor属性,指向创建该实例对象的构造函数
➢只要是对象,就有原型 __proto__

7.4原型继承

继承是面向对象编程的另一个特征,通过继承进一步提升代码封装的程度,JS中大多是借助原型对象实现继承的特性。

1.封装-抽取公共部分
把男人和女人公共的部分抽取出来放到人类里面
在这里插入图片描述
2.问题和原因
男人和女人都同时使用了同一个对象,根据引用类型的特点,他们指向同一个对象,修改一个就都会受影响
在这里插入图片描述
3.解决:
需求:男人和女人不要使用同一个对象,但是不同对象里面包含相同的属性和方法
因为new每次都会创建一个新的对象,所以用构造函数来处理
在这里插入图片描述

7.5原型链

基于原型对象的继承使得不同构造函数的原型对象关联在一起,并且这种关联的关系是一种链状的结构,我们将原型对象的链状结构关系称为原型链
在这里插入图片描述
在这里插入图片描述
记住两句话
1.只要是对象,就有原型 __proto__,指向原型对象
2.只要是原型对象,就有constructor,指向创建该原型对象的构造函数

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

侯捷 八部曲 C++面向对象高级开发(上)+(下)【C++学习笔记】 超详细 万字笔记总结 笔记合集

文章目录 Ⅰ C part1 面向对象编程1 头文件与类的声明1.1 c vs cpp关于数据和函数1.2 头文件与类1.2.1 头文件1.2.2 class的声明1.2.3 模板初识 2 构造函数2.1 inline 函数2.2 访问级别2.3 ctor 构造函数2.3.1 ctor 的写法2.3.2 ctor/函数 重载2.3.3 ctor 放在 private 区 2.4 …

Vue3 —— watchEffect 高级侦听器

该文章是在学习 小满vue3 课程的随堂记录示例均采用 <script setup>&#xff0c;且包含 typescript 的基础用法 前言 Vue3 中新增了一种特殊的监听器 watchEffect&#xff0c;它的类型是&#xff1a; function watchEffect(effect: (onCleanup: OnCleanup) > void,o…

SpringBoot常用注解 - @Controller

Controller : Controller是加在类上面的注解&#xff0c;使得类里面的每个方法都返回一个视图页面 实际开发中&#xff0c;有时候只是让后端的结果返回到前端&#xff0c;而不作为新的视图页面&#xff0c;此时需要结合 ResponseBody&#xff0c;让这个方法返回给前端的不是一个…

搭建 Python 环境 | Python、PyCharm

计算机 计算机能完成的工作&#xff1a; 算术运算逻辑判断数据存储网络通信…更多的更复杂的任务 以下这些都可以称为 “计算机”&#xff1a; 一台计算机主要由以下这几个重要的组件构成 CPU 中央处理器&#xff1a;大脑&#xff0c;算术运算&#xff0c;逻辑判断 存储器&…

Nuxt3_1_路由+页面+组件+资源+样式 使用及实例

1、 简介 1.1 开发必备 node版本 v16.10.0 我使用的是16.14.0编辑器推荐使用Volar Extension 的VS code插件Terminal 运行nuxt指令 1.2 环境搭建 安装项目&#xff1a; npx nuxilatest init [first_nuxt3]进入项目目录&#xff1a; cd [first_nuxt3]安装依赖&#xff1a;n…

微型导轨怎么保养?

微型导轨一般都是用在一些小型的设备上面的&#xff0c;虽说微型导轨的尺寸非常小&#xff0c;但精度可一点都不低呢&#xff01;一般具体用在一些机械的取放臂上面&#xff0c;作为精密测量和检测&#xff0c;效果还是不错的。 微型导轨属于精密传动零件&#xff0c;我们在使用…

问道管理:旅游酒店板块逆市拉升,桂林旅游、华天酒店涨停

游览酒店板块14日盘中逆市拉升&#xff0c;到发稿&#xff0c;桂林游览、华天酒店涨停&#xff0c;张家界涨超8%&#xff0c;君亭酒店涨超5%&#xff0c;众信游览、云南游览涨逾4%。 音讯面上&#xff0c;8月10日&#xff0c;文旅部办公厅发布康复出境团队游览第三批名单&#…

仿牛客论坛项目day4|开发社区登录模块

1、发送邮件 使用spring-boot-starter-mail这个包 2、开发注册功能 &#xff08;1&#xff09;访问注册页面 功能拆解&#xff1a; 点击顶部的注册按钮&#xff0c;打开注册页面 新增文件&#xff1a;controller->login 具体实现过程&#xff1a; 增加一个getregist…

微信小程序 蓝牙设备连接,控制开关灯

1.前言 微信小程序中连接蓝牙设备&#xff0c;信息写入流程 1、检测当前使用设备&#xff08;如自己的手机&#xff09;是否支持蓝牙/蓝牙开启状态 wx:openBluetoothAdapter({}) 2、如蓝牙已开启状态&#xff0c;检查蓝牙适配器的状态 wx.getBluetoothAdapterState({}) 3、添加…

【先进PID控制算法(ADRC,TD,ESO)加入永磁同步电机发电控制仿真模型研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

Kafka第三课

Flume 由三部分 Source Channel Sink 可以通过配置拦截器和Channel选择器,来实现对数据的分流, 可以通过对channel的2个存储容量的的设置,来实现对流速的控制 Kafka 同样由三大部分组成 生产者 服务器 消费者 生产者负责发送数据给服务器 服务器存储数据 消费者通过从服务器取…

负载均衡搭建

LVS-DR部署 [客户端] node1 192.168.157.148 [lvs] node2 192.168.157.142 [web服务器] node3 192.168.157.145 node4 192.168.157.146&#xff08;1&#xff09;[lvs] yum install -y ipvsadm.x86_64 配置LVS负载均衡服务 &#xff08;1&#xff09;手动添加LVS转发1&#xff…

Vue3 使用json编辑器

安装 npm install json-editor-vue3 main中引入 main.js 中加入下面代码 import "jsoneditor";不然会有报错&#xff0c;如jsoneditor does not provide an export named ‘default’。 图片信息来源-github 代码示例 <template><json-editor-vue class…

一个DW的计算

一个DW的计算 1- 题目: 已知一个DW1.1 要求: 从DW中取出指定的位的值1.1.1 分析1.1.2 实现1.1.3 简化实现1.1.4 验证 2- 题目: 已知一个DW2.1 要求: 从DW中的指定的P和S,取出指定的位的值2.1.1 分析2.1.2 实现 1- 题目: 已知一个DW 有图中所示一行信息&#xff0c;表示一个DW(…

【实用黑科技】如何 把b站的缓存视频弄到本地——数据恢复软件WinHex 和 音视频转码程序FFmpeg

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;效率…

uniapp编写微信小程序遇到的坑总结

1、阻止事件冒泡 使用uniapp开发微信小程序的时候&#xff0c;发现使用click.stop来阻止事件冒泡没有作用&#xff0c;点击了之后发现仍然会触发父组件或者祖先组件的事件。 在网上查阅&#xff0c;发现使用tap.stop才能阻止事件冒泡。 2、二维码生成 在网上找了很多&…

问题:【IntelliJ IDEA】解决idea自动声明变量加finall修饰符问题

问题:【IntelliJ IDEA】解决idea自动声明变量加finall修饰符问题 场景复现 1 new String() 2 快捷方式生成变量 final修饰的 final String s new String();步骤一&#xff1a;确保settings配置信息 settings-----》Editor------》Code Style--------》java下的这两个选项不…

〔013〕Stable Diffusion 之 图片自动评分和不健康内容过滤器 篇

✨ 目录 &#x1f388; 下载咖啡美学评价插件&#x1f388; 咖啡美学评价使用&#x1f388; 不健康内容过滤器插件 &#x1f388; 下载咖啡美学评价插件 想让系统帮你的图片作品打分评价&#xff0c;可以下载咖啡美学自动评价插件插件地址&#xff1a;https://github.com/p1at…

stack和queue的模拟实现

stack和queue的模拟实现 容器适配器什么是适配器STL标准库中stack和queue的底层结构deque的简单介绍deque的缺陷 stack模拟实现queue模拟实现priority_queuepriority_queue的使用priority_queue的模拟实现 容器适配器 什么是适配器 适配器是一种设计模式(设计模式是一套被反复…

稀疏感知图像和体数据恢复的系统对象研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…