沃梦达 / IT编程 / 前端开发 / 正文

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

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

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类,该类有nameage两个属性,以及一个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类,该类实现了栈的数据结构。我们在该类中定义了一些常用的方法,如pushpoppeek等,并实现了这些方法的具体功能。

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

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类,该类实现了队列的数据结构。我们在该类中定义了一些常用的方法,如enqueuedequeuefront等,并实现了这些方法的具体功能。

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

总结

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

本文标题为:ES6 javascript中Class类继承用法实例详解