从0开始学前端 第二十六课：JavaScript中的类（Class）高级话题

第二十六课：JavaScript中的类（Class）高级话题

学习目标

在这一课，我们将深入探索JavaScript中类（Class）的更高级的特性。我们的学习目标包括：

1. 理解和使用getter和setter访问器方法
2. 掌握类表达式的概念和用法
3. 学习如何使用类的私有字段和方法
4. 探索如何使用类的静态方法和属性
5. 理解并实现类中的方法链式调用

学习内容

1. Getter和Setter访问器

   Getter和Setter访问器方法允许你控制对类中属性的访问和赋值。

   代码示例：

   class Person {
       constructor(name) {
           this._name = name;
       }
       
       get name() {
           return this._name;
       }
       
       set name(value) {
           if (value.length < 4) {
               console.log('Name is too short.');
               return;
           }
           this._name = value;
       }
   }
   
   let person = new Person("John");
   console.log(person.name);  // 预计输出："John"
   person.name = "Al";        // 预计输出："Name is too short."
   console.log(person.name);  // 预计输出："John"
   

2. 类表达式

   类表达式提供了定义类的另一种方式，类似于函数表达式。

   代码示例：

   let Rectangle = class {
       constructor(height, width) {
           this.height = height;
           this.width = width;
       }
   };
   
   let myRectangle = new Rectangle(20, 10);
   console.log(myRectangle.height);  // 预计输出：20
   

3. 私有字段和方法

   私有字段和方法是类的属性和方法，它们只能在类的内部访问。

   代码示例：

   class Rectangle {
       #height;
       #width;
   
       constructor(height, width) {
           this.#height = height;
           this.#width = width;
       }
   
       // 私有方法
       #calculateArea() {
           return this.#height * this.#width;
       }
   
       getArea() {
           return this.#calculateArea();
       }
   }
   
   let myRectangle = new Rectangle(10, 5);
   console.log(myRectangle.getArea());  // 预计输出：50
   // console.log(myRectangle.#height); // 错误：#height是私有属性
   

4. 静态方法和属性

   静态方法和属性是与类本身相关联的，而不是与类的实例相关联。

   代码示例：

   class Point {
       static displayName = "Point";
       static distance(a, b) {
           const dx = a.x - b.x;
           const dy = a.y - b.y;
           return Math.sqrt(dx*dx + dy*dy);
       }
   }
   
   let p1 = new Point();
   let p2 = new Point();
   p1.x = 5;
   p1.y = 5;
   p2.x = 10;
   p2.y = 10;
   console.log(Point.displayName);  // 预计输出："Point"
   console.log(Point.distance(p1, p2));  // 预计输出：7.0710678118654755
   

5. 链式调用

   通过在方法的末尾返回this，可以实现链式调用，这样可以连续调用同一个对象上的多个方法。

   代码示例：

   class Car {
       constructor(brand) {
           this.brand = brand;
           this.speed = 0;
       }
       
       setBrand(brand) {
           this.brand = brand;
           return this;
       }
       
       accelerate(amount) {
           this.speed += amount;
           return this;
       }
       
       brake(amount) {
           this.speed -= amount;
           return this;
       }
       
       printSpeed() {
           console.log(this.brand + ' running at ' + this.speed + ' km/h');
           return this;
       }
   }
   
   let car = new Car('Ford');
   car.accelerate(50).printSpeed()  // 预计输出："Ford running at 50 km/h"
       .accelerate(100).printSpeed()  // 预计输出："Ford running at 150 km/h"
       .brake(25).printSpeed();       // 预计输出："Ford running at 125 km/h"
   

课后练习

1. 实现一个Temperature类，它存储温度值，并可以通过getter和setter将其在摄氏度和华氏度之间转换。

   class Temperature {
       constructor(celsius) {
           this.celsius = celsius;
       }
       
       get fahrenheit() {
           return this.celsius * 1.8 + 32;
       }
       
       set fahrenheit(value) {
           this.celsius = (value - 32) / 1.8;
       }
   }
   
   // 练习代码
   let temp = new Temperature(0);
   console.log(temp.fahrenheit);  // 预计输出：32
   temp.fahrenheit = 100;
   console.log(temp.celsius);     // 预计输出：约37.78
   

2. 使用类表达式创建一个具有私有属性和链式方法的Counter类。

   const Counter = class {
       #count = 0;
       
       increment() {
           this.#count++;
           return this;
       }
       
       decrement() {
           this.#count--;
           return this;
       }
       
       getCount() {
           return this.#count;
       }
   };
   
   // 练习代码
   let counter = new Counter();
   counter.increment().increment().decrement().increment().increment();
   console.log(counter.getCount()); // 预计输出：3
   

完成这些练习后，你将对JavaScript类的高级特性有更深入的理解，包括访问器属性、类表达式、私有成员、静态成员以及链式调用的使用。这些都是构建复杂和高效前端应用程序的重要工具。

---

章节目录
第二十七课：原型和原型链