6.26学习 es6中的类

news2024/10/7 12:24:03

学习 es6中的类

  • 1.了解构造函数的属性
  • 2.类的继承
    • 2.1继承父类实例上的属性
    • 2.2继承父类原型上的属性或则方法(公共属性或则方法)
      • 2.2.1 Object.create
      • 2.2.2 Object.setPrototypeOf
  • 3.es6中的类
    • 3.1定义
    • 3.2 继承

1.了解构造函数的属性

先上一份代码思考一下它的结果,

function Animal(name) {
   //属性分为两种 实例上的属性 公有属性
   this.name = name;
   this.arr = [1,2,3]
}

Animal.prototype.address = {location: '山间'}

let a1 = new Animal('猴子')
let a2 = new Animal('小鸡')

console.log(a1.arr === a2.arr)
console.log(a1.address === a2.address)

结果是false,true;为什么呢
在这里插入图片描述a1和a2相当于是从Animal拷贝了一份包含name,arr等的数据,明显他俩不是一个内存空间()的,所以他俩的arr肯定是不等的;但是a1和a2都是有一个__proto__属性的,他俩的__proto__刚好指向的就是Animal的prototype,所以他俩的address是一块相同的内存空间,所以是相等的

//每个实例都有一个__proto__指向所属类的原型
console.log(a1.__proto__ === Animal.prototype) //当然这个的结果也是true的

在这里插入图片描述
当然a1的constructor就是Animal了

console.log(a1.constructor === Animal) //true

2.类的继承

先创建两个类

function Animal(name) {
   this.name = name;
   this.arr = [1,2,3]
}
Animal.prototype.address = {location: '山间'}
 function Tiger(name) {
    this.name = name;
    this.age = 10;
 }
 Tiger.prototype.say = function(){
    console.log('说话')
 }

2.1继承父类实例上的属性

function Tiger(name) {
   this.name = name;
   this.age = 10;
   Animal.call(this)
}
Tiger.prototype.say = function(){
   console.log('说话')
}
let tiger = new Tiger()
console.log(tiger.arr) //[1,2,3]

一般都是不叫私有属性的,因为js来说,基本没有拿不到的属性,不算私有。

2.2继承父类原型上的属性或则方法(公共属性或则方法)

我们是不能直接把tiger的实例直接指向Animal的原型的,应该是先指向自己的tiger原型,如果原型上找不到的话,才去指向Animal的原型
在这里插入图片描述

Tiger.prototype.__proto__ = Animal.prototype;
let tiger2 = new Tiger()
console.log(tiger2.address) //{ location: '山间' }

2.2.1 Object.create

其实还可以用es5的object.create()来实现

Tiger.prototype = Object.create(Animal.prototype);

也可以自己写写Object.create的实现原理

function create(parentPrototype) {
   let Fn = function () {}
   Fn.prototype = parentPrototype;
   return new Fn()
}
Tiger.prototype = create(Animal.prototype);

在这里插入图片描述
这里有点小饶的,原本是tiger的实例__proto__指向Animal的原型(prototype),现在是tiger的实例指向了Fn的实例(new Fn()),Fn的prototype指向的Animal的prototype。
但是这样写又会有个问题的,如果我们现在打印tiger2的constructor,会是谁呢???

console.log(tiger2.constructor)//[Function: Animal]

会发现是Animal的构造函数,原生的Object.create也是这个结果的,那如果要tiger2的constrctor是Tiger呢,那该怎么写呢,有两种方法:

//1.自定义的create改造下
function create(parentPrototype) {
   let Fn = function () {}
   Fn.prototype = parentPrototype;
   let fn = new Fn();
   fn.constructor  = Tiger;
   return fn
}
//2.Object.create方法加参数配置
Tiger.prototype = Object.create(Animal.prototype,{constructor:{value:Tiger}});

这两种方法是都可以把iger2的constrctor改为Tiger的。

2.2.2 Object.setPrototypeOf

其实还有种es6的写法也可以,还更简洁

Object.setPrototypeOf(Tiger.prototype,Animal.prototype)

一样的效果的,小小的总结下,要继承父类的实例上的属性和公共属性,一般就call+Object.create或则call+Object.setPrototypeOf来实现。

3.es6中的类

3.1定义

