5.1 类的声明
随着ECMAScript 6 (ES6)的引入，JavaScript中出现了一种新的结构用于创建对象和管理继承—— 关键字class。类提供了一种更方便和易于理解的语法来创建 对象和处理原型。
JavaScript中的类 是在现有的原型继承系统上的语法糖。它们使得 对象的创建和管理更具可读性和结构性。
类的声明
在JavaScript中，使用关键字class来声明一个类，其后跟随类名。 类体用大括号{}包围。
示例：
JavaScript
class Person {
// 类的方法
greet() {
console.log('Hello!');
}
}
// 创建类的实例
const person = new Person();
person.greet(); // 输出: Hello!
类表达式
类可以通过声明或表达式来声明。类的表达式可以 是具名的或匿名的。
具名类的示例：
JavaScript
const Person = class PersonClass {
greet() {
console.log('Hello!');
}
};
const person = new Person();
person.greet(); // 输出: Hello!
匿名类的示例：
JavaScript
const Person = class {
greet() {
console.log('Hello!');
}
};
const person = new Person();
person.greet(); // 输出: Hello!
5.2 类的字段和方法
类的属性
ES6中的类属性只能在构造函数内部声明。然而在JavaScript的更新版本中 (ES2022) 引入了类字段，可以在构造函数之外声明属性。
在构造函数中使用属性的示例：
JavaScript
class User {
constructor(username, email) {
this.username = username;
this.email = email;
}
}
const user = new User('john_doe', 'john@example.com');
console.log(user.username); // "john_doe"
console.log(user.email); // "john@example.com"
使用类字段的示例 (ES2022)：
JavaScript
class User {
username = 'default_username';
email = 'default@example.com';
constructor(username, email) {
this.username = username;
this.email = email;
}
}
const user = new User('john_doe', 'john@example.com');
console.log(user.username); // "john_doe"
console.log(user.email); // "john@example.com"
说明：
- 在第一个示例中，属性
username和email在构造函数内部声明和初始化 - 在第二个示例中，属性
username和email在构造函数之外作为类字段声明
类的方法
类可以包含在类主体内定义的方法。这些方法会自动添加到创建的对象的原型中。
类方法的示例：
JavaScript
class Animal {
speak() {
console.log('Animal speaks');
}
eat() {
console.log('Animal eats');
}
}
const animal = new Animal();
animal.speak(); // 输出: Animal speaks
animal.eat(); // 输出: Animal eats
3.3 类的使用示例
创建复杂对象
类允许创建具有不同方法和属性的复杂对象。
示例：
JavaScript
class Car {
constructor(brand, model) {
this.brand = brand;
this.model = model;
}
startEngine() {
console.log(`${this.brand} ${this.model} engine started.`);
}
stopEngine() {
console.log(`${this.brand} ${this.model} engine stopped.`);
}
}
const myCar = new Car('Toyota', 'Camry');
myCar.startEngine(); // 输出: Toyota Camry engine started.
myCar.stopEngine(); // 输出: Toyota Camry engine stopped.
GO TO FULL VERSION