ES6 javascript中Class类继承用法实例详解

1. 什么是ES6中的Class类

在ES6（ES2015）中，我们可以使用Class关键字来定义一个类，这是一种更加面向对象的编程方法，使得代码更加易读、易维护。使用Class关键字定义类后，我们可以通过关键字new来创建该类的实例。

下面是一个简单的示例：

class Person{
  constructor(name, age){
    this.name = name;
    this.age = age;
  }

  sayHello(){
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`)
  }
}

const person1 = new Person('Tom', 18);
person1.sayHello(); //输出：Hello, my name is Tom, I'm 18 years old.

在上面的示例中，我们定义了一个Person类，该类有name和age两个属性，以及一个sayHello方法。我们使用new关键字创建了一个该类的实例，并调用了该实例的sayHello方法。

2. Class类的继承

在ES6中，我们可以使用继承机制来实现代码复用。使用继承可以使得我们在定义类时充分利用已有类的代码，避免代码的冗余和重复。在ES6中，我们可以使用extends关键字来实现继承。

下面是一个简单的示例：

class Animal{
  constructor(name){
    this.name = name;
  }

  run(){
    console.log(`${this.name} is running.`)
  }
}

class Dog extends Animal{
  bark(){
    console.log(`${this.name} is barking.`)
  }
}

const dog1 = new Dog('Tom');
dog1.bark(); //输出：Tom is barking.
dog1.run(); //输出：Tom is running.

在上面的示例中，我们定义了一个Animal类和一个Dog类，Dog类通过extends关键字继承了Animal类。我们在Dog类中定义了一个bark方法，并调用了Animal类中的run方法。使用继承可以使得我们重复利用了Animal类的代码。

3. 示例：使用Class类实现数据结构堆栈

下面是一个使用Class类实现数据结构堆栈的示例：

class Stack{
  constructor(){
    this.items = [];
  }

  push(element){
    this.items.push(element);
  }

  pop(){
    return this.items.pop();
  }

  peek(){
    return this.items[this.items.length-1];
  }

  isEmpty(){
    return this.items.length===0;
  }

  clear(){
    this.items = [];
  }

  size(){
    return this.items.length;
  }
}

const stack1 = new Stack();
stack1.push(1);
stack1.push(2);
stack1.push(3);
console.log(stack1.peek()); //输出：3
console.log(stack1.size()); //输出：3
stack1.pop();
console.log(stack1.peek()); //输出：2

在上面的示例中，我们定义了一个Stack类，该类实现了栈的数据结构。我们在该类中定义了一些常用的方法，如push、pop、peek等，并实现了这些方法的具体功能。

我们使用new关键字创建了一个Stack类的实例，并使用实例的方法对栈进行了一些操作，例如push、pop。最后输出了堆栈中的元素个数和栈顶元素。

4. 示例：使用Class类实现数据结构队列

下面是一个使用Class类实现数据结构队列的示例：

class Queue{
  constructor(){
    this.items = [];
  }

  enqueue(element){
    this.items.push(element);
  }

  dequeue(){
    return this.items.shift();
  }

  front(){
    return this.items[0];
  }

  isEmpty(){
    return this.items.length===0;
  }

  clear(){
    this.items = [];
  }

  size(){
    return this.items.length;
  }
}

const queue1 = new Queue();
queue1.enqueue(1);
queue1.enqueue(2);
queue1.enqueue(3);
console.log(queue1.front()); //输出：1
console.log(queue1.size()); //输出：3
queue1.dequeue();
console.log(queue1.front()); //输出：2

在上面的示例中，我们定义了一个Queue类，该类实现了队列的数据结构。我们在该类中定义了一些常用的方法，如enqueue、dequeue、front等，并实现了这些方法的具体功能。

我们使用new关键字创建了一个Queue类的实例，并使用实例的方法对队列进行了一些操作，例如enqueue、dequeue。最后输出了队列中的元素个数和队首元素。

总结

在ES6中，我们可以使用Class关键字来定义一个类，并使用继承机制实现代码的复用。使用Class类可以使得我们的代码更加清晰、易读，更加易于维护。通过两个示例我们可以了解到，在Class类中实现一个数据结构是十分简单的，只需定义类和类的方法即可。当然，在生产环境中我们需要考虑更多的因素，例如性能、并发等。