js中的原型(原型对象,对象原型,原型继承,原型链)

js中的原型

  • 一.原型
  • 二.constructor 属性
  • 三.对象原型
  • 四.原型继承
  • 五.原型链

一.原型

构造函数通过原型分配的函数是所有实例化对象所共享的。
JavaScript 规定,每一个构造函数都有一个 prototype 属性,指向另一个对象,所以我们也称为原型对象
这个对象可以挂载函数,对象实例化不会多次创建原型上函数,节约内存
我们可以把那些不变的方法,直接定义在 prototype 对象上,这样所有对象的实例就可以共享这些方法。
构造函数和原型对象中的this 都指向实例化的对象
在这里插入图片描述在这里插入图片描述

二.constructor 属性

每个原型对象里面都有个constructor 属性
在这里插入图片描述
该属性值指向创造该原型对象的构造函数

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

三.对象原型

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

注意:

__proto__ 是JS非标准属性

[[prototype]]和__proto__意义相同
用来表明当前实例对象指向哪个原型对象prototype
__proto__对象原型里面也有一个 constructor属性,指向创建该实例对象的构造函数

四.原型继承

继承是面向对象编程的另一个特征,通过继承进一步提升代码封装的程度,JavaScript 中大多是借助原型对象实现继承的特性。
例子:
让男人和女人都能继承人类的一些属性和方法
把男人女人公共的属性和方法抽取出来 People
然后赋值给Man的原型对象,可以共享这些属性和方法
注意让constructor指回Man这个构造函数
在这里插入图片描述
问题:
如果我们给男人添加了一个吸烟的方法,发现女人自动也添加这个方法
因为Man和Woman的构造方法的原型对象中都有person这个对象,而且是同一个,并不是两个不同内存的person对象,所以我们给Man的原型中的person中添加方法,也会影响到Woman的构造方法,也会自动添加上在Man中的原型的person中添加的方法

解决:
利用构造函数
new 每次都会创建一个新的对象
在这里插入图片描述

在这里插入图片描述

五.原型链

基于原型对象的继承使得不同构造函数的原型对象关联在一起,并且这种关联的关系是一种链状的结构,我们将原型对象的链状结构关系称为原型链
在这里插入图片描述
原型链就是一种查找规则
① 当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性。
② 如果没有就查找它的原型(也就是 __proto__指向的 prototype 原型对象)
③ 如果还没有就查找原型对象的原型(Object的原型对象)
④ 依此类推一直找到 Object 为止(null)
⑤ __proto__对象原型的意义就在于为对象成员查找机制提供一个方向,或者说一条路线
⑥ 可以使用 instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上

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

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

相关文章

C#中求余算法的用法及区别:Math.DivRem()方法 vs 运算符%

目录 1.Math.DivRem() 2.运算符% 3.区别 Math.DivRem()和运算符%都是用于求余运算,但它们在使用和功能上有一些区别: 1.Math.DivRem() Math.DivRem()是.NET框架中的一个静态方法,它将除法和求余运算的结果同时返回。它有两个版本&#xf…

Linux编译器gcc/g++的功能与使用

一、程序的生成 首先,我们知道程序的编译分为四步: 1、预处理 2、编译 3、汇编 4、链接 1.1预处理 预处理功能主要包括头文件展开、宏定义、文件包含、条件编译、去注释等。 所谓的头文件展开就是在预处理时候,将头文件内容拷贝至源文…

Android平台架构和Android Framework的区别

Android平台架构是指Android操作系统的整体架构,主要由四个层级组成:应用层、应用框架层、系统运行库层和Linux内核层。 应用层:包括用户界面、应用程序和系统应用等。用户界面层负责呈现图形化界面,应用程序层包括各种应用程序&a…

C语言从入门到熟悉------第四阶段

指针 地址和指针的概念 要明白什么是指针,必须先要弄清楚数据在内存中是如何存储的,又是如何被读取的。如果在程序中定义了一个变量,在对程序进行编译时,系统就会为这个变量分配内存单元。编译系统根据程序中定义的变量类型分配…

Linux中防火墙相关操作

一、查看防火墙状态 可通过两种方式查看防火墙状态,一种通过systemctl命令,另一种是通过firewall-cmd命令。 1、systemctl status firewalld 2、firewall-cmd --state 二、关闭防火墙 1、暂时关闭:设置暂时关闭防火墙将会在下次重启系统后失…

[LVGL]:MACOS下使用LVGL模拟器

如何在MACOS下使用lvgl模拟器 1.安装必要环境 brew install sdl2查看sdl2安装位置: (base) ➜ ~ brew list sdl2 /opt/homebrew/Cellar/sdl2/2.30.1/bin/sdl2-config /opt/homebrew/Cellar/sdl2/2.30.1/include/SDL2/ (78 files) /opt/homebrew/Cellar/sdl2/2.3…

低代码大屏设计器使用入门级图文教程

