es6之class类(未完成)

news2024/11/19 3:50:04

es6之class类

  • 一、什么是类
  • 二、类的基本用法
    • 1.定义类
    • 2.constructor() 方法
    • 3.静态方法(属性)
    • 4.私有方法(属性)
  • 三、继承

一、什么是类

类是用于创建对象的模板,类只是让对象原型的写法更加清晰、更像面向对象编程的语法。

class Person {
    // 构造函数
    constructor(name, age) {
        this.name = name
        this.age = age
    }

    // 方法
    say(){
        console.log('我能说话')
    }
}
// 实例化
let zs = new Person('张三', 24)
// 实例化
let ls = new Person('李四', 24)
console.log(zs)
console.log(ls)

在这里插入图片描述

二、类的基本用法

1.定义类

类是“特殊的函数”,就像定义的函数表达式和函数声明一样,类语法有两个组成部分:类表达式和类声明。

// 类声明
class Point {
    constructor() {
    }
}

// 类表达式
let Point = {
    constructor(){

    }
}

函数声明和类声明之间的一个重要区别,函数声明会提升,类声明不会。需要先声明类,然后再访问它。

// 构造函数会变量提升
let son = new Person('zs', 24)
// Person {name: 'zs', age: 24}

// 类不会变量提升,导致引用异常
let classSon = new ClassPerson('classZs', 48)
// Uncaught ReferenceError: Cannot access 'ClassPerson' before initialization

// 构造函数
function Person(name, age) {
    this.name = name
    this.age = age
}

// 类
class ClassPerson {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}

2.constructor() 方法

一个类必须有constructor()方法,如果没有显式定义,一个空的constructor()方法会被默认添加。

class Point {
}

// 等同于
class Point {
  constructor() {}
}

constructor()方法什么时候被执行呢?在实例化的时候会自动调用该方法。constructor()方法默认返回实例对象(this)

class Point {
    constructor() {
        // 通过new命令生成对象实例时,会执行constructor方法
        console.log('我执行了')
        // 返回的this是实例对象
        console.log(this)
    }
}

let p =  new Point()

类的实例化一定要使用new,否则会报错。这也是跟构造函数的一个主要区别。

// 构造函数
function Point1() {

}
// 可以不使用new,当成普通函数执行
let p1 = Point1()

// 类
class Point {
    constructor() {
        console.log('我执行了')
        console.log(this)
    }
}
// 类不使用new会报错
// Uncaught TypeError: Class constructor Point cannot be invoked without 'new'
let p = Point()

3.静态方法(属性)

类相当于实例的原型,所有在类中定义的方法(属性),都会被实例继承。如果在一个方法(属性)前,加上static关键字,就表示该方法(属性)不会被实例继承,而是直接通过类来调用。

class Person {
    static personAge = 28
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    static getAge(age) {
        return this.personAge + age
    }
}
let zs = new Person('zs', 28)

// 静态属性只能通过类来访问
console.log(Person.personAge) // 28

// 静态属性实例不能使用
console.log(zs.personAge) // undefined

// 静态方法只能通过类来访问
Person.getAge(28)

// 静态方法实例不能使用
// zs.getAge();
// Uncaught TypeError: zs.getAge is not a function

// 执行会报错,因为this在严格模式下是underfined
// 这个方法提取出来单独使用,this会指向该方法运行时所在的环境(由于 class 内部是严格模式,所以 this 实际指向的是undefined),从而导致找不到getAge方法而报错。
let getAge = Person.getAge
getAge(18)
// Uncaught TypeError: Cannot read properties of undefined (reading 'personAge')

尽管静态方法(属性)不能被实例使用,但是父类的静态方法,可以被子类继承(继承那边会介绍)。

4.私有方法(属性)

私有方法(属性),是只能在类的内部访问的方法和属性,外部不能访问。这也是比较常见的需求,有利于代码的封装。 然而私有方法(属性)的定义之前一直不是很友好,在ES2022正式为class添加了私有属性,方法是在属性名之前使用#表示。

