ES6中 class 类的使用(学习笔记)

介绍

---

类是用于创建对象的模板。
我们使用 class 关键字来创建一个类，类体在一对大括号 {} 中，我们可以在大括号 {} 中定义类成员的位置，如方法或构造函数。
每个类中包含了一个特殊的方法 constructor()，它是类的构造函数，这种方法用于创建和初始化一个由 class 创建的对象。

创建类

---

class Runoob {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
}

使用类

---

定义好类后，我们就可以使用 new 关键字来创建对象：

class Runoob {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
}
 
let site = new Runoob("菜鸟教程",  "https://www.runoob.com");

创建对象时会自动调用构造函数方法 constructor()。

类的方法

---

我们使用关键字 class 创建一个类，可以添加一个 constructor()方法，然后添加任意数量的方法。

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

类的继承

---

JavaScript 类继承使用 extends 关键字。
继承允许我们依据另一个类来定义一个类，这使得创建和维护一个应用程序变得更容易。
super()方法用于调用父类的构造函数。
当创建一个类时，您不需要重新编写新的数据成员和成员函数，只需指定新建的类继承了一个已有的类的成员即可。这个已有的类称为基类（父类），新建的类称为派生类（子类）。

class Site {
  constructor(name) {
    this.sitename = name;
  }
  present() {
    return '我喜欢' + this.sitename;
  }
}
 
class Runoob extends Site {
  constructor(name, age) {
    super(name); // 调用父类的构造函数，并把参数传过去
    this.age = age;
  }
  show() {
    // 继承了父类中的方法
    return this.present() + ', 它创建了 ' + this.age + ' 年。';
  }
}
 
let noob = new Runoob("菜鸟教程", 5);
document.getElementById("demo").innerHTML = noob.show(); // 我喜欢菜鸟教程, 它创建了 5 年

类的静态方法

---

静态方法是使用 static关键字修饰的方法，又叫类方法，属于类的，但不属于对象，在实例化对象之前可以通过 类名.方法名 调用静态方法。
静态方法不能在对象上调用，只能在类中调用。

class Runoob {
  constructor(name) {
    this.name = name;
  }
  static hello() {
    return "Hello!!";
  }
}
 
let noob = new Runoob("菜鸟教程");
 
// 可以在类中调用 'hello()' 方法
document.getElementById("demo").innerHTML = Runoob.hello();
 
// 不能通过实例化后的对象调用静态方法
// document.getElementById("demo").innerHTML = noob.hello();
// 以上代码会报错

Class 和模块化的结合应用

---

1. 使用 Class 和模块化实现一个简单的计算器：

// calculator.js
export class Calculator {
  add(a, b) {
    return a + b;
  }
  
  subtract(a, b) {
    return a - b;
  }
}

// main.js
import { Calculator } from './calculator.js';

const calculator = new Calculator();
console.log(calculator.add(1, 2)); // 输出：3
console.log(calculator.subtract(3, 2)); // 输出：1

2. 使用 Class 和模块化实现一个简单的购物车：

// product.js
export class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}

// cart.js
export class Cart {
  constructor() {
    this.products = [];
  }
  
  addProduct(product) {
    this.products.push(product);
  }
  
  getTotalPrice() {
    return this.products.reduce((total, product) => total + product.price, 0);
  }
}

// main.js
import { Product } from './product.js';
import { Cart } from './cart.js';

const cart = new Cart();
const product1 = new Product("Apple", 1);
const product2 = new Product("Banana", 2);

cart.addProduct(product1);
cart.addProduct(product2);

console.log(cart.getTotalPrice()); // 输出：3

在上面的示例中，我们定义了一个 Product 的 Class 和一个 Cart 的 Class，并导出它们。在另一个文件中，我们通过导入 Product 和 Cart，并创建它们的实例，来实现一个简单的购物车功能。

参考文章：菜鸟教程, 优雅而高效的JavaScript—— Class 和模块化