• ES6 语法详解(class关键字)


    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
        </body>
        <script type="text/javascript">
            /**
             * emmm, 写Java的一看就懂
             * 1. 通过class定义类/实现类的继承
             * 2. 在类中通过constructor定义构造方法
             * 3. 通过new来创建类的实例
             * 4. 通过extends来实现类的继承
             * 5. 通过super调用父类的构造方法
             * 6. 重写从父类中继承的一般方法
             */
    
            // 通过class定义类
            class Person {
                // 定义构造方法
                constructor(username, age) {
                    this.username = username
                    this.age = age
                }
                // 定义一般方法
                info() {
                    return 'this is person class!'
                }
            }
    
            // 通过new 创建
            let person = new Person('Mr.flower', 18)
            console.log(person)
            // 调用类的方法
            let info = person.info()
            console.log(info)
    
            // 通过extends继承父类
            class Sub extends Person {
                constructor(username, age, sex) {
                    // 通过super调用父类的构造方法 
                    super(username, age)
                    this.sex = sex
                }
                // 重写父类的一般方法
                info(){
                    return 'this is sub class!'
                }
                // 扩展自己的方法
                personInfo(){
                    // 通过super调用父类的方法
                    return super.info()
                }
            }
            let sub = new Sub('Mis.dance',18,'man')
            console.log(sub)
            console.log(sub.info())
            console.log(sub.personInfo())
        </script>
    </html>

    对于学习后端语言的人来说这个 SoEasy

    作者:彼岸舞

    时间:2021816

    内容关于:前端知识库

    本文属于作者原创,未经允许,禁止转发

  • 相关阅读:
    服务管理命令
    软件管理
    Qt软件打包与发布(windeployqt工具)
    03
    第一章 BP神经网络
    代理模式 与 Spring AOP
    java 回调机制
    HashTable 实现
    实现Singleton模式
    BST 汇总
  • 原文地址:https://www.cnblogs.com/flower-dance/p/15150316.html
Copyright © 2020-2023  润新知