ES6 javascript中class静态方法、属性与实例属性用法示例

ES6（ES2015）引入了Class（类）的概念，它是一种更加清晰、更加面向对象的编程方式。在使用Class的过程中，我们需要了解并掌握Class的静态方法、属性和实例属性的用法，本攻略将带来详细的讲解与示例。

1. 静态方法与属性

静态方法和属性是指属于类本身而不是属于实例的方法和属性。静态方法和属性可以直接通过类名进行调用，而不需要先实例化类的对象。下面是一个示例说明：

class MathUtil {
  static PI = 3.14;

  static caculateCircleArea(radius) {
    return this.PI * radius * radius;
  }
}

console.log(MathUtil.PI); // 输出3.14
console.log(MathUtil.caculateCircleArea(2)); // 输出12.56

在上述代码中，我们定义了一个名为“MathUtil”的类，其中包含了一个静态属性PI和一个静态方法caculateCircleArea。然后我们通过类名直接访问了这些属性和方法，而不需要先实例化类的对象。

2. 实例属性

实例属性是指属于类实例的属性。在Class中，我们可以通过constructor()方法定义实例属性，并通过this关键词进行访问。下面是一个示例说明：

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

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

const alice = new Person('Alice', 25);
alice.introduce(); // 输出“Hi, my name is Alice, I'm 25 years old.”

在上述代码中，我们定义了一个名为“Person”的类，其中包含了一个constructor()方法，该方法用于初始化实例属性。然后我们通过new关键词实例化了一个名为“alice”的Person类对象，并调用了该对象的introduce()方法。

3. 示例应用

下面是一个以电子产品为例，演示静态方法和实例属性的应用场景。

class ElectronicProduct {
  static brand = 'Apple';

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

  static showBrand() {
    console.log(`This is ${this.brand} product.`);
  }

  showInfo() {
    console.log(`The ${this.name} costs $${this.price}.`);
  }
}

ElectronicProduct.showBrand(); // 输出“This is Apple product.”

const iphone = new ElectronicProduct('iPhone', 999);
iphone.showInfo(); // 输出“The iPhone costs $999.”

在上述代码中，我们定义了一个名为“ElectronicProduct”的类，其中包含了一个静态属性brand和一个静态方法showBrand，以及一个实例属性price和一个实例方法showInfo。然后我们调用了类的静态方法showBrand进行展示，再对实例进行调用实例方法showInfo进行信息展示。

另外，下面是一个以图书为例，演示实例属性的应用场景。

class Book {
  constructor(title, author) {
    this.title = title;
    this.author = author;
    this.isRead = false;
  }

  showInfo() {
    console.log(`The book ${this.title} is written by ${this.author}.`);
    console.log(`The book is${this.isRead ? ' ' : ' not '}read.`);
  }

  toggleReadStatus() {
    this.isRead = !this.isRead;
  }
}

const book1 = new Book('JavaScript: The Good Parts', 'Douglas Crockford');
book1.showInfo(); // 输出“The book JavaScript: The Good Parts is written by Douglas Crockford. The book is not read.”

book1.toggleReadStatus();
book1.showInfo(); // 输出“The book JavaScript: The Good Parts is written by Douglas Crockford. The book is read.”

在上述代码中，我们定义了一个名为“Book”的类，其中包含了一个实例属性isRead和两个实例方法showInfo和toggleReadStatus。然后我们创建了一个名为“book1”的Book类对象，并进行展示及修改read状态的操作。