JavaScript高级三、深入面向对象

news2024/11/28 15:51:59

零、文章目录

JavaScript高级三、深入面向对象

1、编程思想

（1）面向过程介绍

  • 面向过程：分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。

（2）面向对象介绍

  • 面向对象：把事务分解成为一个个对象，然后由对象之间分工与合作。
  • **优点：**面向对象编程具有灵活、代码可复用、容易维护和开发，更适合多人合作的大型软件项目。
  • 面向对象的特性：
    • 封装性
    • 继承性
    • 多态性

（3）面向过程VS面向对象

  • 面向过程编程
    • **优点：**性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。
    • **缺点：**没有面向对象易维护、易复用、易扩展
  • 面向对象编程
    • **优点：**易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统 更加灵活、更加易于维护
    • **缺点：**性能比面向过程低

2、构造函数

（1）构造函数实现面向对象

  • 封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现封装。
  • 同样的将变量和函数组合到了一起并能通过 this 实现数据的共享，所不同的是借助构造函数创建出来的实例对象之间彼此不影响

（2）构造函数存在的问题

  • 对象中的函数都是引用的不同的堆地址，浪费内存

image-20230504165004793

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>构造函数实现面向对象</title>
</head>

<body>
    <script>
        // 构造函数实现面向对象
        // 公共的属性和方法封装到构造函数里面
        function Star(uname, age) {
            this.uname = uname
            this.age = age
            this.sing = function() {
                console.log('唱歌')
            }
        }
        const ldh = new Star('刘德华', 55)
        const zxy = new Star('张学友', 58)
        console.log(ldh.sing === zxy.sing) //false 说明两个函数地址不同，浪费内存空间

        //公共的方法写到原型对象身上
        Star.prototype.sing2 = function() {
            console.log('唱歌')
        }
        console.log(ldh.sing2 === zxy.sing2) //true 说明两个函数地址相同，节省内存空间
    </script>
</body>

</html>

3、原型对象

（1）原型对象

  • **原型对象：**JavaScript 规定，每一个构造函数都有一个prototype 属性，这个prototype 属性是一个对象，这个对象称为原型对象。

  • 原型对象作用：

    • 原型对象可以挂载函数，对象实例共享原型上函数，可以直接用实例对象调用挂载的函数，函数对象引用相同的堆地址，节约内存。
    • 可以把那些不变的方法，挂载在 prototype 对象上。

  • 原型对象this指向：构造函数和原型对象中的this都指向实例化的对象。

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原型对象及this指向</title>
</head>

<body>
    <script>
        {
            // 构造函数实现面向对象
            function Star(uname, age) {
                this.uname = uname
                this.age = age
            }

            //公共的方法写到原型对象身上
            Star.prototype.sing = function() {
                console.log('唱歌')
            }
            const ldh = new Star('刘德华', 55)
            const zxy = new Star('张学友', 58)
            console.log(ldh.sing === zxy.sing) //true 说明两个函数地址相同，节省内存空间
        }

        {
            //原型对象this指向
            let that

            function Star2(uname) {
                this.uname = uname
            }
            Star2.prototype.sing = function() {
                    that = this
                    console.log('唱歌')
                }
                //实例对象zjl
            const zjl = new Star2('周杰伦')
            zjl.sing()
            console.log(that === zjl) //true 原型对象里面的函数this指向的还是实例对象zjl

            console.log(zjl) //打印对象
        }
    </script>
</body>

</html>

image-20230529214911363

数组扩展

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组扩展</title>
</head>

<body>
    <script>
        // 自己定义数组扩展方法
        // 1. 我们定义的这个方法，任何一个数组实例对象都可以使用
        // 2. 自定义的方法写到  数组.prototype 身上

        // 1.最小值
        Array.prototype.max = function() {
            // 展开运算符
            return Math.max(...this)
                // 原型函数里面的this 指向谁？ 实例对象 arr
        }

        // 2.最小值
        Array.prototype.min = function() {
            // 展开运算符
            return Math.min(...this)
                // 原型函数里面的this 指向谁？ 实例对象 arr
        }

        // 3. 求和 
        Array.prototype.sum = function() {
            return this.reduce((prev, item) => prev + item, 0)
        }

        const arr = [1, 2, 3]
        console.log(arr.max()) //3
        console.log(arr.min()) //1
        console.log(arr.sum()) //6
    </script>
</body>

</html>

（2）constructor 属性

  • **位置：**每个原型对象里面都有个constructor 属性
  • **作用：**该属性指向该原型对象的构造函数

