第六讲_JavaScript原型

JavaScript原型

  • 1. 原型的概念
  • 2. 原型继承
    • 2.1 原型链
  • 3. class类的原型对象

1. 原型的概念

原型JavaScript 对象相互继承特性的机制。

  • 每个函数都有一个 prototype 属性,这个属性指向一个对象,这个对象称为原型对象
  • 每个对象都有一个 [[Prototype]] 属性,这个属性指向原型对象
  • 原型对象都有一个constuctor属性,这个属性指向构造函数。

在这里插入图片描述
在这里插入图片描述

function Person(head, eyes) {this.head = head;this.eyes = eyes;
}let person = new Person(1, 2);// 每个对象都有一个[[Prototype]]属性,这个属性指向原型对象
// 对象的[[Prototype]]属性,需要通过__proto__读取
console.log(person.__proto__ === Person.prototype)// 原型对象都有一个constuctor属性,这个属性指向构造函数
console.log(Person.prototype.constructor === Person)

2. 原型继承

function Person() {this.eyes = 2;this.head =1;
}function Man() {
}// 每个函数都有一个prototype属性
// 将 Man() 函数的prototype指向 new Person()对象
Man.prototype = new Person();
// 把原型对象下的constructor再指回原来的构造函数
Man.prototype.constructor = Man;// 创建一个Man对象,man就拥有了Person下的两个属性
const man = new Man();console.log(man)

在这里插入图片描述

2.1 原型链

基于原型对象的继承使得不同构造函数的原型对象关联起来,并且这种关联的关系是一种链状的结构,所以称之为原型链

上述的代码,在调用man对象的head属性时

  • 首先在Man函数自身找head属性
  • 如果没有,再到prototype属性指向的原型对象找head属性,因为它的原型对象是people对象,所以最终就找到了peoplehead属性。

3. class类的原型对象

ES6 class 类的prototype 属性指向不能修改,但提供了extends关键字来实现继承,其底层也是修改了prototype

继承前:

class Person {
}class Man{
}console.dir(Man)

在这里插入图片描述

继承后:

class Person {
}class Man extends Person{
}console.dir(Man)

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网络原理-TCP/IP(1)

应用层 我们之前编写完了基本的java socket, 要知道,我们之前所写的所有代码都在应用层中,都是为了完成某项业务,如翻译等.关于应用层,后面会有专门的讲解,在此处先讲一下基础知识. 应用层对应着应用程序,是程序员打交道最多的一层,调用系统提供的网络api写出的代码都是应用层…

纯html+js+css个人博客

首页 <!DOCTYPE HTML> <html> <head> <title>博客</title> <meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> <meta name"viewport" content"widthdevice-width, initial-sca…

TOP100 矩阵

1.73. 矩阵置零 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 提示&#xff1a; m matrix.lengthn matrix[0].length1 < m, n < 200-2^31 < matrix[i][j] < 2^31 - 1 思路&#xf…

SeaTunnel Web安装 一把成

安装相关jar包&#xff0c;以及SeaTunnel 和Web 打成的包&#xff0c;可以直接使用&#xff0c;但是需要安装MySQL客户端的分享&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1qrt1RAX38SgIpNklbQJ7pA 提取码&#xff1a;0kmf 1. 环境准备 环境名称版本系统环境C…

使用EasyPOI模板导出Execl表格(含有图片)

这是生成的文件效果 一、导入依赖 <!--easypoi--><dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-base</artifactId><version>4.2.0</version></dependency><dependency><groupId>cn.aft…

零、环境搭建

之前一直玩python的&#xff0c;由于工作需要C版的opencv&#xff0c;故借此寒假闲暇时间&#xff0c;进行简单了解学习。 主要用到的IDE是Visual Studio和OpenCV 一、Visual Studio下载安装 我这里没找到之前的2017版本&#xff0c;就拿目前最新的2023社区版下载&#xff1a…

30款跨平台开发方案,总有个一个适合你!

1、Qt FluentUI CEF 可以覆盖所有需求 2、.NET Avalonia(SukiUI) CEF 可以覆盖所有需求 3、.NET DevExpress跨平台产品 CEF 可以覆盖所有需求 4、JavaFx(Swing) flatlaf WebView 可以覆盖所有需求 5、Java Qt &#xff08;qtjambi&#xff09; CEF 可以覆盖所有需…

C++对象模型和this指针,const修饰成员函数详解

目录 1.成员变量和成员函数分开存储 2.this指针 1.this指针概念 ​编辑 2.this指针用途 3.空指针访问成员函数 ​编辑 4.const修饰成员函数 mutable声明 1.成员变量和成员函数分开存储 空对象占用内存空间为1字节&#xff0c;这样是为了区分不同的空对象占内存的位置 …

【学习笔记】Vue3源码解析:第一部分-实现vue3环境搭建

