ES6类继承示例代码展示功能说明这个示例展示了ES6中类的继承特性：创建了一个基类Person，具有name和age

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ES6类继承示例</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: #f7f9fc;
      color: #333;
    }

    h1 {
      color: #2c3e50;
      text-align: center;
      border-bottom: 2px solid #3498db;
      padding-bottom: 10px;
    }

    .demo-container {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      padding: 20px;
      margin-top: 20px;
    }

    .code-block {
      background-color: #2d3a4b;
      color: #abb2bf;
      padding: 15px;
      border-radius: 5px;
      overflow-x: auto;
      margin: 15px 0;
      font-family: 'Fira Code', monospace;
    }

    .keyword {
      color: #c678dd;
    }

    .function {
      color: #61afef;
    }

    .class {
      color: #e5c07b;
    }

    .comment {
      color: #5c6370;
    }

    .output {
      background-color: #edf2f7;
      padding: 15px;
      border-radius: 5px;
      margin-top: 20px;
      border-left: 4px solid #3498db;
    }

    button {
      background-color: #3498db;
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 4px;
      cursor: pointer;
      font-weight: bold;
      margin: 5px;
      transition: background-color 0.3s;
    }

    button:hover {
      background-color: #2980b9;
    }

    .btn-container {
      display: flex;
      justify-content: center;
      margin: 20px 0;
    }
  </style>
</head>

<body>
  <h1>ES6类继承示例</h1>

  <div class="demo-container">
    <h2>基类 (Person) 和子类 (Employee) 实现</h2>

    <div class="code-block">
      <pre><span class="comment">// 基类定义</span>
<span class="keyword">class</span> <span class="class">Person</span> {
    <span class="function">constructor</span>(name, age) {
        <span class="keyword">this</span>.name = name;
        <span class="keyword">this</span>.age = age;
    }
    
    <span class="comment">// 基类方法</span>
    <span class="function">introduce</span>() {
        <span class="keyword">return</span> `大家好，我是${<span class="keyword">this</span>.name}，今年${<span class="keyword">this</span>.age}岁。`;
    }
    
    <span class="function">haveBirthday</span>() {
        <span class="keyword">this</span>.age++;
        <span class="keyword">return</span> `${<span class="keyword">this</span>.name}过生日啦！现在${<span class="keyword">this</span>.age}岁。`;
    }
}

<span class="comment">// 子类定义</span>
<span class="keyword">class</span> <span class="class">Employee</span> <span class="keyword">extends</span> <span class="class">Person</span> {
    <span class="function">constructor</span>(name, age, company, position) {
        <span class="keyword">super</span>(name, age); <span class="comment">// 调用父类构造函数</span>
        <span class="keyword">this</span>.company = company;
        <span class="keyword">this</span>.position = position;
    }
    
    <span class="comment">// 子类特有方法</span>
    <span class="function">work</span>() {
        <span class="keyword">return</span> `${<span class="keyword">this</span>.name}正在以${<span class="keyword">this</span>.position}的身份在${<span class="keyword">this</span>.company}工作。`;
    }
    
    <span class="comment">// 重写父类方法</span>
    <span class="function">introduce</span>() {
        <span class="keyword">return</span> <span class="keyword">super</span>.introduce() + ` 我在${<span class="keyword">this</span>.company}担任${<span class="keyword">this</span>.position}。`;
    }
    
    <span class="comment">// 子类特有方法</span>
    <span class="function">promote</span>(newPosition) {
        <span class="keyword">const</span> oldPosition = <span class="keyword">this</span>.position;
        <span class="keyword">this</span>.position = newPosition;
        <span class="keyword">return</span> `${<span class="keyword">this</span>.name}从${oldPosition}晋升为${newPosition}！`;
    }
}</pre>
    </div>

    <div class="btn-container">
      <button onclick="runDemo()">运行演示</button>
      <button onclick="clearOutput()">清除输出</button>
    </div>

    <div id="output" class="output">
      <p>点击"运行演示"按钮查看结果...</p>
    </div>
  </div>

  <script>
    // 基类定义
    class Person {
      constructor(name, age) {
        this.name = name;
        this.age = age;
      }

      // 基类方法
      introduce() {
        return `大家好，我是${this.name}，今年${this.age}岁。`;
      }

      haveBirthday() {
        this.age++;
        return `${this.name}过生日啦！现在${this.age}岁。`;
      }
    }

    // 子类定义
    class Employee extends Person {
      constructor(name, age, company, position) {
        super(name, age); // 调用父类构造函数
        this.company = company;
        this.position = position;
      }

      // 重写父类方法
      introduce() {
        return super.introduce() + ` 我在${this.company}担任${this.position}。`;
      }

      // 子类特有方法
      work() {
        return `${this.name}正在以${this.position}的身份在${this.company}工作。`;
      }

      // 子类特有方法
      promote(newPosition) {
        const oldPosition = this.position;
        this.position = newPosition;
        return `${this.name}从${oldPosition}晋升为${newPosition}！`;
      }
    }

    function runDemo() {
      const output = document.getElementById('output');
      output.innerHTML = '<h3>演示结果：</h3>';

      // 创建基类实例
      const person = new Person('张三', 25);
      appendOutput(output, `基类实例: ${person.introduce()}`);

      // 创建子类实例
      const employee = new Employee('李四', 30, '某科技公司', '高级工程师');
      appendOutput(output, `子类实例: ${employee.introduce()}`);
      appendOutput(output, `调用子类特有方法: ${employee.work()}`);

      // 调用继承的方法
      appendOutput(output, `调用继承的方法: ${employee.haveBirthday()}`);
      appendOutput(output, `更新后的介绍: ${employee.introduce()}`);

      // 调用子类特有方法
      appendOutput(output, `调用晋升方法: ${employee.promote('技术总监')}`);
      appendOutput(output, `晋升后的介绍: ${employee.introduce()}`);

      // 演示继承关系
      appendOutput(output, `<br><strong>继承关系验证:</strong>`);
      appendOutput(output, `employee instanceof Employee: ${employee instanceof Employee}`);
      appendOutput(output, `employee instanceof Person: ${employee instanceof Person}`);
      appendOutput(output, `Employee.prototype.isPrototypeOf(employee): ${Employee.prototype.isPrototypeOf(employee)}`);
      appendOutput(output, `Person.prototype.isPrototypeOf(employee): ${Person.prototype.isPrototypeOf(employee)}`);
    }

    function appendOutput(container, text) {
      const p = document.createElement('p');
      p.innerHTML = text;
      container.appendChild(p);
    }

    function clearOutput() {
      document.getElementById('output').innerHTML = '<p>点击"运行演示"按钮查看结果...</p>';
    }
  </script>
</body>

</html>

功能说明

这个示例展示了ES6中类的继承特性：

创建了一个基类Person，具有name和age属性，以及introduce()和haveBirthday()方法
创建了一个子类Employee，使用extends关键字继承Person类
子类中使用super()调用父类的构造函数
子类添加了自己特有的属性(company, position)和方法(work(), promote())
子类重写了父类的introduce()方法，并使用super.introduce()调用父类的方法

点击"运行演示"按钮可以看到实际运行结果，包括创建实例、调用方法以及验证继承关系的演示。

这个示例展示了ES6类继承的核心概念，包括继承、方法重写和super关键字的使用。