image-20230504171347049

  • 使用场景：
    • 如果同时要添加多个方法，我们可以给原型对象采取对象形式赋值
    • 但是这样原型对象原来的内容就会被覆盖，这样原型对象.constructor!=构造函数
    • 所以赋值的时候，还需要指定原型对象.constructor=构造函数

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>constructor属性</title>
</head>

<body>
    <script>
        // constructor 构造函数
        function Star(name) {
            this.name = name
        }
        //对象形式赋值
        Star.prototype = {
            sing: function() {
                console.log('唱歌')
            },
            dance: function() {
                console.log('跳舞')
            },
        }
        console.log(Star.prototype.constructor) //指向Object

        //对象形式赋值
        Star.prototype = {
            // 重新指回创造这个原型对象的构造函数
            constructor: Star,
            sing: function() {
                console.log('唱歌')
            },
            dance: function() {
                console.log('跳舞')
            },
        }
        console.log(Star.prototype.constructor) //指向Star
    </script>
</body>

</html>

（3）对象原型

  • __proto__ 是JS非标准属性
  • 对象.__proto__ ===构造函数.prototype原型对象。
  • 对象__proto__.constructor===构造函数.prototype原型对象.constructor===构造函数

image-20230529213619837

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象原型</title>
</head>

<body>
    <script>
        function Star() {

        }
        const ldh = new Star()

        // 对象.__proto__===构造函数.prototype原型对象
        console.log(ldh.__proto__ === Star.prototype) //true

        // 对象__proto__.constructor===构造函数.prototype原型对象.constructor===构造函数
        console.log(ldh.__proto__.constructor === Star) //true
    </script>
</body>

</html>

（4）原型继承

  • 继承是面向对象编程的另一个特征，通过继承进一步提升代码封装的程度，JavaScript 中大多是借助原型对象实现继承的特性。
  • 继承实现
    • **封装父类：**抽取公共部分到父类
    • **创建子类：**子类的原型指向父类对象，然后子类的原型的构造函数指回自己的构造函数
    • **子类特有方法属性：**添加子类特有方法属性
    • **子类使用：**既能调用父类的方法属性，也能使用自己特有的方法属性

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原型继承</title>
</head>

<body>
    <script>
        // 构造函数  父类Person
        function Person() {
            this.eyes = 2
            this.head = 1
        }

        // 构造函数  子类Woman
        function Woman() {

        }
        // 通过原型来继承 父类Person
        Woman.prototype = new Person() // new 出来每次都是新对象
            // 指回原来的构造函数
        Woman.prototype.constructor = Woman
            // 给女人添加一个方法  生孩子
        Woman.prototype.baby = function() {
            console.log('宝贝')
        }

        // 构造函数  子类Man
        function Man() {

        }
        // 通过原型来继承 父类Person
        Man.prototype = new Person()
            // 指回原来的构造函数
        Man.prototype.constructor = Man

        //构建Woman和Man的实例
        const red = new Woman()
        console.log(red)
        const pink = new Man()
        console.log(pink)
    </script>
</body>

</html>

image-20230530103054441

（5）原型链

  • 基于原型对象的继承使得不同构造函数的原型对象关联在一起，并且这种关联的关系是一种链状的结构，我们将原型对象的链状结构关系称为原型链

image-20230530103346848

  • 原型链-查找规则
    1. 当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性
    2. 如果没有就查找它的原型（也就是 __proto__指向的 prototype 原型对象）
    3. 如果还没有就查找原型对象的原型（Object的原型对象）
    4. 依此类推一直找到 Object 为止（null）
    5. __proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线
    6. 可以使用 instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原型链</title>
</head>

<body>
    <script>
        function Person() {

        }
        const ldh = new Person()

        console.log(ldh instanceof Person) //true
        console.log(ldh instanceof Object) //true
        console.log(ldh instanceof Array) //false
        console.log([1, 2, 3] instanceof Array) //true
        console.log(Array instanceof Object) //true
    </script>
</body>

</html>

4、综合案例

  • 需求：实现一个面向对象的模态框
  • 分析需求：
    • 定义模态框 Modal 构造函数，用来创建对象
    • 模态框具备 打开功能 open 方法 （按钮点击可以打开模态框）
    • 模态框 具备关闭功能 close 方法

