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.rhkb.cn/news/201221.html

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

相关文章

python刷题笔记1(42例题)

1. split()函数 str.split([sep [, maxsplit]]) 分割字符串&#xff0c;返回一个数组 2. 判断子串 # 判断子串是否在主串里面&#xff0c;是则输出“Yes”&#xff0c;否则输出“No” str1 input("子串&#xff1a;") str2 input("主串:") if str1 in s…

最新绿豆APP源码苹果CMS影视插件版本/原生JAVA源码+反编译开源+免授权

源码简介&#xff1a; 最新绿豆APP源码苹果CMS影视插件版本&#xff0c;它是原生JAVA源码反编译开源免授权&#xff0c;绿豆影视对接苹果CMS&#xff0c;它可以支持多功能自定义DIY页面布局。 1、新版绿豆视频APP视频6.1插件版反编译指南及教程 2、后端插件开源&#xff0c;可…

创建 Springboot 项目

前言 创建 Spring Boot 项目是很多Java开发人员入门的重要一步&#xff01; 欢迎来到本篇关于创建 Spring Boot 项目的博客&#xff01;Spring Boot作为一个快速、便捷的开发框架&#xff0c;为我们提供了简化和加速应用程序开发的利器。 在这个数字化时代&#xff0c;快速响…

在Jupyter Lab中使用多个环境,及魔法命令简介

一、Jupyter Lab使用conda虚拟环境 1、给虚拟环境添加 ipykernel 方法一: 创建环境时直接添加ipykernel 方法&#xff1a;conda create -n 【虚拟环境名称】python3.8 ipykernel实例如下&#xff1a; conda create -n tensorflow_cpu python3.8 ipykernel 方法二&#xff…

解决Vision Transformer在任意尺寸图像上微调的问题:使用timm库

解决Vision Transformer在任意尺寸图像上微调的问题&#xff1a;使用timm库 文章目录 一、ViT的微调问题的本质二、Positional Embedding如何处理1&#xff0c;绝对位置编码2&#xff0c;相对位置编码3&#xff0c;对位置编码进行插值 三、Patch Embedding Layer如何处理四、使…

【0到1学习Unity脚本编程】第一人称视角的角色控制器

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;【0…

7.Gin 路由详解 - 路由分组 - 路由文件抽离

7.Gin 路由详解 - 路由分组 - 路由文件抽离 前言 在前面的示例中&#xff0c;我们直接将路由的定义全部写在 main.go 文件中&#xff0c;如果后面 路由越来越多&#xff0c;那将会越来越不好管理。 所以&#xff0c;下一步我们应该考虑将路由进行分组管理&#xff0c;并且将其抽…

腾讯云代金券怎么领取(腾讯云代金券在哪领取)

腾讯云代金券是可抵扣费用的优惠券&#xff0c;领券之后新购、续费、升级腾讯云相关云产品可以直接抵扣订单金额&#xff0c;节省购买腾讯云的费用&#xff0c;本文将详细介绍腾讯云代金券的领取方法和使用教程。 一、腾讯云代金券领取 1、新用户代金券【点此领取】 2、老用户…

SVN创建分支

一 从本地创建方式可指定版本号进行分支创建。 1、在本地目录右击 -----> 点击branch/tag(分支/标签) From: 源&#xff0c;可指定具体的版本号&#xff0c; To path: 可通过"..."选择分支路径 最后点击确定&#xff0c;交由服务器执行创建。 二 通过SVN客…

3D 纹理渲染如何帮助设计师有效、清晰地表达设计理念

在线工具推荐&#xff1a; 三维数字孪生场景工具 - GLTF/GLB在线编辑器 - Three.js AI自动纹理化开发 - YOLO 虚幻合成数据生成器 - 3D模型在线转换 - 3D模型预览图生成服务 定义 3D 渲染可视化及其用途 3D 可视化是一种艺术形式。这是一个机会。这是进步。借助 3D 纹理…

CNVD-2023-12632:泛微E-cology9 browserjsp SQL注入漏洞复现 [附POC]

文章目录 泛微E-cology9 browserjsp SQL注入漏洞(CNVD-2023-12632)漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议 泛微E-cology9 browserjsp SQL注入漏洞(CNVD-2023-12632)漏洞复现 [附POC] 0x…

visionOS空间计算实战开发教程Day 1:环境安装和编写第一个程序

安装 截至目前visionOS还未在Xcode稳定版中开放&#xff0c;所以需要下载​​Xcode Beta版​​。比如我们可以下载Xcode 15.1 beta 2&#xff0c;注意Xcode 15要求系统的版本是macOS Ventura 13.5或更新&#xff0c;也就是说2017年的MacBook Pro基本可以勉强一战&#xff0c;基…

海外IP代理:数据中心代理IP是什么?好用吗?

数据中心代理是代理IP中最常见的类型&#xff0c;也被称为机房IP。这些代理服务器为用户分配不属于 ISP&#xff08;互联网服务提供商&#xff09;而来自第三方云服务提供商的 IP 地址。数据中心代理的最大优势——它们允许在访问网络时完全匿名。 如果你正在寻找海外代理IP&am…

【JavaEE】Servlet实战案例:表白墙网页实现

一、功能展示 输入信息&#xff1a; 点击提交&#xff1a; 二、设计要点 2.1 明确前后端交互接口 &#x1f693;接口一&#xff1a;当用户打开页面的时候需要从服务器加载已经提交过的表白数据 &#x1f693;接口二&#xff1a;当用户新增一个表白的时候&#xff0c;…

MEMS制造的基本工艺——晶圆键合工艺

晶圆键合是一种晶圆级封装技术&#xff0c;用于制造微机电系统 (MEMS)、纳米机电系统 (NEMS)、微电子学和光电子学&#xff0c;确保机械稳定和气密密封。用于 MEMS/NEMS 的晶圆直径范围为 100 毫米至 200 毫米&#xff08;4 英寸至 8 英寸&#xff09;&#xff0c;用于生产微电…

单链表(数据结构与算法)

✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅ ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨ &#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1…

PostgreSQL导出表结构带注释

我们在平时开发过程中&#xff0c;经常会在字段的注释中&#xff0c;加上中文&#xff0c;解释字段的相关含义&#xff0c;也可以避免时间太久忘记这个字段代表什么&#xff0c;毕竟英文水平不好。我们可能要经常整理数据库表结构&#xff0c;提供他人去收集数据&#xff0c;但…

【SpringBoot】通过profiles设置环境

效果图&#xff0c;通过profiles设置环境 在父级pom.xml中添加配置 <profiles><profile><id>dev</id><properties><application.environment>dev</application.environment></properties><activation><activeByDefau…

前端数组方法汇总集锦

前言 数组主要使用场景有&#xff1a; 存储和处理数据&#xff1a;数组是一种有序的数据结构&#xff0c;可以用来存储和处理多个相关的数据。在前端开发中&#xff0c;我们经常使用数组来存储和处理列表、表格、选项等数据。 循环和遍历&#xff1a;数组提供了循环和遍历的功能…