class Animal{
   static flag(){
      return 222
   } //es7支持静态属性 es6只支持静态方法
   constructor(name){
      this.name = name;
      this.arr = [1,2,3]
   }
   //公共的属性方法怎么写呢
   //公共的方法
   say(){
      console.log('say')
      console.log(this)
   }
}
// 1)类不能当作函数调用
//Animal()  //TypeError: Class constructor Animal cannot be invoked without 'new'
let animal = new Animal()
animal.say()
console.log(Animal.flag())

//有个错误的写法
let say = animal.say
say() 
//这样看着是没有问题的,我先拿到animal的say方法,再在适合的地方调用它,但是!!!如果方法里有this
//es6规范里 如果单独调用原型上的方法 this是不存在的
// say
// Animal { name: undefined, arr: [ 1, 2, 3 ] }
// say
// undefined

3.2 继承

class Tiger extends Animal{
   constructor(name,age){
      super(name);
      this.age = age;
   }
}
let tiger = new Tiger();
tiger.say()
//如果Tiger里面不写constructor的话
let tiger2 = new Tiger('老虎',12);
tiger2.say()
console.log(Tiger.flag()) //静态属性也是可以被继承的 需要被类调用
//如果要写constructor的话,要注意规范

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

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

相关文章

css基础知识十二:CSS3常见动画有哪些?实现方式?

一、是什么 CSS动画(CSS Animations)是为层叠样式表建议的允许可扩展标记语言(XML)元素使用CSS的动画的模块 即指元素从一种样式逐渐过渡为另一种样式的过程 常见的动画效果有很多,如平移、旋转、缩放等等&#xff…

服务器技术(三)--Nginx

Nginx介绍 Nginx是什么、适用场景 Nginx是一个高性能的HTTP和反向代理服务器,特点是占有内存少,并发能力强,事实上nginx的并发能力确实在同类型的网页服务器中表现较好。 Nginx专为性能优化而开发,性能是其最重要的考量&#xf…

硬件设计-PLL篇(上)

文章目录 概要整体架构流程技术名词解释技术细节小结 概要 提示:这里可以添加技术概要 锁相环是一种反馈系统,其中电压控制振荡器(VCO) 和相位比较器相互连接,使得振荡器 可以相对于参考信号维持恒定的相位角度。锁相环可用来从固定的低频信…

linux上虚拟机vmware-workstation使用教程

linux上虚拟机vmware-workstation使用教程 一、vmware-workstation安装及卸载二、vmware-workstation基本操作命令4.1 启动和停止服务 本文介绍了在centos上安装vmware-workstation的使用教程。 一、vmware-workstation安装及卸载 本人实战记录:linux上虚拟机vmwa…

数据结构与算法之稀疏数组

稀疏数组 Java 数据结构与算法数据结构简介 稀疏数组(sparse array)简介二维数组转稀疏数组的思路稀疏数组转为原始的二维数组 Java 数据结构与算法 该学习代码都在🔗上 数据结构 简介 数据结构包括:线性结构和非线性结构。 线…

多肽药物产业学习笔记

文章目录 0. 背景0.Last 1. 行业初识1.1 行业壁垒1.2 多肽药物的特性及优势1.3 小分子药的特点 多肽药物发现策略多肽药物主要治疗领域罕见病肿瘤 糖尿病(GLP-1 )胃肠道骨科免疫心血管 关于利拉鲁肽X. 几个概念X.1 CXO业务X.1.1 CDMOX.1.2 CMOX.1.3 CRO X.1.4 CMO和CDMO的联系与…

“面试造飞机,上岗拧螺丝“?2023软件测试岗面试真题超全面整理(最新版)

软件测试这个岗位,想要找到一份高薪的工作,离不开繁杂的面试程序,这相信是很多准备应聘软件测试岗的朋友难题,很多已经在职多年的软件测试工程师对于这个岗位面试都谈虎色变,那么,为什么软件测试岗位的面试…

接口测试的目的

目录 前言: 1、接口测试可以确保系统功能的正确性。 2、接口测试可以保证系统的可靠性。 3、接口测试有助于为客户提供最佳的用户体验。 4、接口测试还可以帮助开发人员评估系统的性能。 5、接口测试可以帮助团队提高协作效率。 前言: 接口测试是…

基于STM32设计的汽车修理厂环境监测系统(华为云IOT)

