老生常谈ES6中的类

ES6中的类是JavaScript语言中的一种新的语法糖，它提供了一种更加优雅的面向对象的编程方式，让JavaScript变得更加易读、易维护。在ES6之前，我们在JavaScript中实现继承是通过原型链来实现的。但是这种方式缺少了一个明确的语法结构，不够直观，而且容易出现错误。ES6中引入了类的概念，让我们能够更加方便、清晰地定义类和继承关系。下面我将详细讲解ES6中的类。

1. 定义类

使用ES6定义类的方法是使用class关键字：

class MyClass {
  // 类的内容
}

这样就定义了一个名为MyClass的类。

2. 类的构造函数

类中使用constructor关键字来定义构造函数。构造函数用于初始化对象的属性值。

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

在类实例化的时候，可以向构造函数传递参数，这些参数将会被传递给构造函数中。

const myClassObj = new MyClass('小明', 20);
console.log(myClassObj.name, myClassObj.age); // 小明 20

3. 类的方法

类中的方法定义方式和普通的JavaScript对象是一样的。只需要在类的内部定义一个函数即可。

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

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

使用new关键字创建MyClass的实例，并调用sayHello方法。

const myClassObj = new MyClass('小明', 20);
myClassObj.sayHello(); // Hello, my name is 小明, I am 20 years old.

4. 类的继承

ES6中的类支持继承的概念，使用extends关键字实现类的继承：

class MyAnotherClass extends MyClass {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }

  sayGrade() {
    console.log(`My grade is ${this.grade}`);
  }
}

这样MyAnotherClass就继承了MyClass的属性和方法。在构造函数中使用super方法来调用父类的构造函数，可以将父类的属性初始化。

const myAnotherClassObj = new MyAnotherClass('小明', 20, '一年级');
myAnotherClassObj.sayHello(); // Hello, my name is 小明, I am 20 years old.
myAnotherClassObj.sayGrade(); // My grade is 一年级

继承后，子类可以在其自身的内部添加新的方法和属性。

5. 示例

下面是一个使用ES6类实现的购物车的示例：

class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}

class Cart {
  constructor() {
    this.products = [];
  }

  addProduct(product) {
    this.products.push(product);
  }

  removeProduct(product) {
    this.products = this.products.filter(p => p !== product);
  }

  getTotalPrice() {
    return this.products.reduce((total, p) => total + p.price, 0);
  }
}

const apple = new Product('Apple', 2);
const banana = new Product('Banana', 3);

const cart = new Cart();
cart.addProduct(apple);
cart.addProduct(banana);

console.log(cart.getTotalPrice()); // 5
cart.removeProduct(banana);
console.log(cart.getTotalPrice()); // 2

在这个示例中，Product类表示购物车中的商品，Cart类表示购物车。在Cart类中实现了添加商品、删除商品和计算总价的方法。通过实例化对象，我们可以向购物车添加商品，并计算出购物车的总价。