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

简单介绍一下js中的构造函数、原型对象prototype、对象原型__proto__、原型链

构造函数
	function Star (uname, age){this.uname = unamethis.age = agethis.sing = function(){ log('唱歌~') }}let xzq = new Star('薛之谦', 30)let ldh = new Star('刘德华', 20)log(ldh) // { uname: '刘德华', age: 20, sing: f }ldh.sing() // 唱歌~log(ldh.sing === xzq.sing) // false
# 实例成员:构造函数内部,通过this添加的成员,如上面的:uname、age、sing实例成员,只能通过实例化的对象来访问,如:ldh.sing()才行,Star.sing()就不行# 静态成员:在构造函数本身上,添加的成员,如:Star.sex = '男'静态成员只能通过构造函数访问,如:log(Star.sex) // 男不能通过实例化对象来访问(ldh.sex就不行)# 构造函数 new 的执行过程1、new构造函数,可以在内存中创建一个空的对象2、this就会指向刚才创建的空对象3、执行构造函数里面的代码,就给这个空对象添加属性、方法4、返回这个对象(所以构造函数里面不用return)

prototype 原型对象
# js规定,每一个构造函数都有一个prototype属性,这个prototype就是一个对象所以,我们可以把'公共的方法'添加到这个'原型对象prototype上'(原型对象prototype的作用就是共享方法)所以:公共的属性,定义到,构造函数里面公共的方法,定义到,原型对象prototype上
	function Star (uname, age){this.uname = unamethis.age = age}Star.prototype.sing = function(){ log('唱个歌') }let ldh = new Star('刘德华', 20)let xzq = new Star('薛之谦', 30)log(ldh.sing === xzq.sing) // true# console.log( ldh ) // 系统会自动,在对象的身上,添加一个'__proto__',指向构造函数的原型对象# prototypeconsole.log( ldh.__proto__ === Star.prototype ) // true
方法的查找规则:
	首先看`ldh对象`,它身上是否有sing()方法,如果有,就执行它的这个方法如果没有这个方法,但因为`__proto__`存在,就去`构造函数的原型对象prototype上`去找这个sing()方法
proto:对象原型
	每个对象身上都有一个`__proto__`对象原型,指向`指向构造函数的原型对象prototype`之所以,对象可以使用`构造函数的原型对象prototype`上的属性、方法是因为,对象有`__proto__(对象原型)`的存在`__proto__对象原型` 和 `构造函数的原型对象prototype`是等价的`__proto__对象原型`的意义:在于为对象的查找机制提供一个方向,或者说一条线路,但它是一个非标准属性,因此实际开发中,不可用使用这个属性,它只是内部指向原型对象prototype

原型链
	function Star(uname, age){this.uname = unamethis.age = age}let ldh = new Start('刘德华', 123)log( ldh.__proto__ === Star.prototype ) // truelog( Star.prototype.__proto__ === Object.prototype ) // truelog( Star.prototype.__proto__ ) // null

在这里插入图片描述

原型链的查找规则
	当访问一个对象的属性(方法)时,首先看这个对象本身有没有该属性,如果没有,就查找它的原型(也就是`__proto__对象原型`,指向的是,`prototype原型对象`)如果还没有,就查找,原型对象的原型(Object的原型对象)依次类推,直到找到Object为止(null)`_proto_对象原型`的意义:在于为对象的查找机制提供一个方向,或者说一条路线,但是它是一个非标准属性,因此实际开发中,不可以使用这个属性,它只是内部指向原型对象prototype

可以通过原型对象,为JavaScript的(原来的)内置对象,进行扩展自定义的方法

