面向对象 JavaScript 中的设计模式：基础知识

2023-12-10 08:19:47

JavaScript 中的面向对象设计模式：打造健壮、可扩展的应用程序

面向对象设计（OOP）是 JavaScript 中一种强大的编程范例，它允许开发人员创建复杂的、可维护的应用程序。通过利用原型继承、封装和继承等概念，OOP 可以帮助组织代码，提高代码的可重用性，并增强代码的可扩展性。

原型继承：JavaScript 的类继承机制

JavaScript 中没有传统的类继承机制。相反，它采用了一种基于原型委派（原型链）的机制。每个对象都有一个名为“原型”的内部属性，它指向另一个对象。当对象访问一个不存在的属性或方法时，JavaScript 会自动委托给它的原型。

const person = {
  name: 'John Doe',
  age: 30,
};

const employee = Object.create(person);
employee.salary = 50000;

console.log(employee.name); // 'John Doe'
console.log(employee.salary); // 50000

在上面的示例中，employee 对象从 person 对象继承，因此它可以访问 person 对象的属性和方法。

封装：保护你的数据和方法

封装是 OOP 中一项重要的概念，它通过将数据和方法隐藏在对象内部来实现数据保护和信息隐藏。JavaScript 中的封装可以通过使用闭包来实现。

const person = (() => {
  let name = 'John Doe';
  let age = 30;

  return {
    getName: () => name,
    getAge: () => age,
    setName: (newName) => { name = newName; },
    setAge: (newAge) => { age = newAge; },
  };
})();

console.log(person.getName()); // 'John Doe'
person.setName('Jane Doe');
console.log(person.getName()); // 'Jane Doe'

在本示例中，person 对象使用闭包来封装 name 和 age 变量，仅允许通过 getName()、getAge()、setName() 和 setAge() 方法访问和修改这些变量。

继承：扩展对象的功能

继承允许创建新的对象，这些对象继承自现有对象的属性和方法。JavaScript 中可以通过原型委托或类来实现继承。

原型委托

const person = {
  name: 'John Doe',
  age: 30,
};

const employee = Object.create(person);
employee.salary = 50000;

// 添加新方法
employee.getSalary = () => this.salary;

console.log(employee.getSalary()); // 50000

在本示例中，employee 对象继承了 person 对象的属性和方法，并添加了一个 getSalary() 方法。

类（ES6）

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

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

  getSalary() {
    return this.salary;
  }
}

const employee = new Employee('Jane Doe', 30, 50000);

console.log(employee.getName()); // 'Jane Doe'
console.log(employee.getSalary()); // 50000