深入探索JS面向对象编程的奥秘

2023-11-07 16:03:19

对象，是计算机程序中最基础、最核心的组成单位。

对象是一种具有状态和行为的实体，在 JavaScript 中，对象可以通过两种方式创建：

对象字面量 ：使用大括号 {} 括起来的一组键值对，每个键值对由一个标识符（属性名）和一个值组成，使用逗号分隔。例如：

const person = {
  name: "John Doe",
  age: 30,
  occupation: "Software Engineer"
};

构造函数 ：使用 new 关键字和一个构造函数来创建对象，构造函数是一个特殊的函数，它用于创建和初始化对象。例如：

function Person(name, age, occupation) {
  this.name = name;
  this.age = age;
  this.occupation = occupation;
}

const person = new Person("John Doe", 30, "Software Engineer");

类是对象的一种模板，它定义了对象的结构和行为。

在 JavaScript 中，类是通过 class 关键字创建的，类可以包含属性、方法和构造函数。例如：

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

  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

const person = new Person("John Doe", 30, "Software Engineer");

继承是面向对象编程中的一项重要特性，它允许子类继承父类的属性和方法。

在 JavaScript 中，继承是通过 extends 关键字实现的。例如：

class Employee extends Person {
  constructor(name, age, occupation, salary) {
    super(name, age, occupation);
    this.salary = salary;
  }

  getSalary() {
    return this.salary;
  }
}

const employee = new Employee("John Doe", 30, "Software Engineer", 100000);

多态是指子类可以覆盖父类的方法，从而实现不同的行为。

在 JavaScript 中，多态是通过方法重写来实现的。例如：

class Person {
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

class Employee extends Person {
  greet() {
    super.greet();
    console.log(`I am an employee.`);
  }
}

const person = new Person("John Doe");
const employee = new Employee("Jane Doe");

person.greet(); // Hello, my name is John Doe.
employee.greet(); // Hello, my name is Jane Doe. I am an employee.

抽象是指类或方法只能被子类继承和实现，而不能被直接实例化。

在 JavaScript 中，抽象是通过 abstract 关键字实现的。例如：

abstract class Shape {
  constructor(color) {
    this.color = color;
  }

  abstract getArea();
}

class Circle extends Shape {
  constructor(color, radius) {
    super(color);
    this.radius = radius;
  }

  getArea() {
    return Math.PI * this.radius ** 2;
  }
}

class Rectangle extends Shape {
  constructor(color, width, height) {
    super(color);
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }
}

const circle = new Circle("red", 5);
const rectangle = new Rectangle("blue", 10, 20);

console.log(circle.getArea()); // 78.53981633974483
console.log(rectangle.getArea()); // 200