深入ES6 - 解锁JavaScript类与继承的高级玩法

Shaw0xyz · 发表于 2024-6-18 12:01:11

本帖最后由 Shaw0xyz 于 2024-6-20 13:44 编辑

1. 引言

ECMAScript 6（简称ES6）为javaScript引入了许多新特性，其中类与继承机制的改进尤为重要。ES6的类与继承机制提供了更简洁和直观的语法，使得面向对象编程（OOP）在JavaScript中变得更加高效。本文将深入探讨ES6的类与继承，介绍其基本概念和高级用法，并通过实例演示其强大的功能。

2. ES6类基础

2.1 定义类

在ES6中，可以使用 `class` 关键字定义一个类。类的定义包括构造函数和方法。

示例：

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
}
}

复制代码

2.2 实例化对象

使用 `new` 关键字实例化一个类对象。

示例：

const person1 = new Person('Alice', 30);
console.log(person1.greet());

复制代码

3. 类的继承

3.1 定义子类

通过 `extends` 关键字可以定义一个子类，子类会继承父类的属性和方法。

示例：

class Employee extends Person {
constructor(name, age, jobTitle) {
super(name, age);
this.jobTitle = jobTitle;
}
introduce() {
return `${this.greet()} I work as a ${this.jobTitle}.`;
}
}

复制代码

3.2 子类实例化

实例化子类对象并调用子类方法。

示例：

const employee1 = new Employee('Bob', 25, 'Software Engineer');
console.log(employee1.introduce());

复制代码

4. 高级用法

4.1 静态方法

使用 `static` 关键字定义静态方法，静态方法不需要实例化即可调用。

示例：

class MathUtil {
static add(a, b) {
return a + b;
}
}
console.log(MathUtil.add(5, 3));

复制代码

4.2 访问器属性

通过 `get` 和 `set` 关键字定义访问器属性，访问器属性允许对对象属性进行更灵活的控制。

示例：

class Circle {
constructor(radius) {
this.radius = radius;
}
get diameter() {
return this.radius * 2;
}
set diameter(value) {
this.radius = value / 2;
}
}
const circle = new Circle(10);
console.log(circle.diameter);
circle.diameter = 20;
console.log(circle.radius);

复制代码

4.3 使用Symbol定义私有属性

在ES6中，可以使用 `Symbol` 定义私有属性，避免属性名冲突。

示例：

const _salary = Symbol('salary');
class Worker extends Person {
constructor(name, age, jobTitle, salary) {
super(name, age);
this.jobTitle = jobTitle;
this[_salary] = salary;
}
getSalary() {
return this[_salary];
}
}
const worker1 = new Worker('Carol', 28, 'Manager', 50000);
console.log(worker1.getSalary());

复制代码

5. 实战示例

5.1 实现一个简单的动物类和其子类

定义一个Animal类，并通过继承创建不同种类的动物。

示例：

class Animal {
constructor(name) {
this.name = name;
}
speak() {
return `${this.name} makes a sound.`;
}
}
class Dog extends Animal {
speak() {
return `${this.name} barks.`;
}
}
class Cat extends Animal {
speak() {
return `${this.name} meows.`;
}
}
const dog = new Dog('Rex');
const cat = new Cat('Whiskers');
console.log(dog.speak());
console.log(cat.speak());

复制代码

6. 结论

ES6的类与继承机制使得JavaScript的面向对象编程更加简洁和强大。通过使用类、继承、静态方法、访问器属性和私有属性，可以编写出结构清晰、功能丰富的代码。希望本文能帮助开发者深入理解ES6类与继承的高级用法，提升JavaScript编程水平。

/ 荔枝学姐de课后专栏 /

Hi！这里是荔枝学姐~

欢迎来到我的课后专栏

自然语言学渣 NLP摆烂姐

热衷于技术写作 IT边角料

AIGC & Coding & linux ...

~互撩~ TG: @Shaw_0xyz

		自动登录	找回密码
密码			立即注册

[前端] 深入ES6 - 解锁JavaScript类与继承的高级玩法