【JavaScript】多态(Symbol),迭代器接口,getter/setter,继承,instanceof

news2024/11/27 11:51:18

❤️ Author: 老九
☕️ 个人博客:老九的CSDN博客
🙏 个人名言:不可控之事 乐观面对
😍 系列专栏:

文章目录

  • 多态
    • symbol
  • 迭代器接口
    • 实现数组的迭代器方法
    • 练习
  • Getter/Setter
    • static
  • 继承
  • instanceof

多态

  • 我拿到一个对象,这个对象有我需要的对应的功能。
  • 补充:for of可以遍历数组,字符串,集合(Set);这些都是暴露了一个接口,才能使用for of循环的
  • typeof类型只有这些是返回特殊的,其他的都是返回object(null也是返回object)
  • 多态的体现:Symbol,迭代器接口,数组和字符串都有slice,concat,at,indexof等方法
    在这里插入图片描述

symbol

  • 每一个symbol都是一个唯一的存在,symbol需要一个函数来调用,和创建对象不同的是,symbol()括号里可以写名字,对象不能;Symbol更多的用途就是作为对象的属性名字的
  • Symbol不会隐式转换为字符串(a + ’‘ 这样是不行的);它是原型类型,typeof对它的返回是symbol;symbol函数调用时不能加new;symbol自带一个方法是for
<script>
  var map = new Map()
  function SymbolFor(key){
    if(map.has(key)){
      return map.get(key)
    }else{
      var s = Symbol(key)
      map.set(key,s)
      return s
    }
  }
</script>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 通过xxx.description可以查看创建xxx时候传入的字符串
    在这里插入图片描述
  • 设置对象里的变量名字
    在这里插入图片描述
  • 并且symbol只能通过中括号的形式访问
    在这里插入图片描述

迭代器接口

  • Symbol中有一个iterator接口 ,迭代器的基础结构是obj对象里有一个Symbol.iterator的属性,这个属性返回一个对象,这个对象里面有一个next的方法,因为是个闭包,a的值由外层作用域来存储;
  • 这个对象自动放在for of中,然后for of自动调用这个对象进行循环遍历
  • 迭代器接口是多态的重要体现

在这里插入图片描述

在这里插入图片描述

实现数组的迭代器方法

  • 对象实现了迭代器接口就称iterable,也就是a是可迭代对象
  • 调用迭代器接口返回的对象叫iterator,也就是a[Symbol.iterator]是迭代器
<script>
  a[Symbol.iterator] = function(){
    var len = 0
    return {
      next : ()=>{
        return {
          value : this[len++],
          done : len > this.length
        }
      }
    } 
  }
</script>

练习

  • 在for(var n of 10)的上面写一段代码,让它能够从1到10输出
<script>
  Number.prototype[Symbol.iterator] = function(){
    var target = this
    var curr = 1
    return {
      next : {
        return{
          value : curr++,
          done : curr > target + 1
        }
      }
    }
  }

  for(var n  of 10){
    console.log(n)
  }
</script>

Getter/Setter

  • 可以实现属性的可读不可写,并且可以实现不用一直维护对应的属性(size),下面这样写虽然在对象里写的是一个方法,但是读的话是按照属性来读的
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • 那么如何给一个已经存在的对象,付给一个属性,这个属性有getter和setter,通过Object.defineProperty(对象名,属性名(字符串),方法)
    在这里插入图片描述
  • 那么如何让if(a == 1 && a = = 2 && a = = 3)能够成立,通过Object.defineProperty方法,将window设置一个a属性添加一个get方法
    在这里插入图片描述
  • 第二种解法:通过设置valueof和toString方法,发现js方法,如果对象和数字进行比较,会调用valueof方法,接着如果valueof方法如果被循环调用的话,js会自动转到toString方法,toString方法,如果在自定义对象中未被覆盖,会用【object xxx】来展示
  • 如果是两个对象进行比较,如果同一个对象返回真,否则返回假;如果一个对象和一个原始类型进行比较,对象会自动进行类型转换,类型转换就使用到了valueof和toString的方法在这里插入图片描述

static

  • 该函数为静态函数,在构造函数里,如果加上static的函数,可以直接使用,不需要调用构造函数的实例
  • 构造函数是这个类型的命名空间,与这类型有关的一些函数或者常量都可以以静态属性或静态方法的形式挂在构造函数上
    在这里插入图片描述
    在这里插入图片描述
  • 补充:String.from方法,String.of方法,这些都是静态方法
    from这个方法里面的值可以传入类数组对象,或者迭代器对象;of方法就是直接创建一个数组。
    在这里插入图片描述

继承

  • extend,跟java差不多,要注意在super之前,是不能使用this的,super是绑定了父类的构造函数,然后通过父类才产生出了子类
<script>
  class Creature {
    constructor(age) {
      this.age = age
    }
    grow() {
      this.age++
    }
  }

  class Animal extends Creature {
    constructor(age, name) {
      //super就是调用父类的构造函数
      //父类的构造函数运行完,可以认为this已被“构造”为一个Creature
      super(age)
      this.name = name
      this.x = 0
      this.y = 0
    }
    moveTo(x, y) {
      this.x = x
      this.y = y
    }
  }
