初探JS OOP的世界：对象、类和封装的魅力

2023-03-06 23:55:39

邂逅 JavaScript 中面向对象编程：破解 OOP 的奥秘

对象：万物皆对象

踏入 JavaScript 的世界，映入眼帘的是一个奇妙的景象，在这里，一切都以对象的形式存在。数字、字符串、数组，甚至函数，无一例外。对象宛如数据世界的容器，存储着属性（特征）和方法（行为）。

const person = {
  name: "John Doe",
  age: 30,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

在这个例子中，person 是一个对象，其属性包括姓名和年龄，而方法 greet 负责向我们打招呼。

类：对象的蓝图

类是对象的蓝图，它定义了对象的结构和行为。通过类，我们可以批量创建具有相同属性和方法的对象。

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

  greet() {
    console.log("Hello, my name is " + this.name);
  }
}

const john = new Person("John Doe", 30);
const jane = new Person("Jane Doe", 25);

john.greet(); // Hello, my name is John Doe
jane.greet(); // Hello, my name is Jane Doe

在这里，Person 是一个类，其构造函数定义了对象的属性，而 greet 方法则定义了对象的行为。通过使用 new ，我们创建了两个新的对象 john 和 jane。

封装：私密数据的守护神

封装是一个保护神，守护着对象私密数据不被外界窥探。在 JavaScript 中，我们可以使用 private 关键字实现封装。

class Person {
  #name;
  #age;

  constructor(name, age) {
    this.#name = name;
    this.#age = age;
  }

  greet() {
    console.log("Hello, my name is " + this.#name);
  }
}

const john = new Person("John Doe", 30);
john.greet(); // Hello, my name is John Doe

// 无法访问私有属性
console.log(john.#name); // error

在此示例中，我们使用 #name 和 #age 声明了私有属性。私有属性只能在类的内部访问，外部无法窥见。

继承：血脉相承的艺术

继承是一种血脉传承的艺术，它允许一个类从另一个类继承属性和方法。子类不仅继承了父类的特征，还可以在此基础上进行扩展和修改。

class Employee extends Person {
  constructor(name, age, salary) {
    super(name, age); // 调用父类的构造函数
    this.salary = salary;
  }

  work() {
    console.log("I'm working hard!");
  }
}

const employee = new Employee("John Doe", 30, 10000);
employee.greet(); // Hello, my name is John Doe
employee.work(); // I'm working hard!

在该示例中，Employee 类继承了 Person 类。Employee 类拥有 Person 类的所有属性和方法，同时新增了一个 salary 属性和一个 work 方法。

多态：千姿百态的展现

多态是一种千变万化的艺术形式，它允许子类以不同的方式实现父类的方法。当一个父类的方法被子类覆盖时，就会发生多态。

class Animal {
  speak() {
    console.log("I'm an animal.");
  }
}

class Dog extends Animal {
  speak() {
    console.log("Woof!");
  }
}

class Cat extends Animal {
  speak() {
    console.log("Meow!");
  }
}

const dog = new Dog();
const cat = new Cat();

dog.speak(); // Woof!
cat.speak(); // Meow!