一、前言 生产车间的环境质量监测仅靠传统的手持式仪器仪表及手工记录无法保证数据的即时性和准确性。因此,设计并实现了一种综合传感器技术、无线通信技术和移动应用开发技术的车间环境质量监测系统。 本系统以STM32为主控芯片,外接各种传感器模块采集环境信息,并将采集数…

Windows 下后台启动 jar 包,UTF-8 启动 jar 包

目录 1. Windows 下启动 jar 包2. 设置 cmd 编码3. UTF-8 编码启动 jar 包 1. Windows 下启动 jar 包 前台启动 jar 包: java -jar xxx.jar后台启动 jar 包: javaw -jar xxx.jar后台启动 jar 包脚本(start.bat): e…

Django框架之邮件系统,涉及HTML、富文本、附件邮件发送

参考 (892条消息) Django框架之邮件系统,涉及HTML、富文本、附件邮件发送_django邮件系统_李恩泽的技术博客的博客-CSDN博客https://blog.csdn.net/heroiclee/article/details/121406488 发送设置(settings.py) EMAIL_USE_SSL True # Sec…

通俗易懂讲解CPU、GPU、FPGA的特点

1. CPU vs GPU 大家可以简单的将CPU理解为学识渊博的教授,什么都精通;而GPU则是一堆小学生,只会简单的算数运算。可即使教授再神通广大,也不能一秒钟内计算出500次加减法。因此,对简单重复的计算来说,单单一…

畅聊职场之:作为程序员,不可不知道的银行IT岗位,收藏备选。

程序员向往的银行IT岗 1、引言2、国有商业银行2.1 中国农业银行2.2 中国邮政银行2.3 中国工商银行2.4 中国银行2.5 中国建设银行2.6 中国交通银行 3、股份制商业银行3.1 招商银行3.2 浙商银行3.3 浦发银行3.4 平安银行3.5 渤海银行3.6 中国民生银行3.7 中信银行3.8 中国光大银行…

60 KVM Skylark虚拟机混部-安装和配置

文章目录 60 KVM Skylark虚拟机混部-安装和配置60.1 安装Skylark60.1.1 硬件要求60.1.2 软件要求60.1.3 安装方法 60.2 配置Skylark60.2.1 日志60.2.2 功耗干扰控制60.2.3 LLC/MB干扰控制 60 KVM Skylark虚拟机混部-安装和配置 60.1 安装Skylark 60.1.1 硬件要求 处理器架构…

教你手把手使用 MyBatis 框架

目录 MyBatis 是什么? 配置 MyBatis 开发环境 方法一:创建项目时添加依赖 方法二:创建项目后添加依赖 配置连接字符串 配置 MyBatis 中的 XML 路径 业务代码 添加实体类 添加 Service 添加 Controller 增加,删除和修改…

Spring Boot 中的 @Configuration 注解

Spring Boot 中的 Configuration 注解 在 Spring Boot 中,我们经常使用注解来简化代码,提高效率。其中,Configuration 注解是一个非常重要的注解,它用于声明一个类作为 Spring 应用程序上下文的配置类。 在本文中,我…

CentOS-8 - AppStream 错误:为 repo ‘AppStream‘ 下载元数据失败

刚安装的 CentOS8 系统执行yum命令报错 CentOS-8 - AppStream 为 repo AppStream 下载元数据失败 错误:为 repo AppStream 下载元数据失败 原因:系统默认的yum源的问题…

MySQL MHA 单主架构 主从切换 高可用

MHA (Master High AvailabilityManager and tools for MySQL) 目前在MySQL高可用方面是一个相对成熟的解决方案,它是由日本人youshimaton采用Perl语言编写的一个脚本管理工具。目前MHA主要支持一主多从的架构,要搭建MHA,要求一个复制集群必须最少有3台数…

基于java+swing+mysql选课管理系统V2.0

基于javaswingmysql选课管理系统V2.0 一、系统介绍二、功能展示1.项目骨架2.项目内容3.登陆4.注册界面5、主界面6、添加选课8、修改选课 四、其它1.其他系统实现五.获取源码 一、系统介绍 项目类型:Java SE项目(GUI图形界面) 项目名称&…

深入浅出设计模式 - 桥接模式

博主介绍: ✌博主从事应用安全和大数据领域,有8年研发经验,5年面试官经验,Java技术专家✌ Java知识图谱点击链接:体系化学习Java(Java面试专题) 💕💕 感兴趣的同学可以收…