class Person {
    // 私有属性
    #name = '我能说话了'
    // 私有方法
    #say() {
        // 引用私有属性
        console.log(this.#name)
    }
    // 可能这样间接调用私有方法
    indirectSay() {
        console.log(this) //Person
        this.#say()
    }
}
let p = new Person()
// p.#name
// 报错 Uncaught SyntaxError: Private field '#name' must be declared in an enclosing class
// p.#say()
// 报错 Uncaught SyntaxError: Private field '#say' must be declared in an enclosing class
// 间接调用
p.indirectSay()
// 我能说话了

当然,如果在私有方法(属性)前面加上static关键字,表示这是一个静态的私有方法(属性)。

三、继承

类可以通过extends关键字实现继承,让子类继承父类的属性和方法。

ES6 规定,子类必须在constructor()方法中调用super(),否则就会报错。这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,添加子类自己的实例属性和方法。如果不调用super()方法,子类就得不到自己的this对象。

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

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

相关文章

matlab 多目标粒子群优化算法MOPSO

1、内容简介 略 21-可以交流、咨询、答疑 多目标、粒子群 2、内容说明 多目标粒子群优化算法MOPSO 3、仿真分析 略 %% Problem Definition TestProblem3; % Set to 1, 2, or 3 switch TestProblem case 1 CostFunction(x) MyCost1(x); nVar5; …

REST-Assured--JAVA REST服务自动化测试的Swiss Army Knife

什么是REST-Assured REST Assured是一套基于 Java 语言实现的开源 REST API 测试框架 Testing and validation of REST services in Java is harder than in dynamic languages such as Ruby and Groovy. REST Assured brings the simplicity of using these languages into t…

TCP简介及特性

1. TCP协议简介 TCP是Transmission Control Protocol的简称,中文名是传输控制协议。它是一种面向连接的、可靠的、基于IP的传输层协议。两个TCP应用之间在传输数据的之前必须建立一个TCP连接,TCP采用数据流的形式在网络中传输数据。TCP为了保证报文传输的…

网站更换IP的四大注意事项

1.对网站当中的数据进行备份 网站更换IP时可以将页面的数据库文件和站点文件通过下载工具在本地完成备份。 2.更换解析域名 从站点域名管理后台当中更换域名地址,改为新的IP地址。 3.确保IP安全 在用户更换IP前一定要确定IP是否安全,一旦IP存在不良…

如何选择适合长期投资的股票板块?

大家在学习炒股的过程中肯定没少听“板块”这个词,新手可能一脸懵逼,板块到底是啥意思?为什么会有这么多板块? 一、什么是股票板块?常见的板块分类有哪些? 板块理解起来其实很简单,它就是一种分…

java开发实战 基于Resuful风格开发接口, IocDi和nginx,以及三层架构思想,分层解耦,并使用Apifox对接口数据进行测试。

开发规范: 前后端分离: 根据需求文档开发 Resultful风格: REST(REpresentational State Transfer),表述性状态转换,它是一种软件架构风格。 POST(insert) 负责新增的操作 http://localhost:8080…

TZOJ 1386 十转换转R进制

答案&#xff1a; #include<stdio.h> char fun(int n) {if (n > 0 && n < 10) //如果是小于10进制的return n 48; //ASCII值48else if (n > 10 && n < 16) //如果是大于10进制小于16进制的return n 55; //ASCII值55elseretur…

JIRA 基本使用

该页面可以&#xff1a; 查看个人基本信息以及归属的邮件组修改常用参数配置查看指给自己的 Open 问题查看自己最近的活动记录等 权限管理 Project 权限管理 JIRA 项目有三种通用权限方案&#xff1a; 公开权限方案&#xff08;默认禁止使用此方案&#xff09;&#xff1a…

Google Chrome 下载 (离线版)

1 访问网址 Google Chrome 网络浏览器 2 点击 下载Chrome 3 直接运行 ChromeStandaloneSetup64.exe 其他&#xff1a; ####################### 谷歌浏览器 (Google Chrome) 最新版离线安装包下载 https://www.iplaysoft.com/tools/chrome/#google_vignette Google Chrome …

