js进阶笔记之原型,原型链

目录

1、原型对象

constructor 属性

对象原型

 2、原型链

3、instanceof 

4、原型继承


1、原型对象

面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了。

面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。

面向过程开发(关注具体实现步骤)   

 面向对象开发(分析涉及的对象,指挥对象完成)----- 封装、继承、多态

  原型为了共享公共的成员     prototype 
 原型:JS为每个构造函数提供一个属性prototype(原型),它的值是一个对象,prototype也叫原型对象
 

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

  • JavaScript 规定,每一个构造函数都有一个 prototype 属性,指向另一个对象,所以我们也称为原型对象

  • 这个对象可以挂载函数,对象实例化不会多次创建原型上函数,节约内存

  • 我们可以把那些不变的方法,直接定义在 prototype 对象上,这样所有对象的实例就可以共享这些方法。

  • 构造函数和原型对象中的this 都指向 实例化的对象

    <script>// 面向过程开发(关注具体实现步骤)// 面向对象开发(分析涉及的对象,指挥对象完成任务) - 封装、继承、多态function Cat(name, age) {this.name = namethis.age = age//  给实例添加eat方法,将来每一个对象都有这个eat方法,造成空间浪费// this.eat = function () {//   console.log('猫吃老鼠')// }}// 给Cat原型添加公共的属性或方法,这样所有new出来的实例都可以访问Cat.prototype.eat = function () {console.log('猫吃老鼠')}Cat.prototype.nation = 'china'const cat1 = new Cat('加菲猫', 3) // {name:  '',age: ,eat}const cat2 = new Cat('银渐层', 4) // {name: '',age: ,eat() {}}console.log(cat1.age)console.log(cat1.nation)cat1.eat()cat2.eat()console.log(cat1.eat === cat2.eat) // true// 原型为了共享公共的成员  prototype// 原型: JS为每个构造函数提供一个属性prototype(原型),它的值是一个对象,prototype也叫原型对象console.log(Cat.prototype)console.log(Cat.prototype.constructor === Cat) // true// function f() {}// console.log(f.prototype)</script>

constructor 属性

constructor  属性,原型对象的属性---->原型对象的构造函数
 

 <script>// constructor属性,原型对象的默认属性->原型对象的构造函数//  Array.prototype.constructor === Arrayconsole.log(Array.prototype.constructor === Array) //  trueconst arr = [] //  new  Object()console.log(arr.constructor === Array) // trueconsole.log(arr.constructor === Array.prototype.constructor) // trueconsole.log(arr.constructor) // 访问arr数组对象的constructor,会到原型去访问console.log(Object.prototype.constructor) // Object ;const obj = {}console.log(obj.constructor) // Objectconst obj2 = { a: 1 }console.log(obj.constructor === obj2.constructor) // true</script>