</script>
  • 基本关系是:有一个类A,B继承自A,那么A有一个独自的原型属性,B有一个独自的原型属性,B的一个原型是A,B的原型属性的原型是A的原型属性
  • 继承要实现对父类实例方法的复用(通过构造函数的prototype属性之间的继承来实现);对父类构造函数的复用(super);对父类静态方法的继承(通过构造函数之间的原型继承来实现)
  • 下面这几行代码,就类似于实现了extends的东西,._proto_和setPrototypeOf(把谁的原型属性设置为谁的原型属性)是一样的作用,
    在这里插入图片描述
  • 在es5之前的写法就是用Animal.prototype = new Creature()直接把对象传给animal的原型属性上
  • 如果是想用父类的方法,但是自己想添加一些小功能,可以通过super调用,super有两个用处。
    在这里插入图片描述
  • 所有的class都继承自object类型,如果不想让其继承自object类型,可以继承null,class a extends null{}

instanceof

————————————————————————
♥♥♥码字不易,大家的支持就是我坚持下去的动力♥♥♥
版权声明:本文为CSDN博主「亚太地区百大最帅面孔第101名」的原创文章

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

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

相关文章

虽迟但到,我的2022年终总结

“子在川上曰&#xff0c;逝者如斯夫”。经历一年的居家办公、解封&#xff0c;终于在年底回归正常生活。时隔三年回老家过年&#xff0c;一切如故&#xff0c;好像疫情从没有来过。2022年对我来说是值得记忆的一年&#xff0c;在这一年里完成了买房这件人生大事&#xff0c;终…

SpringCloud学习笔记【part1】Spring Cloud Gateway网关的搭建、处理跨域问题

一、Spring Cloud Gateway 介绍 API网关出现的原因是微服务架构的出现&#xff0c;不同的微服务一般会有不同的网络地址&#xff0c;而外部客户端可能需要调用多个服务的接口才能完成一个业务需求。API 网关是介于客户端和服务器端之间的中间层&#xff0c;所有的外部请求都会先…

macos nginx 安装/卸载,启动/重启/关闭

1.安装/卸载 在macos中使用homebrew安装 brew install nginx,卸载brew uninstall nginx。homebrew安装 brew install xx&#xff0c;卸载brew uninstall xx 可以直接安装nginx-full&#xff0c;来安装echo模块 brew install nginx-full # 如果上面安装报错&#xff0c;需要按…

C 程序设计教程(18)—— 数组和指针(一):数组

C 程序设计教程&#xff08;18&#xff09;—— 数组和指针&#xff08;一&#xff09;&#xff1a;数组 该专栏主要介绍 C 语言的基本语法&#xff0c;作为《程序设计语言》课程的课件与参考资料&#xff0c;用于《程序设计语言》课程的教学&#xff0c;供入门级用户阅读。 目…

【SpringCloud复习巩固】微服务+Eureka+Ribbon

文章中需要用到的代码和sql 链接&#xff1a;https://pan.baidu.com/s/1_1Qqro7wR5zi7Ds8Bgmf-g 提取码&#xff1a;vxzg 目录 一.微服务 1.1单体架构 1.2分布式架构 1.3微服务 1.4各自特点总结 1.5微服务技术对比 二.服务拆分及远程调用 三.Eureka注册中心 3.1服务调用…

KVM虚拟化之小型虚拟机kvmtool的使用

根据 kvmtool github仓库文档的描述&#xff0c;类似于QEMU&#xff0c;kvmtool是一个承载KVM Guest OS的 host os用户态虚拟机&#xff0c;作为一个纯的完全虚拟化的工具&#xff0c;它不需要修改guest os即可运行, 不过&#xff0c;由于KVM基于CPU的硬件虚拟化支持&#xff0…

【JavaGuide面试总结】Java集合篇·上

【JavaGuide面试总结】Java集合篇上1.简单说说Java集合框架体系Collection接口Map接口2.说说 List, Set, Queue, Map 四者的区别&#xff1f;3.你在编程时如何选用集合?4.Collection 子接口之 ListArrayList 和 Vector 的区别?ArrayList 与 LinkedList 区别?说一说 ArrayLis…

ISIS特性与配置实例(DU比特、OL置位、Tag等)

2.3.0 ISIS基础命令与查询命令介绍、ISIS特性、ISIS与OSPF 本文章以ISIS的特性结合ISIS配置实例进行讲述&#xff0c;故篇幅会非常之大&#xff0c;建议电脑端上结合目录观看以免影响观感。 目录路由渗透配置路由渗透实例一、配置设备IP地址二、配置ISIS三、检查ISIS&#xff0…

ProGet 22.0 Enterprise Crack by Xacker