image-20230530110011226

  • 实现细节

    • Modal 构造函数 制作，需要的公共属性： 标题（title）、提示信息内容（message） 可以设置默认参数

      • 创建div标签可以命名为：modalBox
      • div标签的类名为 modal
      • 标签内部添加 基本结构，并填入相关数据

    • open方法

      • 写到构造函数的原型对象身上

      • 把刚才创建的modalBox 添加到 页面 body 标签中

      • open 打开的本质就是 把创建标签添加到页面中

      • 点击按钮， 实例化对象，传入对应的参数，并执行 open 方法

    • close方法

      • 写到构造函数的原型对象身上

      • 把刚才创建的modalBox 从页面 body 标签中 删除

      • 需要注意，x 删除按钮绑定事件，要写到open里面添加

      • 因为open是往页面中添加元素，同时顺便绑定事件

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>面向对象封装消息提示</title>
    <style>
        .modal {
            width: 300px;
            min-height: 100px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            border-radius: 4px;
            position: fixed;
            z-index: 999;
            left: 50%;
            top: 50%;
            transform: translate3d(-50%, -50%, 0);
            background-color: #fff;
        }
        
        .modal .header {
            line-height: 40px;
            padding: 0 10px;
            position: relative;
            font-size: 20px;
        }
        
        .modal .header i {
            font-style: normal;
            color: #999;
            position: absolute;
            right: 15px;
            top: -2px;
            cursor: pointer;
        }
        
        .modal .body {
            text-align: center;
            padding: 10px;
        }
        
        .modal .footer {
            display: flex;
            justify-content: flex-end;
            padding: 10px;
        }
        
        .modal .footer a {
            padding: 3px 8px;
            background: #ccc;
            text-decoration: none;
            color: #fff;
            border-radius: 2px;
            margin-right: 10px;
            font-size: 14px;
        }
        
        .modal .footer a.submit {
            background-color: #369;
        }
    </style>
</head>

<body>
    <button id="delete">删除</button>
    <button id="login">登录</button>

    <!-- <div class="modal">
    <div class="header">温馨提示 <i>x</i></div>
    <div class="body">您没有删除权限操作</div>
  </div> -->


    <script>
        // 1.  模态框的构造函数
        function Modal(title = '', message = '') {
            // 公共的属性部分
            this.title = title
            this.message = message
                // 因为盒子是公共的
                // 1. 创建 一定不要忘了加 this 
            this.modalBox = document.createElement('div')
                // 2. 添加类名
            this.modalBox.className = 'modal'
                // 3. 填充内容 更换数据
            this.modalBox.innerHTML = `
        <div class="header">${this.title} <i>x</i></div>
        <div class="body">${this.message}</div>
      `
        }
        // 2. 打开方法 挂载 到 模态框的构造函数原型身上
        Modal.prototype.open = function() {
            if (!document.querySelector('.modal')) {
                // 把刚才创建的盒子 modalBox  渲染到 页面中  父元素.appendChild(子元素)
                document.body.appendChild(this.modalBox)
                    // 获取 x  调用关闭方法
                this.modalBox.querySelector('i').addEventListener('click', () => {
                    // 箭头函数没有this 上一级作用域的this
                    // 这个this 指向 m 
                    this.close()
                })
            }
        }

        // 3. 关闭方法 挂载 到 模态框的构造函数原型身上
        Modal.prototype.close = function() {
            document.body.removeChild(this.modalBox)
        }

        // 4. 按钮点击
        document.querySelector('#delete').addEventListener('click', () => {
            const m = new Modal('温馨提示', '您没有权限删除')
                // 调用 打开方法
            m.open()
        })

        // 5. 按钮点击
        document.querySelector('#login').addEventListener('click', () => {
            const m = new Modal('友情提示', '您还么有注册账号')
                // 调用 打开方法
            m.open()
        })
    </script>
</body>

</html>

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

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

相关文章

Android 架构模式

Android 架构模式

1.三个基本架构 ①MVC&#xff08;Model-View-Controller&#xff09; Model&#xff1a;代表数据模型&#xff0c;管理数据状态。 View&#xff1a;视图&#xff0c;即呈现给用户的UI&#xff0c;包括布局文件及Activity。 Controller&#xff1a;控制者&#xff0c;负责处…
阅读更多...
KubeVirt技术介绍及实验部署

KubeVirt技术介绍及实验部署

虚拟化简介 在云计算发展中&#xff0c;有两类虚拟化平台&#xff1a; openstack&#xff08;iaas&#xff09;&#xff1a;关注于资源的利用&#xff0c;虚拟机的计算&#xff0c;网络和存储Kubernetes&#xff08;pass&#xff09;&#xff1a;关注容器的编排调度&#xff…
阅读更多...
设计模式之~代码模式

