• 【JavaScript】ES6 中class定义类


    在这里插入图片描述

    文章目录

    ??前言

    我们会发现,按照之前学习过的构造函数形式创建 类 ,不仅仅和编写普通的函数过于相似,而且代码并不容易理解。

    • 在 ES6(ECMAScript2015)新的标准中使用了class关键字来直接定义类;
    • 但是类本质上依然是之前所学习过的构造函数、原型链的语法糖而已。所以学好之前的构造函数、原型链更有利于我们理解类的概念和继承关系。

    ??正文

    1.声明类的两种方式:

    • class 关键字 类的声明

      class Person{}

    • 类表达式(不常用)

      var People = class { }

    那么 Person类的原型是什么?如下展示了原型和typeof中Person的类型

    console.log(Person.prototype) // Person {}
    console.log(Person.prototype.__proto__) // {}
    console.log(Person.constructor) // [Function: Function]
    console.log(typeof Person) // function
    
    • 1
    • 2
    • 3
    • 4

    2.class 类的构造函数

    如果我们希望在创建对象的时候给类传递一些参数,这个时候应该怎么做呢?

    • 每个类都可以有一个自己的构造函数(方法),这个方法的名称是固定的 constructor
    • 当我们通过new操作符,操作一个类的时候会调用这个类的构造函数constructor
    • 每个类只能有一个构造函数,如果包含多个构造函数,那么会抛出异常。

    示例代码如下:

    // 类的声明
    class Person {
        // 类的构造方法
        constructor(name, age) {
            this.name = name
            this.age = age
        }
        foo () {
            console.log(this.name)
        }
    }
    var p1 = new Person('h', 19)
    
    console.log(p1)// Person { name: 'h', age: 19 }
    p1.foo() // h
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    当我们通过new关键字操作类的时候,会调用这个 constructor函数,并执行如下操作(假设new关键字新创建的对象为p1):

    1. 在内存中创建一个对象
    2. 将类的原型prototype赋值给创建出来的对象 p1.__proto__ = Person.prototype
    3. 将对象赋值给函数的this:new绑定 this = p1
    4. 执行函数体中的代码
    5. 自动返回创建出来的对象
      **

    3.class中方法定义

    3.1 class 中定义普通的实例方法

    class Person {
        // 类的构造方法
        constructor(name, age) {
            this.name = name
            this.age = age
            this._address = '北京市'
        }
        eating () {
            console.log(this.name + ' 正在eating~')
        }
        running () {
            console.log(this.name + ' 正在running~')
        }
    }
    
    var p1 = new Person('jam', 19)
    console.log(p1)
    p1.eating()
    p1.running()
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    3.2 class 类中定义访问器方法

    class Person {
        // 类的构造方法
        constructor(name, age) {
            this.name = name
            this.age = age
            this._address = '北京市'
        }
        // 类的访问器方法
        get address () {
            // 在这里可以设置拦截访问操作
            console.log('获取呢')
            return this._address
        }
        set address (newValue) {
            // 在这里可以设置拦截设置操作
            console.log('修改呢')
            return this._address = newValue
        }
    }
    
    var p1 = new Person('jam', 19)
    console.log(p1.address)
    p1.address = '天津市'
    console.log(p1.address)
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    3.3 类的静态方法(类方法)

    类的静态方法就是在方法前加一个static关键字,该方法就成为了类的静态方法。
    类的静态方法,不会被类的实例继承,而是直接通过类来调用。

    小案例:使用类的静态方法完成随机生成Person实例

    class Person {
        // 类的构造方法
        constructor(name, age) {
            this.name = name
            this.age = age
            this._address = '北京市'
        }
        
        // 类的静态方法(也称为类方法)  创建对象随机生成一个名字小案例
        static randomPerson () {
            // 创建一个存储名字的数组
            let names = ['jam', 'jak', 'jag', 'jao', 'jno']
            // Math.random()生成一个0-1之间的数字,小数肯定是不对的
            let nameIndex = Math.floor(Math.random() * names.length)
            let name = names[nameIndex]
            // 生成随机年龄
            let age = Math.floor(Math.random() * 100)
            // return随机生成的人物 姓名+ 年龄
            return new Person(name, age)
        }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    这里直接调用类的静态方法就可以 不需要使用new操作符创建创建实例对象

    • 随机生成一个Person实例(附效果图)

      // 随机生成一个
      var p2 = Person.randomPerson()
      console.log(p2)

    请添加图片描述

    • 随机生成多个Person实例(附带效果图)

      // 随机生成多个
      for (let index = 0; index < 20; index++) {
      console.log(Person.randomPerson())
      }

    请添加图片描述

    ??文末

    名 言 警 句 : 说 能 做 的 , 做 说 过 的 extcolor{red} {名言警句:说能做的,做说过的} 名言警句:说能做的,做说过的

    原 创 不 易 , 还 希 望 各 位 大 佬 支 持 一 下 extcolor{blue}{原创不易,还希望各位大佬支持一下} 原创不易,还希望各位大佬支持一下

    ?? 点 赞 , 你 的 认 可 是 我 创 作 的 动 力 ! extcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

    收 藏 , 你 的 青 睐 是 我 努 力 的 方 向 ! extcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

    评 论 , 你 的 意 见 是 我 进 步 的 财 富 ! extcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

    先自我介绍一下,小编13年上师交大毕业,曾经在小公司待过,去过华为OPPO等大厂,18年进入阿里,直到现在。深知大多数初中级java工程师,想要升技能,往往是需要自己摸索成长或是报班学习,但对于培训机构动则近万元的学费,着实压力不小。自己不成体系的自学效率很低又漫长,而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家,初衷也很简单,就是希望帮助到想自学又不知道该从何学起的朋友,同时减轻大家的负担。添加下方名片,即可获取全套学习资料哦

  • 相关阅读:
    Pandas+Pyecharts | 40000+条考研信息数据可视化
    【Lilishop商城】No2-7.确定软件架构搭建六(本篇包括延时任务,会用到rocketmq、redis)
    论文代码复现之:AMR Parsing as Sequence-to-Graph Transduction
    Linux服务器部署Spring Boot项目的一些shell命令脚本
    密码学和Java加密与解密技术
    D. Trees and Segments Codeforces Round 893 (Div. 2)
    单机、集群和分布式
    ElasticSearch第四讲:ES详解:ElasticSearch和Kibana安装
    Java、斐波那契数
    找不到vcruntime140_1.dll,无法继续执行代码怎么办?5个可以解决的方案分享
  • 原文地址:https://blog.csdn.net/m0_67401545/article/details/126080577