ProGet将所有包和 Docker 容器放在一个地方&#xff0c;扫描漏洞&#xff0c;并控制谁可以访问不同的提要。ProGet 可在数分钟内完成安装&#xff0c;并且拥有功能强大的免费版本&#xff0c;其中包含许多您可以在准备就绪后进行升级的强大功能。 特色用例 私人 NuGet 服务器 …

Bug:SpringBoot类文件具有错误的版本 61.0, 应为 52.0

Bug:SpringBoot类文件具有错误的版本 61.0, 应为 52.0 启动Springboot项目时候报错 java: 无法访问org.springframework.boot.SpringApplication 错误的类文件: /D:/Maven/apache-maven-3.6.3/repository/org/springframework/boot/spring-boot/3.0.0/spring-boot-3.0.0.jar!/o…

Linux动静态库

目录 一、库的概念与类型 二、库的组成文件(.o) 2.1 初始源代码(.c .h) 2.2 可重定位二进制文件(.o) 2.3 库文件(lib) 与 头文件(.h&#xff09; 三、实现静态库(.a) 3.1 建立静态库文件 3.2 交付库 3.3 编译器在编译链接中的作用 3.4 使用第三方静态库与头文件 3.…

JavaScript的引入方式和基础语法~

JavaScript简介&#xff1a; JavaScript是一门跨平台&#xff0c;面向对象的脚本语言&#xff0c;来控制网页行为的&#xff0c;它能使网页可交互 W3C标准&#xff1a;网页主要由三部分组成 结构&#xff1a;HTML 表现&#xff1a;CSS 行为&#xff1a;JavaScriptJavaScript…

大数据技术架构(组件)8——Hive:Function Cases UDF/UDTF/UDAF 1

1.3、Function Cases1.3.1、窗口函数row_number&#xff1a;使用频率 ★★★★★rank &#xff1a;使用频率 ★★★★dense_rank&#xff1a;使用频率 ★★★★rank/dense_rank/row_number对比first_value&#xff1a;使用频率 ★★★last_value&#xff1a;使用频率 ★lead&am…

下班前几分钟,我彻底弄懂了并查集

目录一、并查集的由来二、代表元法2.1 初始化2.2 查询2.3 合并2.4 设计理念三、并查集的应用3.1 合并集合3.2 连通块中点的数量3.3 亲戚3.4 省份数量References一、并查集的由来 考虑这样一个场景。 现有 nnn 个元素&#xff0c;编号分别为 1,2,⋯,n1,2,\cdots,n1,2,⋯,n&…

【JVM】详解直接内存

文章目录1. 直接内存概述2. 直接内存的使用2.1 Java缓冲区2.2 直接内存3. 直接内存的释放3.1 直接内存释放原理4. 禁用显式回收对直接内存的影响1. 直接内存概述 下面是 《深入理解 Java 虚拟机 第三版》2.2.7 小节 关于 Java 直接内存的描述。 直接内存&#xff08;Direct Me…

从零开始的数模(七)层次分析法

一、概念 1.1定义 应用场景&#xff1a; 1、最佳方案选取 2、评价类问题 3、指标体系的优选 步骤&#xff1a; 1、建立层次结构模型&#xff1b; 2、构造判断(成对比较)矩阵&#xff1b; 3、层次单排序及其一致性检验&#xff1b; 4、层次总排序及其一致性检验&#xff1b; …

Mybatis 分页插件使用

1、分页插件的使用步骤 需求分析&#xff1a; 我们在前端界面获取用户表的时候&#xff0c;在界面上一次显示出成百上千条数据&#xff0c;用户体验&#xff0c;软件性能都会很糟糕&#xff0c;假设数据库内存储十万条记录&#xff0c;后端一次性返回这么多数据&#xff0c;前…

C语言深度解剖-关键字(2)

目录 1.关键字 static 源文件与头文件 static修饰全局变量 static修饰局部变量 写在最后&#xff1a; 1.关键字 static 源文件与头文件 平时我们在练习的时候&#xff0c;都只会开一个用来测试的源文件&#xff0c; 但是&#xff0c;当我们在写一个项目的时候&#xff…

Hal GPIO控制--LED/Delay实现

环境配置在CubeMx Pinout view 中点击可以设置管脚模式 &#xff0c;右击 可以配置管脚名称这里以点PB8灯为例&#xff0c;可以设置灯输出电平 &#xff0c;模式为输出&#xff0c;不进行上下拉&#xff0c; 速度 模式设置以及用户自定义名称。。时钟树配置&#xff0c;使用HSI…

FreeRTOS源码获取-->FreeRTOS移植-->FreeRTOS源码文件了解 | FreeRTOS二

目录 说明&#xff1a; 一、获取源码 1.1、FreeRTOS官网获取 1.2、正点原子开发板A盘资料\6&#xff0c;软件资料\13&#xff0c;版本-->V10.4.6 二、移植源码 2.1、移植步骤 2.1.1、添加源码、头文件路径 2.1.2、添加FreeRTOSConfig.h文件路径 2.1.3、添加或修改相…