设计模式之~代码模式

描述&#xff1a; 代理模式&#xff08;Proxy&#xff09;&#xff0c;为其他对象提供一种代理以控制对这个对象的访问。 结构图&#xff1a; 优点: 代理模式能将代理对象与真实被调用的目标对象分离 一定程度上降低了系统的耦合度&#xff0c;扩展性好 可以起到保护目标对象…
阅读更多...
发明专利公开 -- 一种基于 JSON 文件 + Http Header 的支持多项目、多分支、多人协同的 Api Mock/代理 工具

发明专利公开 -- 一种基于 JSON 文件 + Http Header 的支持多项目、多分支、多人协同的 Api Mock/代理 工具

现阶段主流的前后端分离的开发模式下&#xff1a;前后端采用并行开发方式&#xff0c;在前端开发过程中通常需要依附于共同约定的接口格式及数据。 该过程是一个并行过程&#xff0c;因此 Api Mock 模拟接口的返回变成了必要。同时&#xff0c;联调过程中&#xff0c;修改后端…
阅读更多...
目标检测笔记(九)：详细介绍并实现-如何可视化深度学习中每层特征层的网络训练情况

目标检测笔记(九)：详细介绍并实现-如何可视化深度学习中每层特征层的网络训练情况

文章目录 为什么要解析特征层如何可视化特征层可视化结果如何 ❤️ &#x1f9e1; &#x1f49b; &#x1f49a; &#x1f499; &#x1f49c; &#x1f5a4; &#x1f90d; &#x1f90e; &#x1f494; ❣️ &#x1f495; &#x1f49e; &#x1f493; &#x1f497; &#…
阅读更多...
随笔-学会和解

随笔-学会和解

上周六&#xff0c;媳妇儿去加班&#xff0c;回到家已经是晚上8点多了。当天的雨淅沥沥地下了一天&#xff0c;气温很低。 看着她情绪不是很高&#xff0c;也没说啥&#xff0c;赶紧安排吃饭。 我&#xff1a;咋的啦&#xff0c;项目不顺利&#xff1f; 她&#xff1a;还行吧…
阅读更多...
【深度学习】【人脸检测模型】SCRFD模型的训练与部署实战

【深度学习】【人脸检测模型】SCRFD模型的训练与部署实战

文章目录 Linux安装环境pythoninsightface环境 训练数据集准备todo 训练 Linux安装环境 python 我的cuda版本11.6&#xff1a; $ nvcc --version nvcc: NVIDIA (R) Cuda compiler driver Copyright (c) 2005-2022 NVIDIA Corporation Built on Tue_Mar__8_18:18:20_PST_2022…
阅读更多...
gitlab占用内存太大了如何解决？

gitlab占用内存太大了如何解决？

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号雄雄的小课堂 现在是&#xff1a;2023年5月30日16:58:15 最近在家里自己搞了个服务器&#xff0c;因为这台机器都不用了&#xff0c;从朋友那拿过来&#xff0c;就当服务器用了&#xff0c;看了下&#xff0c;比云服…
阅读更多...
python基本操作2（速通版）

python基本操作2（速通版）

关于字符串的基本操作&#xff0c;以实例为主。 目录 一、字符串基本操作 1.基本字符串定义 2.字符串遍历 3字符串切片 二、字符串的常用方法 1.find函数 2.replace函数 3.count函数 4.分割和连接类的函数 5.字符串判断函数 6.去除字符串的 三、元组 1.元组的基本操…
阅读更多...
离散数学-集合论

离散数学-集合论

数学基础-离散数学-集合论 集合论是现代各科数学的基础&#xff0c;它起源于十六世纪末期的数集的研究。直到1876-1883年&#xff0c;康托尔发表了一系列有关集合论的文章&#xff0c;奠定了集合论的基础。1904-1908年&#xff0c;策墨罗(Zermelo)提出了集合论的公理系统&…
阅读更多...
计算机组成原理-总线-总线的概念、事务和定时

计算机组成原理-总线-总线的概念、事务和定时

目录 一、总线基本概念 总线特性 二、总线的分类 数据传输格式 2.2按总线的功能 2.2.1片内总线 2.2.2系统总线 2.2.3通信总线 2.3 按时序控制方式 三、系统总线的结构 3.1单总线结构 3.2双总线结构 3.3三总线结构 四、总线的性能指标 五、总线的4个阶段 六、总线的事…
阅读更多...
5年测试经验，从月薪9k变1w5，进阶自动化测试真就这么香？

