前端 js 代码如何实现面向对象编程

在前端JavaScript代码中实现面向对象编程的关键在于理解并运用其提供的面向对象特性，包括原型链、构造函数和ES6的类（Class）语法。JavaScript通过原型继承实现对象之间的继承关系，而构造函数用于创建具有相同属性和方法的多个对象实例。ES6的类语法提供了一种更清晰和简洁的方式来创建对象，它让面向对象编程更加接近传统的类式语言。这些概念结合，可以实现富有层次的对象模型与继承结构，使得代码的结构更为清晰，在大型项目上的可维护性和可扩展性大为提升。

一、理解对象和原型

JavaScript是一个基于原型的语言，这意味着它不使用类（class）来实现对象的继承，而是通过克隆已有的对象来创建新对象。在ES6之前，JavaScript使用构造函数和原型（prototype）来实现面向对象编程。

构造函数

构造函数充当对象的蓝图，通过使用new关键字来创建新的对象实例。构造函数首字母通常大写，以便区分常规函数和构造函数。

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.introduce = function() {
    console.log("My name is " + this.name + " and I am " + this.age + " years old.");
};
var person1 = new Person("Alice", 30);
person1.introduce(); // 输出: My name is Alice and I am 30 years old.

原型链

每个JavaScript对象都有一个内置的属性，即原型（prototype），它是对其他对象的引用。当试图访问一个对象的属性或方法时，JavaScript不仅在该对象上查找，还会在它的原型上查找，以及原型的原型，一直到最顶层的Object.prototype。

二、类（Class）语法

ES6引入了类（Class）这种新的语法糖，让JavaScript的面向对象编程更加类似于传统面向对象的编程语言以及更容易实现继承和代码复用。

类的声明

用class关键字可以声明一个类，在类中可以定义构造函数constructor以及其他的方法。类的方法默认添加到类的prototype属性上，而非类的实例上。

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    introduce() {
        console.log(`My name is ${this.name} and I am ${this.age} years old.`);
    }
}
let person2 = new Person("Bob", 25);
person2.introduce(); // 输出: My name is Bob and I am 25 years old.

继承

通过extends关键字，子类可以继承父类的属性和方法。子类中可以使用super关键字调用父类的构造函数和方法。

class Employee extends Person {
    constructor(name, age, jobTitle) {
        super(name, age);
        this.jobTitle = jobTitle;
    }
    introduce() {
        super.introduce();
        console.log(`I am an ${this.jobTitle}.`);
    }
}
let employee1 = new Employee("Charlie", 40, "Engineer");
employee1.introduce(); // 输出: My name is Charlie and I am 40 years old. I am an Engineer.

三、封装、继承、多态

面向对象编程的三大基本特征为封装、继承和多态。

封装

封装是面向对象编程中将数据（属性）和操作数据的代码（方法）打包在一起的概念，这样可以隐藏对象的具体实现细节。

class Car {
    constructor(brand) {
        this.brand = brand;
        this.speed = 0;
    }
    accelerating() {
        this.speed += 10;
        console.log(`${this.brand} is accelerating. Current speed: ${this.speed}.`);
    }
}

继承和多态

通过继承，子类可以继承父类的属性和方法，无需重新编写已有代码。多态允许我们将子类对象当作父类实例对待，同时根据实际的子类类型来执行相应的方法。

class ElectricCar extends Car {
    accelerating() {
        this.speed += 20; // 重写了父类的 accelerating 方法
        console.log(`${this.brand} is accelerating quickly. Current speed: ${this.speed}.`);
    }
}

四、使用模块化和构造函数模式

为了在更大的项目中保持代码的可维护性和扩展性，可以使用模块化和构造函数模式来组织代码。

模块化

使用模块化可以将代码分离到不同的文件中，使得项目结构更清晰，同时便于代码复用和管理。从ES6开始，JavaScript原生支持模块化。

// person.js
export class Person {
    constructor(name) {
        this.name = name;
    }
    sayHello() {
        console.log(`Hello, my name is ${this.name}.`);
    }
}
// mAIn.js
import { Person } from './person.js';
const person = new Person("Dave");
person.sayHello();

构造函数模式

在JavaScript中，构造函数模式是一种用于创建特定类型对象的技术。构造函数模式可以用来封装和管理相关的变量和函数。

function Book(title, author) {
    this.title = title;
    this.author = author;
    this.display = function() {
        console.log(`"${this.title}" by ${this.author}`);
    };
}
const book = new Book("1984", "George Orwell");
book.display();