JS进阶-原型

原型

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

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

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>

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

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

相关文章

64.最小路径和

法&#xff1a;动态规划 第一行的元素&#xff0c;只有通过左侧右移才能到达&#xff1b;第一列的元素&#xff0c;只有通过上方的下移才能到达。其他位置元素&#xff1a;比较从上方元素向下移动的路径和和左侧元素向右移动的路径和的较小值dp[i][j]&#xff1a;到达(i,j)位置…

中国移动咪咕、阿里云、华为“秀肌肉”,这届亚运会的“高光”不止比赛

文 | 智能相对论 作者 | 青月 竞技体育的发展&#xff0c;其实也可以看作是一部“技术进化史”。 在1924年的巴黎&#xff0c;广播首次进入奥运会&#xff0c;人们第一次可以通过报纸以外的方式了解奥运会。 1928年&#xff0c;在荷兰申办的阿姆斯特丹奥运会&#xff0c;高…

【jvm--方法区】

文章目录 1. 栈、堆、方法区的交互关系2. 方法区的内部结构3. 运行时常量池4. 方法区的演进细节5. 方法区的垃圾回收 1. 栈、堆、方法区的交互关系 方法区的基本理解&#xff1a; 方法区&#xff08;Method Area&#xff09;与 Java 堆一样&#xff0c;是各个线程共享的内存区…

【力扣】单调栈:901. 股票价格跨度

【力扣】单调栈&#xff1a;901. 股票价格跨度 文章目录 【力扣】单调栈&#xff1a;901. 股票价格跨度1. 题目介绍2. 思路3. 解题代码参考 1. 题目介绍 设计一个算法收集某些股票的每日报价&#xff0c;并返回该股票当日价格的 跨度 。 当日股票价格的 跨度 被定义为股票价格…

75.颜色分类

原地排序&#xff1a;空间复杂度为1 class Solution { public:void sortColors(vector<int>& nums) {if(0){//法一&#xff1a;单指针两个遍历int nnums.size();int ptr0;for(int i0;i<n;i){if(nums[i]0){swap(nums[i],nums[ptr]);ptr;}}for(int iptr;i<n;i){…

【Proteus仿真】【STM32单片机】汽车倒车报警系统设计

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真STM32单片机控制器&#xff0c;使用LCD1602液晶、按键、继电器电机模块、DS18B20温度传感器、蜂鸣器LED、HCSR04超声波等。 主要功能&#xff1a; 系统运行后&#xff0c;LCD1602显…

2021年03月 Python(二级)真题解析#中国电子学会#全国青少年软件编程等级考试

Python编程&#xff08;1~6级&#xff09;全部真题・点这里 一、单选题&#xff08;共25题&#xff0c;每题2分&#xff0c;共50分&#xff09; 第1题 对于字典infor {“name”:“tom”, “age”:13, “sex”:“male”}&#xff0c;删除"age":13键值对的操作正确的…

数据压缩与管理:掌握Linux VDO和LVM的力量

