ES6 Class和Class继承

1.class的基本语法

class可以理解为是一个语法糖,将js只能通过构造函数创建实例的方法进行了补充

构造函数:

function Person ({ name, age=18 }) {this.name = namethis.age = age
}
new Person({name: '张三'})

Class类:

class Person {constructor ({ name, age=18 }) {this.name = namethis.age = age}
}
new Person({name: '张三'})

2.深入了解class的特性

  • class的数据类型是一个函数
  • class的原型的constructor指向class
  • 通过new关键字创建出来的实例的constructor指向class
  • class内部的方法是定义在实例的原型上,class内部的属性和constructor里面的方法和属性定义在实例上(构造函数方法定义在实例的原型上,属性定义在实例上 )
  • 通过类创建对象的本质是调用类的constructor,如果类未定义constructor,则会在使用时默认添加。
  • class不能直接调用,需要通过new关键字(构造函数可以直接调用,也可以new 创建实例)
  • class内部方法this指向的是实例,class内部是严格模式(严格模式下不存在变量提升)
  • class中箭头函数的this和普通函数的指向不同:class上面定义的普通函数是在实例的原型上箭头函数this指向定义位置所在的作用域即实例本身,通过解构出来的方法直接调用普通函数的this是undefined,箭头函数是当前实例
  • class可以有取值函数(getter)和存值函数(setter)
  • 类的属性名可以动态设置

  • 静态方法/属性,通过在属性和方法前添加static关键字,静态方法和属性不会被实例继承

  • 静态方法里面的this指向的是类而不是实例,所以静态方法里面this === A

  • class定义实例的属性 直接" 属性名=属性值"

1. class的数据类型是一个函数

  console.log(typeof class A {})

2. class的原型的constructor指向class(类比:构造函数的原型的constructor指向构造函数)

    class A {}console.log(A.prototype.constructor === A)

3. 通过 new 关键字创建出的实例的constructor指向该class(类比:new构造函数创建的实例的constructor指向构造函数本身)

    class A {}var a = new A()console.log(a.constructor === A)

4. class内部的方法实际上都是定义在类实例的prototype上;属性定义在实例上;constructor中的方法和实例都定义在原型上

    class A {fn () {}toString() {}}var a = new A()console.log(a);

 

5. 通过类创建对象的本质是调用类的constructor,如果类未定义constructor,则会在使用时默认添加。

    class A {constructor () {this.name = 'a';this.fn = function() {};}fn1() {}}console.log(new A())

6. class不能直接调用,需要通过new关键字(构造函数可以直接调用,也可以new 创建实例)

7. class内部方法this指向的是实例,class内部是严格模式(严格模式下不存在变量提升)

注意方法如果单独使用会报错,class内部是严格模式,所以 this 实际指向的是undefined