如下:通过数组的原型对象,添加求和的方法

	Array.prototype.sum = function(){console.log(this) // 指向它的调用者let sum = 0for(let i=0; i<this.length; i++){sum += this[i]}return sum}let arr = [1, 2, 3] // let arr = new Array(1,2,3)console.log(arr.sum()) // 6

constructor 指回 原来的原型对象

// 定义一个构造函数Starfunction Star(uname, age) {this.uname = unamethis.age = age}Star.prototype.sing = function () {console.log('唱歌~~')}// 对象.xxx:这样是向对象添加xxx属性,并不会覆盖这个对象Star.prototype.song = function () {console.log("我会唱歌")}Star.prototype.dance = function () {console.log("我会跳舞")}// 对象 = {}:这样是重新给对象赋值,会把原来的对象覆盖掉// 其实这里就是把 构造函数Star 的原型对象prototype 覆盖了,但是并不会影响uname、age在构造函数中定义的属性Star.prototype = {aaa() { console.log("我会唱歌aa") },bbb() { console.log("我会唱歌bbb") },// ....// ....// ....}// 手动用 constructor 指回原来的原型对象Star.prototype = {constructor: Star, // 指回原来的原型对象ccc() { console.log("我会唱歌ccc") },ddd() { console.log("我会唱歌ddd") },// ....// ....// ....}let ldh = new Star('刘德华', 123)console.log('ldh=', ldh) // ldh= Star {uname: '刘德华', age: 123}console.log('ldh.uname=', ldh.uname) // ldh.uname= 刘德华console.log('ldh.age=', ldh.age) // ldh.age= 123// ldh.sing() // Uncaught TypeError: ldh.sing is not a functionldh.song() // Uncaught TypeError: ldh.song is not a function// ldh.aaa() // Uncaught TypeError: ldh.aaa is not a function// ldh.bbb() //  Uncaught TypeError: ldh.bbb is not a functionldh.ccc() // 我会唱歌ccc.ldh.ddd() // 我会唱歌ddd

相关文章:

简单介绍一下js中的构造函数、原型对象prototype、对象原型__proto__、原型链

构造函数 function Star (uname, age){this.uname unamethis.age agethis.sing function(){ log(唱歌~) }}let xzq new Star(薛之谦, 30)let ldh new Star(刘德华, 20)log(ldh) // { uname: 刘德华, age: 20, sing: f }ldh.sing() // 唱歌~log(ldh.sing xzq.sing) // fal…...

Java基于springboot+vue开发服装商城小程序

演示视频&#xff1a; 小程序 https://www.bilibili.com/video/BV1rM411o7m4/?share_sourcecopy_web&vd_source11344bb73ef9b33550b8202d07ae139b 管理员 https://www.bilibili.com/video/BV1fc411D7V3/?share_sourcecopy_web&vd_source11344bb73ef9b33550b8202d07ae…...

设计模式之十二:复合模式

模式通常被一起使用&#xff0c;并被组合在同一个解决方案中。 复合模式在一个解决方案中结合两个或多个模式&#xff0c;以解决一般或重复发生的问题。 首先重新构建鸭子模拟器&#xff1a; package headfirst.designpatterns.combining.ducks;public interface Quackable …...

java通过年月获取当前月所有周(跨月),获取每周开始日期和结束日期

/*** 根据年月返回本月共几周&#xff0c;每周开始与结束日期*/public static List<Map<String, String>> queryWeek(String year, String month) throws ParseException {/** 周 **/final String[] weeks { "第一周", "第二周", "第…...

9.3 Windows驱动开发:内核解析PE结构节表

在笔者上一篇文章《内核解析PE结构导出表》介绍了如何解析内存导出表结构&#xff0c;本章将继续延申实现解析PE结构的PE头&#xff0c;PE节表等数据&#xff0c;总体而言内核中解析PE结构与应用层没什么不同&#xff0c;在上一篇文章中LyShark封装实现了KernelMapFile()内存映…...

Zephyr:Direct Distillation of LM Alignment

Zephyr&#xff1a;Direct Distillation ofLM Alignment IntroductionMethod Introduction dSFT已经被可以提升模型的指令遵循能力的准确性&#xff0c;但是student model 不会超过 teacher model。 作者认为 dSFT虽然可以让模型更好的理解用户意图&#xff0c;但是无法与人类…...

二叉树--算法题总结

1、利用层序遍历的产生的字符串来创建二叉树 /*** 使用层序遍历的字符串创建二叉树* param treeInfo* return*/public static TreeNode generateTreeNodeSecond(String treeInfo) {LinkedList<TreeNode> treeNodeLinkedList new LinkedList<>();if(StringUtils.is…...

PyQt6 QLabel标签控件

​锋哥原创的PyQt6视频教程&#xff1a; 2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~共计21条视频&#xff0c;包括&#xff1a;2024版 PyQt6 Python桌面开发 视频教程(无废话…...

即时通讯技术文集(第24期):音视频WebRTC好文合集 [共20篇]

为了更好地分类阅读 52im.net 总计1000多篇精编文章&#xff0c;我将在每周三推送新的一期技术文集&#xff0c;本次是第 24 期。 [- 1 -] 开源实时音视频技术WebRTC的现状 [链接] http://www.52im.net/article-126-1.html [摘要] 作为Google开源的技术&#xff0c;WebRTC并不…...

HTML+CSS+JS网页设计与制作摄影类个人网页

可以使用网页三剑客htmlcssjs实现网页设计与制作&#xff0c;页面排版布局高端大气。 使用HTMLCSS页面布局设计&#xff0c;HTMLCSSJS网页设计与制作摄影类个人网页&#xff0c;这是一个优质的个人网页制作。 凭借简约的设计风格、精湛的制作工艺&#xff0c;突破与创新的理念…...

U-boot(五):启动内核

本文主要探讨210的uboot启动内核过程。 嵌入式系统状态启动 未上电时bootloader、kernel、rootfs以镜像形式存储在启动介质中(X210为iNand/SD卡),运行时搬运到DDR中 未上电时u-boot.bin,zImage,rootfs在SD卡中各自对应的分区中,启动时去对应分区寻找(分区表一…...

tp8 使用rabbitMQ(2)工作队列

代码的参数说明在 第一小节的代码中&#xff0c;如果需要可移步到第一节中查看 工作队列 工作队列&#xff08;又称&#xff1a;任务队列——Task Queues&#xff09;是为了避免等待一些占用大量资源、时间的操作。当我们把任务&#xff08;Task&#xff09;当作消息发送到队列…...

ZKP11.4 Use CI to instantiate Fiat-Shamir

ZKP学习笔记 ZK-Learning MOOC课程笔记 Lecture 11: From Practice to Theory (Guest Lecturer: Alex Lombardi) 11.4 Use CI to instantiate Fiat-Shamir Avoid Bad Challenges Def: Given false claim x x x and a first message α \alpha α, a challenge β \beta …...

华为云编译构建CodeArts Build常见问答汇总

1.【Build】公有云编译构建是否支持导入外部机器做执行机 答&#xff1a;参考链接&#xff1a;https://support.huaweicloud.com/usermanual-devcloud/devcloud_01_0017.html • 使用代理机功能&#xff0c;需要配备1台4U8G或以上规格、磁盘>80GB的主机。 • 安装代理的…...

009 OpenCV 二值化 threshold

一、环境 本文使用环境为&#xff1a; Windows10Python 3.9.17opencv-python 4.8.0.74 二、二值化算法 2.1、概述 在机器视觉应用中&#xff0c;OpenCV的二值化函数threshold具有不可忽视的作用。主要的功能是将一幅灰度图进行二值化处理&#xff0c;以此大幅降低图像的数…...

基于python的NBA球员数据可视化分析的设计与实现

完整下载&#xff1a;基于python的NBA球员数据可视化分析的设计与实现.docx 基于python的NBA球员数据可视化分析的设计与实现 Design and Implementation of NBA Player Data Visualization Analysis based on Python 目录 目录 2 摘要 3 关键词 4 第一章 引言 4 1.1 研究背景 …...

《使用Python将Excel数据批量写入MongoDB数据库》

在数据分析及处理过程中&#xff0c;我们经常需要将数据写入数据库。而MongoDB作为一种NoSQL数据库&#xff0c;其具有强大的可扩展性、高性能以及支持复杂查询等特性&#xff0c;广泛用于大规模数据存储和分析。在这篇文章中&#xff0c;我们将使用Python编写一个将Excel数据批…...

leetcode_828_统计子串中的唯一字符

题意&#xff1a;所有子串中单个字符出现的次数和 问题转化&#xff1a;对于串中的每个字符&#xff0c;只包含其一次的所有子串的个数和 关于求只包含某位置字符一次的子串个数 class Solution { public:int uniqueLetterString(string s) {/* ...A...A...A...*/int n s.size…...

「Java开发中文指南」IntelliJ IDEA插件安装(一)

IntelliJ IDEA是java编程语言开发的集成环境。IntelliJ在业界被公认为最好的Java开发工具&#xff0c;尤其在智能代码助手、代码自动提示、重构、JavaEE支持、各类版本工具(git、svn等)、JUnit、CVS整合、代码分析、 创新的GUI设计等方面的功能是非常强大的。 插件扩展了Intel…...

单机多卡训练

参考几个不错的帖子&#xff08;还没来得及整理&#xff09;&#xff1a; 基于pytorch多GPU单机多卡训练实践_多卡训练效果不如单卡-CSDN博客 关于PyTorch单机多卡训练_能用torch.device()实现多卡训练吗-CSDN博客 Pytorch多机多卡分布式训练 - 知乎 (zhihu.com) 当代研究生…...

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

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

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...