课程地址&#xff1a;【已完结】全网最详细Vue3源码解析&#xff01;&#xff08;一行行带你手写Vue3源码&#xff09; 第一部分&#xff1a;实现vue3环境搭建&#xff08;对应课程的第1-3节&#xff09; VUE2与VUE3的对比&#xff1a; 也即vue2的痛点&#xff1a; 对TypeSc…

微信小程序遮罩层滚动穿透的问题

常见的布局 外层一个遮罩层 里面一层是弹窗以及内容 这里还是个textarea 滚动到底的时候 底部的遮罩层也跟着滚动了 发生滚动穿透 处理方法是添加 <page-meta page-style"{{ showPolish ? overflow: hidden; : }}" /> page-meta必须在第一个节点

sv program module

为了避免races&#xff0c;在验证中引入program&#xff1b; Similarities between program and module block A program block can instantiate another program block in the way how the module is instantiated another module block.Both can have no or more inputs, …

【竞技宝jjb.lol】LOL:经典大龙毁一生 WE鏖战三局力克FPX

北京时间2024年1月30日&#xff0c;英雄联盟LPL2024春季赛在昨天迎来第二周首个比赛日&#xff0c;本日首场比赛由WE对阵FPX。本场比赛双方前两局战至1-1平&#xff0c;决胜局FPX一度建立不小的经济优势&#xff0c;然而太过冒险的打大龙决策最终让其功亏一篑&#xff0c;WE鏖战…

快速入门存内计算—助力人工智能加速深度学习模型的训练和推理

存内计算&#xff1a;提高计算性能和能效的新技术 传统的计算机架构是将数据存储在存储器中&#xff0c;然后将数据传输到计算单元进行处理。这种架构存在一个性能瓶颈&#xff0c;即数据传输延迟。存内计算通过将计算单元集成到存储器中&#xff0c;消除了数据传输延迟&#…

element -table,多行或列合并

需求:后端返回的表格数据,如果某列值一样,前端表格样式需要合并他们,需要合并的列的行数未知(所以需要有数据后遍历后端数据对需要合并的属性进行计数)即动态遍历表格合并 效果 - 重点方法;table自带的:span-method="objectSpanMethod"方法 代码环境:vue2 ,…

顺序表的奥秘:高效数据存储与检索

&#x1f37f;顺序表 &#x1f9c0;1、顺序表的实现&#x1f365;1.1 创建顺序表类&#x1f365;1.2 插入操作&#x1f365;1.3 查找操作&#x1f365;1.4 删除操作&#x1f365;1.5 清空操作 &#x1f9c0;2、ArrayList的说明&#x1f9c0;3、ArrayList使用&#x1f365;3.1 A…

app广告变现|如何提升app广告点击率?

提升app内的广告点击率&#xff08;CTR&#xff09;可以增加广告收入&#xff0c;而对广告主来说&#xff0c;广告点击率下降会直接影响广告主的投资回报率&#xff0c;因此&#xff0c;如何提升广告点击率&#xff0c;对app运营来说是一项重要的工作。 AdSet官网 | 聚合SDK广…

分类预测 | Matlab实现SCN-Adaboost随机配置网络模型SCN的Adaboost数据分类预测/故障识别

分类预测 | Matlab实现SCN-Adaboost随机配置网络模型SCN的Adaboost数据分类预测/故障识别 目录 分类预测 | Matlab实现SCN-Adaboost随机配置网络模型SCN的Adaboost数据分类预测/故障识别分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现SCN-Adaboost随机配置网…

C++ ffmpeg RTSP 视频推流实现, arm linux平台

环境&#xff1a; FFmpeg版本&#xff1a;n4.2.2 下载地址&#xff08;下载编译后请确认版本正确&#xff09;&#xff1a; https://ffmpeg.org//download.html 下面地址经过第三方git加速可能存在实效性&#xff1a; https://hub.fgit.cf/FFmpeg/FFmpeg/tree/n4.4.2实现代码…

【HarmonyOS应用开发】UIAbility实践第一部分(五)

一、UIAbility概述 1、UIAbility是一种包含用户界面的应用组件&#xff0c;主要用于和用户进行交互。UIAbility也是系统调度的单元&#xff0c;为应用提供窗口在其中绘制界面。 2、每一个UIAbility实例&#xff0c;都对应于一个最近任务列表中的任务。 3、一个应用可以有一个UI…

信息安全考证攻略

&#x1f525;在信息安全领域&#xff0c;拥有相关的证书不仅能提升自己的专业技能&#xff0c;更能为职业生涯增添不少光彩。下面为大家盘点了一些国内外实用的信息安全证书&#xff0c;让你一睹为快&#xff01; &#x1f31f;国内证书&#xff08;认证机构&#xff1a;中国信…