理解 JavaScript 中的类和继承-js教程-PHP中文网

理解 JavaScript 中的类和继承

霞舞

发布： 2024-12-18 17:21:01

原创

863人浏览过

理解 javascript 中的类和继承

JavaScript 类与继承详解

JavaScript 类为面向对象编程 (OOP) 提供了现代化的语法支持，涵盖继承、封装和多态等核心概念。本文将深入探讨 JavaScript 类和继承的创建、使用方法以及高级应用。

1. JavaScript 类

ES6 引入了 class 关键字，使类的定义更加清晰简洁。

类定义语法：

class 类名 {
  构造函数() {
    // 初始化代码
  }
  方法名() {
    // 方法代码
  }
}

登录后复制

基本类示例：

class Animal {
  constructor(name, type) {
    this.name = name;
    this.type = type;
  }
  speak() {
    console.log(`${this.name} 发出声音。`);
  }
}

const dog = new Animal('Buddy', '狗');
dog.speak(); // 输出：Buddy 发出声音。

登录后复制

关键点：

构造函数 (constructor): 用于初始化类的实例。
实例方法: 类中定义的方法，可在实例上调用。

2. JavaScript 继承

继承允许一个类继承另一个类的属性和方法，使用 extends 关键字实现。

继承语法：

class 子类 extends 父类 {
  constructor() {
    super(); // 调用父类构造函数
    // 子类额外初始化代码
  }
}

登录后复制

继承示例：

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} 发出声音。`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 调用父类构造函数
    this.breed = breed;
  }
  speak() {
    console.log(`${this.name}，一只${this.breed}，汪汪叫。`);
  }
}

const dog = new Dog('Buddy', '金毛寻回犬');
dog.speak(); // 输出：Buddy，一只金毛寻回犬，汪汪叫。

登录后复制

关键点：

super(): 调用父类构造函数。
方法重写: 子类可以重写父类的方法。

3. 方法重写

子类可以重写父类的方法，使用子类版本的实现。

立即学习“Java免费学习笔记（深入）”；

方法重写示例：

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} 发出声音。`);
  }
}

class Cat extends Animal {
  speak() {
    console.log(`${this.name} 喵喵叫。`);
  }
}

const cat = new Cat('Whiskers');
cat.speak(); // 输出：Whiskers 喵喵叫。

登录后复制

关键点：

子类方法实现会覆盖父类方法。
可使用 super.方法名() 调用父类方法。

4. 多重继承（间接实现）

JavaScript 不直接支持多重继承，但可以使用 Mixin 模式来模拟。

Mixin 示例：

const FlyMixin = {
  fly() {
    console.log(`${this.name} 正在飞翔。`);
  }
};

class Bird {
  constructor(name) {
    this.name = name;
  }
}

Object.assign(Bird.prototype, FlyMixin);

const bird = new Bird('麻雀');
bird.fly(); // 输出：麻雀 正在飞翔。

登录后复制

关键点：

Mixin 通过将方法混合到原型链上实现功能扩展。
Object.assign() 用于将 Mixin 的方法添加到类原型。

5. 静态方法和属性

静态方法和属性属于类本身，而非实例。

静态方法示例：

class MathUtil {
  static add(a, b) {
    return a + b;
  }
}

console.log(MathUtil.add(5, 3)); // 输出：8

登录后复制

关键点：

静态方法用于无需实例上下文的操作。

6. Getter 和 Setter

Getter 和 Setter 用于控制属性的访问和修改。

Getter 和 Setter 示例：

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

  get name() {
    return this._name;
  }

  set name(newName) {
    this._name = newName;
  }
}

const person = new Person('Alice');
console.log(person.name); // 输出：Alice
person.name = 'Bob';
console.log(person.name); // 输出：Bob

登录后复制