1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8. </head>
    9. <body>
    10.   <input type="text" id="text" />
    12.   <script>
    13.     /* 员工管理
    14.       公共类 公共属性和公共方法
    15.       1.写父类的时候
    16.         公共的- 提取的时候，是否所有子类都有这个属性和方法
    18.       2. super的用法
    19.         父类构造函数 super(...)
    20.         父类的方法 super.xxx()
    22.       3.重写父类方法
    23.         同名覆盖
    25.       4.多态
    26.         同一个方法 - 可以有很多个版本
    27.     */
    28.     class Staff{
    29.       constructor(name, department, basicSalary){
    30.         this.name = name;
    31.         this.department = department;
    32.         this.basicSalary = basicSalary;
    33.       }
    35.       // 薪资
    36.       salary() {
    37.         return this.basicSalary;
    38.       }
    39.     }
    41.     // / super的作用
    42.     class Coder extends Staff{
    43.       constructor(name, department, basicSalary, language){
    44.         super(name, department, basicSalary);
    45.         this.language = language;
    46.       }
    47.       // 重写父类的方法
    48.       salary(){
    49.         // 程序员薪资计算方式
    50.         const basic = super.salary();
    51.         return Math.ceil(basic * 1.2);
    52.       }
    53.     }
    55.     class Designer extends Staff{
    56.       constructor(name, department, basicSalary, type){
    57.         super(name, department, basicSalary);
    58.         this.type = type;
    59.       }
    60.       // 重写父类的方法
    61.       salary(){
    62.         // 设计师薪资计算方式
    63.         const basic = super.salary();
    64.         return Math.ceil(basic + 800);
    65.       }
    66.     }
    68.     // 多态 - 简化代码
    69.     // 不去管实例怎么去实现
    71.     const c = new Coder('张三', '技术部', 9000, 'js');
    72.     const d = new Designer('韩梅梅', '设计部', 6000, '平面设计');
    74.   </script>
    76. </body>
    77. </html>