5年测试经验，从月薪9k变1w5，进阶自动化测试真就这么香？

在这个吃技术的IT行业来说&#xff0c;我之前每天做的是最基础的工作&#xff0c;但是随着时间的消磨&#xff0c;我产生了对自我和岗位价值和意义的困惑。 一是感觉自己在浪费时间&#xff0c;另一个就是做了快2年的测试&#xff0c;感觉每天过得浑浑噩噩&#xff0c;薪资也从…
阅读更多...
Java --- 云尚办公之微信公众号整合

Java --- 云尚办公之微信公众号整合

目录 一、整合微信公众号 1.1、公众号菜单管理 1.2、微信授权登录 1.3、消息推送 一、整合微信公众号 1.1、公众号菜单管理 数据库表&#xff1a; CREATE TABLE wechat_menu (id BIGINT(20) NOT NULL AUTO_INCREMENT COMMENT 编号,parent_id BIGINT(20) DEFAULT NULL CO…
阅读更多...
day42|动态规划4-背包问题分割等和子集

day42|动态规划4-背包问题分割等和子集

0-1背包和完全背包搞清楚即可。 0-1背包问题-一维 背包有最大重量的限制&#xff0c;物品有重量有价值&#xff0c;那么在最大背包的限制下&#xff0c;能够得到的最大价值是多少&#xff1f; 暴力解法 每个物品都有放和不放两种状态&#xff0c;那么遍历所有的组合就可以…
阅读更多...
谷歌浏览器 | Chrome DevTools系统学习篇- Elements面板（上）

谷歌浏览器 | Chrome DevTools系统学习篇- Elements面板（上）

大家好&#xff0c;文接上上回谷歌浏览器 | Chrome DevTools系统学习篇-概述&#xff0c;和上文谷歌浏览器 | Chrome DevTools系统学习篇-Device Mode。所谓“工欲善其事&#xff0c;必先利其器”&#xff0c;我们进一步来熟悉谷歌开发者工具。今天分享的是Elements元素&#x…
阅读更多...
我在亚马逊云平台的学习成长之路

我在亚马逊云平台的学习成长之路

前言 今年是亚马逊云科技成立的第16个年头&#xff0c;也是云计算行业诞生的16周年。作为云计算时代的“领头羊”&#xff0c;亚马逊2006年推出了名为Amazon Web Services(AWS)的新产品。AWS背后的想法是提供一个平台&#xff0c;同亚马逊内部使用的平台一样&#xff0c;将其作…
阅读更多...
Three.js--》实现3d地月模型展示

Three.js--》实现3d地月模型展示

目录 项目搭建 初始化three.js基础代码 创建月球模型 添加地球模型 添加模型标签 今天简单实现一个three.js的小Demo&#xff0c;加强自己对three知识的掌握与学习&#xff0c;只有在项目中才能灵活将所学知识运用起来&#xff0c;话不多说直接开始。 项目搭建 本案例还…
阅读更多...
230530-论文整理-课题组2

230530-论文整理-课题组2

对这些研究有点兴趣颇微。 文章目录 Rethinking Dense Retrieval’s Few-Shot AbilityDecoder-Only or Encoder-Decoder? Interpreting Language Model as a Regularized Encoder-DecoderPLOME: Pre-training with Misspelled Knowledge for Chinese Spelling CorrectionRead…
阅读更多...
北邮22信通：复习补充：双向链表的实现

北邮22信通：复习补充：双向链表的实现

北邮22信通一枚~ 跟随课程进度每周更新数据结构与算法的代码和文章 持续关注作者 解锁更多邮苑信通专属代码~ 获取更多文章 请访问专栏&#xff1a; 北邮22信通_青山如墨雨如画的博客-CSDN博客 **说明** 最近复习看到书后有双向链表的题目&#xff0c;编出来供大家…
阅读更多...
Mybatis-Plus 进阶开发-自定义乐观锁插件

Mybatis-Plus 进阶开发-自定义乐观锁插件

文章目录 前言0. OptimisticLockerInnerInterceptor 介绍1. Mybatis-plus 实现乐观锁的原理2. 自定义乐观锁插件1. 创建自定义乐观锁插件2. 配置自定义乐观锁插件 3. 总结 &#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是冰点&#xff0c;从业11年&#xff0c;目前在…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023