文章目录 前言一、什么是低代码大屏二、技术选型三、使用过程1.准备环境2. 下载源码3. 启动配置后端初始化数据库修改配置信息启动后端服务4. 前端启动配置问题总结项目初始化失败node|npm版本自由切换python版本自由切换初始化命令启动查看打包

BMP280学习

1.Forced mode模式&#xff0c;单次采集后进入休眠&#xff0c;适用于低采样率。 2.normal mode模式&#xff0c;持续采集&#xff0c;我们使用这种 采集事件基本都是ms级&#xff0c;所以我们1s更新一次。 温度和压力的计算 #include <SPI.h> //定义数据类型 #define s3…

27.函数指针数组

函数指针数组 概念 函数指针的数组本质是一个数组&#xff0c;它允许你存储多个函数指针&#xff0c;并且可以通过索引来调用这些函数。 定义 int (*pfunc[3])(int,int){getMax,getMin,getAdd};应用 #include <stdio.h>int getMax(int a,int b) {return a>b?a:b…

vs2022安装番茄助手后无法使用

1.安装番茄助手 兼容性-win7-管理员启动 2.破解 下载附件“VA_X64.dll”、“PiaoYun64.dll”破解文件&#xff0c;使用Everything找到C盘对应的“VA_X64.dll”路径&#xff0c;将两个破解文件拷贝到此路径。 3.命令行键入类似命令&#xff1a;D:\OfficeSoftware\VisualStudi…

计算机视觉+人工智能碰撞出新的火花

计算机视觉&#xff08;CV&#xff09;技术的优势是其能够处理大量的图像和视频数据&#xff0c;并快速准确地提取出有用的信息。 1. 自动化&#xff1a;CV技术可以自动化地执行各种图像处理任务&#xff0c;例如目标检测、图像分类和图像分割。这样可以提高工作效率并降低人工…

SfM——八点法计算F矩阵(基础矩阵)与三角测量

1 八点法计算F矩阵&#xff08;基础矩阵&#xff09; 基础矩阵用于描述两个视图之间的几何关系 基础矩阵&#xff1a;基础矩阵 F F F 是描述两个视图之间相机投影关系的矩阵。对于两个对应的图像坐标点 ( x , y , 1 ) (x, y, 1) (x,y,1) 和 ( u , v , 1 ) (u, v, 1) (u,v,1…

前端:设置覆盖图片的层叠顺序

html <div class"image-container"><img src"image1.jpg" class"image1" alt"Image 1"><img src"image2.jpg" class"image2" alt"Image 2"> </div> css代码 .image-contai…

Elasticsearch(8) random_score的使用

elasticsearch version&#xff1a; 7.10.1 random_score的使用 在Elasticsearch中&#xff0c;random_score查询可以用来随机排序搜索结果&#xff0c;这对于实现诸如轮播、随机推荐等功能非常有用。 random_score的语法 GET /<索引名>/_search {"query":…

Upload-labs靶场

文件漏洞上传进行复现 环境搭建--->搭建好环境如下&#xff1a; 打开第一关&#xff0c;尝试文件上传漏洞 根据界面提示&#xff0c;选择一个文件&#xff08;.php文件&#xff09;进行上传&#xff0c;发现无法上传 根据提示是指使用js对不合法文件进行了检查&#xff0c;…

Modbus -tcp协议使用第二版

1.1 协议描述 1.1.1 总体通信结构 MODBUS TCP/IP 的通信系统可以包括不同类型的设备&#xff1a; &#xff08;1&#xff09;连接至 TCP/IP 网络的 MODBUS TCP/IP 客户机和服务器设备&#xff1b; &#xff08;2&#xff09;互连设备&#xff0c;例如&#xff1a;在 TCP/IP…

Linux——GlusterFS分布式文件系统群集

一、GlusterFS简介 GlusterFS是一个开源的分布式文件系统&#xff0c;同时也是Scale-Out存储解决方案Gluster的核心&#xff0c;在存储数据方面具有强大的横向扩展能力&#xff0c;通过开展不同的节点可以支持数PB级别的存储容量。 GlusterFS的特点 扩展性和高性能、…

重学SpringBoot3-Problemdetails

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ 重学SpringBoot3-Problemdetails Problem Details的概念ProblemDetails配置类在Spring Boot 3中使用Problem Details未配置Problem Details配置Problem Details自定义异常…

STM32利用AES加密数据、解密数据

STM32利用AES加密数据、解密数据 MD5在线工具Chapter1 STM32利用AES加密数据、解密数据一、头文件二、源文件三、使用 Chapter2 stm32 的 md5计算函数Chapter3 STM32 应用程序加密的一种设计方案前言一、计算AppKey二、自动配置流程三、出厂固件合并 个人总结 MD5在线工具 htt…

基于Java+SpringBoot+vue的图书购物商城系统详细设计和实现

基于JavaSpringBootvue的图书购物商城系统详细设计和实现 博主介绍&#xff1a;多年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言 文…