【二叉树】常见题目解析(2)

题目1&#xff1a;104. 二叉树的最大深度 - 力扣&#xff08;LeetCode&#xff09; 题目1描述&#xff1a; 题目1分析及解决&#xff1a; &#xff08;1&#xff09;base case&#xff1a;当前节点为null时&#xff0c;以当前节点为根节点的树最大深度是0。 &#xff08;2&…

深入理解前端路由:构建现代 Web 应用的基石(上)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

skywalking 9.0.0开启自监控和配置集群

一、skywalking介绍 SkyWalking是有国内开源爱好者吴晟开源并提交到Apache孵化器的开源项目&#xff0c;2017年12月SkyWalking成为Apache国内首个个人孵化项目&#xff0c;2019年4月17日SkyWalking从Apache基金会的孵化器毕业成为顶级项目&#xff0c;目前SkyWalking支持Java、…

如何快速看懂市场行情?

一、看大盘指数 咱们平时所说的大盘其实指的就是上证指数&#xff0c;它是整个市场的晴雨表。大盘涨了&#xff0c;个股跟着上涨的概率就大&#xff0c;大盘跌了&#xff0c;个股被拖累下跌的概率也大。所以&#xff0c;要想在股市中尝到甜头&#xff0c;大盘分析是少不了滴&am…

git的基本命令操作超详细解析教程

Git基础教学 1、初始化配置2、初始化仓库3、工作区域和文件状态4、添加和提交文件5、git reset 回退版本6、git diff查看差异7、删除文件git rm8、.gitignore9、本地文件提交到远程仓库10、分支基础 Git&#xff1a;一个开源的分布式版本控制系统&#xff0c;它可以在本地和远程…

网络安全应急响应-Server2228(环境+解析)

网络安全应急响应 任务环境说明: 服务器场景:Server2228(开放链接)用户名:root,密码:p@ssw0rd123

2023第十二届“认证杯”数学中国数学建模国际赛赛题A完整解析

A题完整题解 写在前面假设数据预处理 问题一1 基于自适应ARIMA-BP神经网络模型的影响因素预测1.1 ARIMA模型的建立1.2 BP神经网络模型的建立1.3 基于GABP神经网络的预测模型构建1.4 自适应混合ARIMA-BP神经网络模型的建立1.5 模型求解 代码Q1_1.mQ1_2.m 完整代码与论文获取 写在…

Android 应用程序无响应定位ANR原因

废话不多说&#xff0c;直接上方案&#xff1a; 第一步&#xff1a; 执行adb命令 adb bugreport /Users/mac/Desktop/anr 解压后FS/data/anr下就会有相关anr文件 /Users/mac/Desktop/anr 是电脑存储文件的路径&#xff0c;可以随便定义&#xff0c;这个没有影响。我的电脑是…

RHCSA学习笔记(RHEL8) - Part2.RH134

Chapter Ⅰ 提高命令行生产率 SHELL脚本 #/bin/bash声明使用的shell翻译器 for循环 for VAR in LIST doCOMMAND1COMMAND2 done实验1&#xff1a;显示host1-5 #! /bin/bash for host in host{1..5} doecho $host done实验2&#xff1a;显示包含kernel的软件包安装时间 #! /…

【微服务 SpringCloudAlibaba】实用篇 · Gateway服务网关

微服务&#xff08;8&#xff09; 文章目录 微服务&#xff08;8&#xff09;1. 为什么需要网关2. gateway快速入门1&#xff09;创建gateway服务&#xff0c;引入依赖2&#xff09;编写启动类3&#xff09;编写基础配置和路由规则4&#xff09;重启测试5&#xff09;网关路由的…

linux 内核工作队列技术原理

首先介绍一下工作队列使用的术语。 work&#xff1a;工作&#xff0c;也称为工作项。work queue&#xff1a;工作队列&#xff0c;就是工作的集合&#xff0c; work queue 和 work 是一对多的关系。worker&#xff1a; 工人&#xff0c; 一个工人对应一个内核线程&#xff0c;…