访问成员的查找原则

 访问对象成员的原则:先查找自己身上有没有,有的话就使用,没有去原型查找

  <script>function Cat(name, age) {// this.name = namethis.age = age}Cat.prototype.eat = function () {console.log('猫抓老鼠')}Cat.prototype.name = '亚洲猫王'const cat = new Cat('小花', 3) // {name: '小花', age: 3}// 访问对象成员的原则: 先查找自己身上有没有,有的话就使用,没有去原型查找console.log(cat.name)</script>

对象原型

对象都会有一个属性__proto__ 指向构造函数的 prototype 原型对象,之所以我们对象可以使用构造函数 prototype  

__proto__ 对象原型里面也有一个 constructor属性,指向创建该实例对象的构造函数

 三者关系

构造函数   原型    原型对象

每个对象都有一个_proto_属性(非标准属性->ES6标准属性),指向原型对象,它与[[Prototype]]等价

 2、原型链


    对象访问成员的机制


    1、首先查找自身有没有,有就就近原则使用
    2、自身没有该成员,通过_proto_找到原型对象,看原型对象上有没有,有就执行
    3、假如原型对象上也没有,再找原型对象的_proto__,一直找到0bject.prototype
    4、一直找到Object. prototype,找不到就undefined

3、instanceof 

typeof  检测数据类型   不能精准的检测引用类型
 instanceof 实例对象 instanceof  构造函数
  判断构造函数的原型对象是不是在实例对象的原型链上

<script>//  // typeof 检测数据类型// string number booleanconsole.log(typeof []) //'object'console.log(typeof {}) // 'object'console.log(Array.prototype) // 数组原型也提供toString(),自己原型的方法是拼接字符串// console.log([1, 2, 3].toString()) // [object Array]console.log({}.toString()) // [object Object]console.log(Object.prototype.toString.call([])) // call调用函数// instanceof 实例对象 instanceof  构造函数// 判断构造函数的原型对象是不是在实例对象的原型链上console.log([] instanceof Array) // trueconsole.log([] instanceof Object) // trueconsole.log({} instanceof Array) // false</script>


4、原型继承

继承方式:构造函数继承、原型继承、组合继承、。。。。

    原型继承-----> 儿子的原型指向父实例对象,这样父实例对象的成员就可以实现继承
    
    缺点:继承的引用类型属性就一份

    <script>// 继承const person = {ears: 2,eat: function () {console.log('eating')},hobby: ['reading', 'running'],}function Student(name, age) {this.name = namethis.age = age}// 让Student的原型指向personStudent.prototype = personStudent.prototype.constructor = StudentStudent.prototype.study = function () {console.log('study hard!!!')} /*{ears, eat,  hobby,constructor, study}*/const s1 = new Student('zs', 16)const s2 = new Student('zw', 24)console.log(s1.ears)s1.study()s1.eat()s2.hobby.push('coding')console.log(s2.hobby)console.log(s1.hobby)console.log(person)</script>

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

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

相关文章

音频采集的相关基础知识

本文引注: https://zhuanlan.zhihu.com/p/652629744 1.麦克风的种类 (1)模拟麦克风 ECM麦克风&#xff1a;驻极体电容麦克风(ECM)&#xff0c;典型的汽车ECM麦克风是一种将ECM单元与小型放大器电路整合在单个外壳中的装置。放大器提供一个模拟信号&#xff0c;其电压电平允许…

JavaScript 如何拷贝对像(Object)或者数组(Array)

目录 JavaScript数据拷贝类型 浅拷贝 深拷贝 举例&#xff1a; 浅拷贝 数组 对象 深拷贝 lodash cloneDeep使用示例 自定义深拷贝方法示例 JSON.parse() 和 JSON.stringify()使用示例 JavaScript数据拷贝类型 浅拷贝 数组可以使用Array.prototype.slice()方法 …

python实现鼠标实时坐标监测

python实现鼠标实时坐标监测 一、说明 使用了以下技术和库&#xff1a; tkinter&#xff1a;用于创建GUI界面。pyperclip&#xff1a;用于复制文本到剪贴板。pynput.mouse&#xff1a;用于监听鼠标事件&#xff0c;包括移动和点击。threading&#xff1a;用于创建多线程&…

PWM实验

PWM相关概念 PWM:脉冲宽度调制定时器 脉冲&#xff1a;方波信号&#xff0c;高低电平变化产生方波 周期&#xff1a;高低电平变化所需要时间 频率&#xff1a;1s钟可以产生方波个数 占空比&#xff1a;在一个方波内&#xff0c;高电平占用的百分比 宽度调制&#xff1a;占…

AI:86-基于深度学习的街景图像地理位置识别

🚀 本文选自专栏:人工智能领域200例教程专栏 从基础到实践,深入学习。无论你是初学者还是经验丰富的老手,对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带有在本地跑过的代码,详细讲解供大家学习,希望可以帮到大家。欢迎订阅支持,正在不断更新中,…

Leetcode:622. 设计循环队列 题解【具详细】

目录 一、题目&#xff1a; 二、思路详解&#xff1a; 1.循环队列的存储定义 2.循环队列的创建 3.循环队列的判空与判断情况 (1) 循环队列的判空: (2) 循环队列的判满 4.循环队列元素的插入 5.循环队列元素的删除 6.获取队头元素 7.获取队尾元素 8.循环队列释放 三…

打不开clickonce问题解决过程

1.用户电脑user文件夹下有xx和xx.1两个账户,原先安装在xx账户下,后修了电脑原数据保留在xx.1,新创建XX,之后clickonce就打不开了表现为没有反应,,删除注册表和appdata都只能正常安装,但是不能打开,没有任何报错,发现在我的电脑下打开有这样的提示,,在用户电脑上没有 尝试通过修…

大家为什么开始配置长效IP代理?长效IP代理有什么优势?

随着网络技术的发展&#xff0c;越来越多的人开始关注网络安全和隐私保护。其中&#xff0c;长效IP代理作为一种安全、高效的解决方案&#xff0c;受到了越来越多人的关注。本文将探讨大家为什么开始配置长效IP代理&#xff0c;以及长效IP代理的优势。 一、长效IP代理的优势1.保…

目前市面上进销存软件有哪些?那个牌子靠谱?

目前市面上进销存软件有哪些&#xff1f;哪个牌子靠谱&#xff1f; 说起进销存软件&#xff0c;如果你是没用过&#xff0c;正在寻找一款合适的&#xff0c;你是不是遇到了以下问题&#xff1a; 公司多部门协作还在用Excel&#xff0c;没有信息化支撑&#xff1f;跨部门存在信…

C语言——深入理解指针——函数指针

一、函数指针变量 1.1 函数指针变量的创建 什么是函数指针变量呢&#xff1f; 函数指针变量应该是用来存放函数地址的&#xff0c;未来通过地址能够调⽤函数的。 那么函数是否有地址呢&#xff1f; 我们做个测试&#xff1a; #include <stdio.h> void test() {print…

软考中级哪个科目最简单?

那必须是系统集成项目管理工程师&#xff01; 系统集成项目管理工程师考试内容少&#xff0c;题型简&#xff0c;报考门槛低&#xff0c;零基础就能报考&#xff0c;学习内容比较简单&#xff0c;接近工作和生活。 系统集成项目管理工程师证书是中国计算机技术职业资格&#…

2024年湖北省水利厅的安管人员水安ABC证报考指南

2024年湖北省水利厅的安管人员水安ABC证报考指南 关于水安ABC报考&#xff0c;很多企业乃至个人都不是很清楚流程&#xff0c;叙后尘来给大家科普一下报考详细细节。2023年年度仅剩一次的报考时间定于2023年11月23日至11月28日。在这个时间段才可以网上填写报考资料&#xff0…

js读取json文件

1. 原生的两种方法 1.1 XMLHttpRequest const xhr new XMLHttpRequest(); xhr.overrideMimeType("application/json"); xhr.open(GET, data.json, true); xhr.onreadystatechange function () {if (xhr.readyState 4 && xhr.status 200) {const data …

使用EasyPlayer播放H.265视频流

使用EasyPlayer播放H.265视频流 EasyPlayer流媒体视频播放器 EasyPlayer流媒体视频播放器 EasyPlayer流媒体视频播放器可支持H.264与H.265编码格式&#xff0c;性能稳定、播放流畅&#xff0c;能支持RTSP、RTMP、HLS、FLV、WebRTC等格式的视频流播放&#xff0c;并且已实现网页…

Cannot read properties of undefined (reading ‘resetFields‘)“ 报错解决

遇到这种报错 先去相关页面搜索关键字 定位到具体的报错代码 Cannot read properties of undefined (reading ‘resetFields’)" 关键字&#xff1a;resetFields 此方法作用&#xff1a;对整个表单进行重置 将所有字段值重置为初始值并移除校验结果 报错场景&#xff1a;…

坚鹏:湖北银行数字化转型背景下银行运营管理创新培训圆满结束

湖北银行正式成立于2011年2月27日&#xff0c;总部设在武汉。现有员工5000余人。营业网点从成立之初的93家增长至241家&#xff0c;实现全省17个市州、59个县域营业网点全覆盖。截至2022年末&#xff0c;全行资产总额4026亿元&#xff0c;存款总额2956亿元&#xff0c;贷款总额…

人工标签不准确的一种解决方案:PCA降维可视化筛选正样本

背景 在实际的业务场景里&#xff0c;用会话文本构建模型&#xff08;机器学习/深度学习&#xff09;来做意图分类之类的任务时&#xff0c;经常会出现人工打标不够准确的问题&#xff0c;标签都不准确的话模型当然无法学习到有效信息了。这个问题真的非常头疼…除了与业务沟通…

d3dcompiler_47.dll缺失怎么修复,d3dcompiler_47.dll的作用有哪些

d3dcompiler_47.dll丢失是一种常见的电脑问题。如果你遇到了这个问题&#xff0c;不要惊慌&#xff0c;下面的方法可以帮助你解决。本文将详细介绍解决d3dcompiler_47.dll丢失问题的步骤&#xff0c;让你手把手地学会。 一.解决d3dcompiler_47.dll丢失问题的步骤 解决方法一&a…

CSS伪类选择器详细讲解

前言 伪类选择器在CSS中起到的作用可以说是至关重要的&#xff0c;如果CSS没有伪类选择器&#xff0c;有很多效果都要借助js来完成&#xff0c;这样不仅代码量增加&#xff0c;维护起来你难度也大。这样程序员的工作量大&#xff0c;也违背了CSS诞生的作用&#xff0c;就是提高…

重磅!TikTok Shop将以新方式重启印尼业务

据报道&#xff0c;TikTok将通过与印尼电商平台合作的方式重启电商业务。 据悉&#xff0c;印尼合作社和中小企业部就TikTok Shop将在印尼重新开业的消息发表了讲话。合作社和中小企业部Temmy Satya Permana证实TikTok Shop将在印尼重新开业的消息。他表示&#xff0c;TikTok …