普通函数通过实例调用可调用:但是直接结构后调用,普通函数没有找到是谁调用就会报错 。将普通函数改为箭头函数后,箭头函数定义位置在class中,所以this表示当前类的实例的原型

    class Logger {printName(name = 'world') {console.log(this, 'this')this.print(`Hello ${name}`)}print(text) {console.log(text)}}// let logger = new Logger();// // 通过实例调用可以调用// logger.printName()let {printName} = new Logger();printName(); //没有找到谁调用会报错
    class Logger {printName = (name = 'world') => {// 类中方法的this指向当前class的实例console.log(this, 'this')this.print(`Hello ${name}`)}print = (text) => {console.log(text)}}let { printName } = new Logger();printName(); //没有找到谁调用会报错

分析:

  • 1.this 实际指向的是undefined,如果想要可以正常调用,可以使用箭头函数(箭头函数的this是由定义位置决定,所以就能获取到this为当前实例)

注意:本身class上面定义的普通函数,是在实例的原型上,但是如果使用的是箭头函数,则当前属性和函数就在类的实例上面了

为什么还能箭头函数中printName还能打印出this?因为箭头函数定义本身没有this,所以它的this的位置指向的是当前实例

  • 2.this 实际指向的是undefined,在constructor中对printName进行bind改写this

8.class中箭头函数的this和普通函数的指向不同:class上面定义的普通函数是在实例的原型上箭头函数this指向定义位置所在的作用域即实例本身,通过解构出来的方法直接调用普通函数的this是undefined,箭头函数是当前实例

    class Logger {printName(name = 'world') {console.log(this, 'this')this.print(`Hello ${name}`)}print(text) {console.log(text)}}console.log(new Logger());

    class Logger {printName = (name = 'world') => {// 类中方法的this指向当前class的实例console.log(this, 'this')this.print(`Hello ${name}`)}print = (text) => {console.log(text)}}console.log(new Logger());

 

3.构造函数与class的区别?结合上面的几个特性回答

  • class只能通过new关键字调用
  • class内部是严格模式(直接解构出方法执行this会返回undefined)
  • class里面定义的方法和属性都在实例的原型上,constructor里面定义的属性和方法才在实例上;构造函数方法定义在实例的原型上,属性定义在实例上
  • class可以通过static关键字来定义静态方法

4.class的取值函数(getter)和存值函数(setter)

设置后就可以通过实例设置和获取值时触发这两个方法

    class A {get name() {return '1'}set name(value) {console.log('setter:' + value)}}var a = new A()console.log(a.name);a.name = "lmf"

5.类的属性名可以动态设置

    let methodName = 'test'class A {[methodName] () {console.log("test-----");}}var a = new A()a.test()

6.静态方法/属性

通过在属性和方法前添加static关键字,静态方法和属性不会被实例继承;静态方法和普通方法可以重名

    class A {static fn () {//静态方法的this指的是类,所以这里this.getValue() === A.getValue()this.getValue()console.log(this === A);//true}static getValue () {console.log('张三')}getValue() {console.log('李四')}}var a = new A()A.getValue()a.getValue()A.fn();//静态方法的this指的是类,所以这里this.getValue() === A.getValue()

7.静态方法里面的this指向的是类而不是实例

8.定义实例的属性

class A {a = 1b = 'SUCCESS'
}

9. 类的继承

  • 类的继承通过extends关键字
  • 子类中的constructor不写时会隐式生成一个constructor函数,如果显示写了constructor则必须调用super,否则就会报错。
  • 子类调用super会触发父类的constructor并将参数传递过去
  • 在super调用前子类是没有this,如果使用会报错
  • 类在继承时属性会被直接添加到实例中,方法则保留在类的原型上(跟类本身属性和方法的位置一样,类本身方法在原型上,属性在实例上,constructor中的方法和属性在实例上)
    class F {constructor (sMoney) {this.money = 100 + sMoney}fn () {}}
//通过extends实现继承class S extends F{
//子类中显示调用constructor时必须同时调用super()方法constructor (money) {// 在super调用前子类是没有this,如果使用会报错//子类调用super(money)会触发父类的constructor并将参数传过去super(money)}}console.log(new S(10))// 类在继承时属性会被直接添加到实例中,方法则保留在类的原型上console.log(S.prototype.__proto__ === F.prototype); //true

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

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

相关文章

YOLOv8改进实战 | 更换主干网络Backbone之2023最新模型LSKNet,旋转目标检测SOTA

前言 传统的YOLOv8系列中,Backbone采用的是较为复杂的C2f网络结构,这使得模型计算量大幅度的增加,检测速度较慢,应用受限,在某些真实的应用场景如移动或者嵌入式设备,如此大而复杂的模型时难以被应用的。为了解决这个问题,本章节通过采用LSKNet轻量化主干网络作为Backb…

原型设计工具:Balsamiq Wireframes 4.7.4 Crack

原型设计工具:Balsamiq Wireframes是一种快速的低保真UI 线框图工具,可重现在记事本或白板上绘制草图但使用计算机的体验。 它确实迫使您专注于结构和内容,避免在此过程后期对颜色和细节进行冗长的讨论。 线框速度很快:您将产生更多想法&am…

springBoot--web--函数式web

函数式web 前言场景给容器中放一个Bean&#xff1a;类型是 RouterFunction<ServerResponse>每个业务准备一个自己的handler使用集合的时候加注解请求的效果 前言 springmvc5.2 以后允许我们使用函数式的方式&#xff0c;定义web的请求处理流程 函数式接口 web请求处理的…

数字图像处理实验记录四(图像的空间域增强-平滑处理)

前言&#xff1a;要是是实验报告赶工的话&#xff0c;建议总结上网抄&#xff0c;或者重构我的总结&#xff0c;仅供学习参考&#xff0c;不要照抄 文章目录 一、基础知识1&#xff0c;噪声2&#xff0c;椒盐噪声3&#xff0c;高斯噪声4&#xff0c;滤波器5&#xff0c;均值滤…

点云cloudpoint生成octomap的OcTree的两种方法以及rviz可视化

第一种&#xff1a;在自己的项目中将点云通过ros的topic发布&#xff0c;用octomap_server订阅点云消息&#xff0c;在octomap_server中生成ocTree 再用rviz进行可视化。 创建工作空间&#xff0c;记得source mkdir temp_ocotmap_test/src cd temp_ocotmap_test catkin_make…

elementUI 中 date-picker 的使用的坑(vue3)

目录 1. 英文显示2. format 与 value-format 无效3. date-picker 时间范围4. 小结 1. 英文显示 <el-date-pickerv-model"dateValue"type"date"placeholder"选择日期"></el-date-picker>解决方案&#xff1a; 引用 zhCn <script&g…

vue3如何实现页面跳转?

首先、给元素绑点击事件 其次 写跳转路由 总结&#xff1a;一定不要忘了引入Router

RabbitMQ官方案例学习记录

官方文档&#xff1a;RabbitMQ教程 — RabbitMQ (rabbitmq.com) 一、安装RabbitMQ服务 直接使用docker在服务器上安装 docker run -it -d --name rabbitmq -p 5672:5672 -p 15672:15672 rabbitmq:3.12-management 安装完成后&#xff0c;访问15672端口&#xff0c;默认用户…

Python高频面试题——如何在字符串中删除指定字符,掌握strip()、replace()和re.sub ()正确使用方法!

关于python删除字符串是面试python测试开发工程师的一个经典问题。问题很简单&#xff0c;但是一下子就能测试出来被面试者是否能够熟练的进行python相关编码工作&#xff01; 对于有些临时抱佛脚的同学来讲&#xff0c;一看删除&#xff0c;很自然就说用remove 、del相关方法…

如何在电脑上设置新的蓝牙耳机

本文介绍如何将蓝牙耳机连接到Windows或Mac电脑。 如何在Windows上设置新的蓝牙耳机 蓝牙耳机的设置过程因平台而异&#xff0c;但以下是Windows 11的步骤&#xff1a; 1、选择“开始”&#xff0c;然后在搜索框中输入蓝牙&#xff0c;以显示蓝牙和其他设备。 2、选择添加设…

RabbitMQ中的核心概念和交换机类型

目录 一、RabbitMQ相关概念二、Exchange类型三、RabbitMQ概念模型总结 一、RabbitMQ相关概念 Producer&#xff1a;生产者&#xff0c;就是投递消息的一方。生产者创建消息&#xff0c;然后发布到RabbitMQ中。消息一般可以包含两个部分&#xff1a;消息体和附加消息。 消息体…

Unity之ShaderGraph如何实现UV抖动

前言 今天我们通过噪波图来实现一个UV抖动的效果。 如下图所示&#xff1a; 关键节点 Time&#xff1a;提供对着色器中各种时间参数的访问 UV&#xff1a;提供对网格顶点或片段的UV坐标的访问。可以使用通道下拉参数选择输出值的坐标通道。 SimpleNoise&#xff1a;根据…

Ubuntu20.4 设置代理

主要是涉及2个代理 涉及apt 可以在、/etc/apt/apt.conf 中进行修改 在系统全局可以在/etc/profile中进行修改

2023Jenkins连接k8s

首先配置k8s config文件 1.方式获取k8s密钥 cat .kube/config 2.导出方式或者密钥 kubectl config view --raw > k8s-config-admin pipeline {agent {kubernetes {yaml apiVersion: v1kind: Podmetadata:labels:some-label: devopsspec:containers:- name: dockerimage: d…

Python —— UI自动化之Page Object模式

1、Page Object模式简介 1、二层模型 Page Object Model&#xff08;页面对象模型&#xff09;, 或者也可称之为POM。在UI自动化测试广泛使用的一种分层设计 模式。核心是通过页面层封装所有的页面元素及操作&#xff0c;测试用例层通过调用页面层操作组装业务逻辑。 1、实战 …

弹出框,使用树结构查询数据

效果如下: 描述:希望点击某个按钮,弹出一个窗口,然后通过下拉框,点击下拉框里面的组织信息,然后查询对应组织的成员对象列表,并展示到表格中 HTML代码(最主要的就是树的那个): <el-dialog :visible.sync="TesteePage.showDialog" width="70%&quo…

codeforces (C++ Morning)

题目&#xff1a; 翻译&#xff1a; 思路&#xff1a; 1、要将四位数显示&#xff0c;每次操作可以选择移动光标&#xff08;移动到相邻的位置&#xff09;或者显示数字&#xff0c;计算最少需要多少次操作。 2、用flag表示当前光标位置&#xff0c;sum为记录操作次数&#…

vue 插槽 作用域插槽

vue 插槽 作用域插槽 **创建 工程&#xff1a; H:\java_work\java_springboot\vue_study ctrl按住不放 右键 悬着 powershell H:\java_work\java_springboot\js_study\Vue2_3入门到实战-配套资料\01-随堂代码素材\day05\准备代码\10-插槽-作用域插槽 vue --version vue crea…

一款简单漂亮的WPF UI - AduSkin

前言 经常会有同学会问&#xff0c;有没有好看简单的WPF UI库推荐的。今天就给大家推荐一款简单漂亮的WPF UI&#xff0c;融合多个开源框架组件&#xff1a;AduSkin。 WPF是什么&#xff1f; WPF 是一个强大的桌面应用程序框架&#xff0c;用于构建具有丰富用户界面的 Windo…

【JAVA-Day49】Java LinkedList集合详解

Java LinkedList集合详解 摘要引言Java LinkedList集合详解一、什么是LinkedList集合1.1 链表数据结构1.2 双向链表1.3 动态大小1.4 插入和删除元素1.5 适用场景 二、LinkedList集合的使用2.1 创建 LinkedList 集合、添加元素、遍历元素2.2 在指定位置插入元素2.3 获取指定位置…