POO JavaScript 遗产 - JavaScript

简介

面向对象编程 (POO) 在 JavaScript 开发中是一个非常重要的概念。POO 是一种编程范式，可以使代码更加模块化、可重用和易于维护。JavaScript 是一种支持面向对象编程的语言，它通过原型和构造函数等概念来支持 POO。

原型

在 JavaScript 中，每个对象都有一个原型属性。原型是一个对象，其中包含一组属性和方法，可以在所有实例之间共享。JavaScript 通过原型链实现继承。当查找对象的属性或方法时，如果当前对象没有该属性或方法，则会沿着原型链往上查找，直到找到为止。

// 创建一个对象
const obj = {
  a: 1
};

// 原型对象
const prototypeObj = {
  b: 2
};

// 设置原型
Object.setPrototypeOf(obj, prototypeObj);

// 访问属性
console.log(obj.a); // 1
console.log(obj.b); // 2

构造函数

构造函数是一种特殊的函数，用于创建对象。使用 new 运算符调用构造函数时，会创建一个新的对象，并将该对象的原型设置为构造函数的原型。构造函数可以通过 this 关键字访问新对象的属性和方法。

// 创建一个构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 添加方法到原型
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}

// 创建对象
const person1 = new Person('Alice', 22);
const person2 = new Person('Bob', 30);

// 调用方法
person1.sayHello(); // Hello, my name is Alice and I am 22 years old.
person2.sayHello(); // Hello, my name is Bob and I am 30 years old.

继承

JavaScript 支持原型继承和类继承两种方式。原型继承是通过设置对象的原型实现的，而类继承是通过 class 关键字和 extends 关键字实现的。

原型继承

// 创建一个父对象
const parent = {
  action() {
    console.log('Parent action');
  }
};

// 创建一个子对象
const child = Object.create(parent);

// 调用方法
child.action(); // Parent action

类继承

// 创建一个父类
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

// 创建一个子类
class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

// 创建对象
const d = new Dog('Mitzie');
d.speak(); // Mitzie barks.

多态

多态是一种面向对象编程的概念，表示不同类型的对象可以共享相同的接口或抽象类，并在运行时表现出不同的行为。JavaScript 通过原型和函数重载等概念来支持多态。

// 创建一个父类
class Shape {
  getArea() {
    return 0;
  }
}

// 创建一个子类
class Square extends Shape {
  constructor(side) {
    super();
    this.side = side;
  }

  getArea() {
    return this.side * this.side;
  }
}

// 创建一个子类
class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }

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

// 调用方法
const shapes = [
  new Square(4),
  new Circle(1),
  new Square(5)
];

shapes.forEach(shape => console.log(shape.getArea()));

总结

JavaScript 支持 POO，可以使用原型和构造函数实现面向对象编程。JavaScript 也支持继承和多态等概念。如果想要编写模块化、可重用和易于维护的代码，POO 是一个非常重要的概念。