1.逻辑卷(LVM&#xff0c;Logical Volume Management) 动态的为服务器磁盘添加空间&#xff0c;而不会影响原磁盘的数据&#xff0c;也不需要对原始磁盘重新分区。 1.1 LVM介绍 以下是LVM的示意图&#xff1a; 我们拿到一块硬盘后首先对齐进行划分分区&#xff0c;也就得到…

Godot2D角色导航教程(角色随鼠标移动)

文章目录 运行结果2D导航概述开始前的准备2D导航创建导航网格创建角色 其他文章 运行结果 2D导航概述 Godot为2D和3D游戏提供了多个对象、类和服务器&#xff0c;以便于基于网格或基于网格的导航和路径查找。 说到导航&#xff0c;就得说一下导航网格&#xff0c;导航网格定义…

arm-三盏灯流水

.text .global _start _start: 1.设置GPIOE寄存器的时钟使能 RCC_MP_AHB4ENSETR[4]->1 0x50000a28 LDR R0,0x50000A28 LDR R1,[R0] ORR R1,R1,#(0x3<<4) 第四位第五位都设置为1 STR R1,[R0] 写回2.设置PE10管脚为输出模式 GPIOE_MODER[21:20]->01 0x5000…

Cuckoo沙箱各Ubuntu版本安装及使用

1.沙箱简介 1.1 沙箱 沙箱是一个虚拟系统程序&#xff0c;允许你在沙箱环境中运行浏览器或其他程序&#xff0c;因此运行所产生的变化可以随后删除。它创造了一个类似沙盒的独立作业环境&#xff0c;在其内部运行的程序并不能对硬盘产生永久性的影响。 在网络安全中&#xff…

MATLAB中syms函数使用

目录 语法 说明 示例 创建符号标量变量 创建符号标量变量的向量 创建符号标量变量矩阵 管理符号标量变量的假设 创建和评估符号函数 syms函数的作用是创建符号标量和函数&#xff0c;以及矩阵变量和函数。 语法 syms var1 ... varN syms var1 ... varN [n1 ... nM] …

Elasticsearch:使用 huggingface 模型的 NLP 文本搜索

本博文使用由 Elastic 博客 title 组成的简单数据集在 Elasticsearch 中实现 NLP 文本搜索。你将为博客文档建立索引&#xff0c;并使用摄取管道生成文本嵌入。 通过使用 NLP 模型&#xff0c;你将使用自然语言在博客文档上查询文档。 安装 Elasticsearch 及 Kibana 如果你还没…

如何查看postgresql中的数据库大小?

你可以使用以下命令来查看PostgreSQL数据库的大小&#xff1a; SELECT pg_database.datname as "database_name", pg_size_pretty(pg_database_size(pg_database.datname)) AS size_in_mb FROM pg_database ORDER by size_in_mb DESC;这将返回一个表格&#xff0…

Python爬虫技术系列-03requests库案例-完善

Python爬虫技术系列-03requests库案例 参考1 Requests基本使用1.1 Requests库安装与使用1.1.1 Requests库安装1.1.2 Rrequests库介绍1.1.3 使用Requests一般分为三个步骤1.1.4 requests的公共方法 2 Requests库使用案例2.1 GET请求携带参数和headers2.2 POST请求&#xff0c;写…

消息队列 Kafka

Kafka Kafka 是一个分布式的基于发布/订阅模式的消息队列&#xff08;MQ&#xff0c;Message Queue&#xff09;&#xff0c;主要应用于大数据实时处理领域 为什么使用消息队列MQ 在高并发环境下&#xff0c;同步请求来不及处理会发生堵塞&#xff0c;从而触发too many conne…

【java学习】多维数组(10)

文章目录 1. 二维数组 1. 二维数组 二维数组[][]&#xff1a;数组中的数组 格式1&#xff08;动态初始化&#xff09;&#xff1a;int[][] arr new int[3][2]; 解释说明&#xff1a; 定义了名称为arr的二维数组二维数组中有3个一维数组每个一维数组中有2个元素一维数组的名称…

亘古难题——前端开发or后端开发

一、引言 前端开发 前端开发是创建WEB页面或APP等前端界面呈现给用户的过程&#xff0c;通过HTML&#xff0c;CSS及JavaScript以及衍生出来的各种技术、框架、解决方案&#xff0c;来实现互联网产品的用户界面交互。 前端开发从网页制作演变而来&#xff0c;名称上有很明显的时…

遥感云大数据在灾害、水体与湿地领域典型案 例实践及 GPT 模型应用

近年来遥感技术得到了突飞猛进的发展&#xff0c;航天、航空、临近空间等多遥感平台不断增加&#xff0c;数据的空间、时间、光谱分辨率不断提高&#xff0c;数据量猛增&#xff0c;遥感数据已经越来越具有大数据特征。遥感大数据的出现为相关研究提供了前所未有的机遇&#xf…

MM-Camera架构-ProcessCaptureRequest 流程分析

文章目录 processCaptureRequest\_3\_41.1 mDevice1.2 mDevice->ops->process\_capture\_request1.3 hardware to vendor mct\_shimlayer\_process\_event2.1 mct\_shimlayer\_handle\_parm2.2 mct\_shimlayer\_reg\_buffer processCaptureRequest_3_4 sdm660的摄像头走…