当前位置：首页 > 文章列表 > 文章 > 前端 > 面向对象编程（OOP）：通过清晰的示例理解支柱

面向对象编程（OOP）：通过清晰的示例理解支柱

来源：dev.to 2024-12-01 11:25:02 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

本篇文章给大家分享《面向对象编程（OOP）：通过清晰的示例理解支柱》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

嘿开发者！今天我们要讨论的是面向对象编程（oop）。这种范例对于使用“对象”组织数据和行为至关重要。如果您正在准备求职面试，掌握这些概念会让一切变得不同。

我们将以清晰实用的方式探索 oop 的四大支柱，并举例帮助您轻松理解一切。

什么是面向对象编程？

oop 基于四个主要支柱：

封装
继承
多态性
抽象

让我们通过 javascript 示例仔细研究一下每个支柱。

1. 封装

封装就像将您的物品存放在一个盒子里。您将所需的一切放入其中并控制谁可以访问它。这有助于保护存储的数据并确保对象的内部状态保持安全。

例子：

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

    // public method
    displayinfo() {
        return `${this.name}, ${this.age} years old`;
    }

    // private method
    _checkage() {
        return this.age >= 18 ? 'an adult' : 'a minor';
    }

    displaystatus() {
        return `${this.name} is ${this._checkage()}.`;
    }
}

const user = new user('alice', 22);
console.log(user.displayinfo()); // alice, 22 years old
console.log(user.displaystatus()); // alice is an adult

在此示例中，_checkage 是不应直接访问的方法。它在内部用于帮助确定用户的状态，同时保持逻辑有序。

2. 继承

继承允许一个类（子类）从另一个类（超类）继承属性和方法。这使得重用代码和创建类层次结构变得更加容易。

例子：

class animal {
    constructor(name) {
        this.name = name;
    }

    makesound() {
        return `${this.name} makes a sound.`;
    }
}

class dog extends animal {
    makesound() {
        return `${this.name} barks.`;
    }
}

class cat extends animal {
    makesound() {
        return `${this.name} meows.`;
    }
}

const mydog = new dog('rex');
const mycat = new cat('mia');

console.log(mydog.makesound()); // rex barks.
console.log(mycat.makesound()); // mia meows.

这里，dog 和 cat 都继承自 animal。每个都实现了自己的声音，展示了继承如何允许自定义行为而不重复代码。

3、多态性

多态是不同对象以不同方式响应同一方法的能力。这允许具有相同名称的方法根据对象的类型具有不同的行为。

例子：

class shape {
    area() {
        return 0;
    }
}

class rectangle extends shape {
    constructor(width, height) {
        super();
        this.width = width;
        this.height = height;
    }

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

class circle extends shape {
    constructor(radius) {
        super();
        this.radius = radius;
    }

    area() {
        return math.pi * math.pow(this.radius, 2);
    }
}

const shapes = [new rectangle(10, 5), new circle(3)];

shapes.foreach(shape => {
    console.log(`area: ${shape.area()}`);
});

// output:
// area: 50
// area: 28.274333882308138

在这种情况下，矩形和圆形都有自己的面积方法，但根据形状类型调用相同的方法会产生不同的结果。这就是多态性的作用！

4. 抽象

抽象是隐藏复杂细节并仅暴露必要内容的过程。在 oop 中，这允许您使用对象而无需了解它们如何工作的所有复杂性。

例子：

class Car {
    constructor(brand, model) {
        this.brand = brand;
        this.model = model;
    }

    start() {
        console.log('Car started.');
    }

    stop() {
        console.log('Car stopped.');
    }
}

class ElectricCar extends Car {
    charge() {
        console.log('Electric car charging.');
    }
}

const myElectricCar = new ElectricCar('Tesla', 'Model 3');
myElectricCar.start(); // Car started.
myElectricCar.charge(); // Electric car charging.

这里，car 类提供了基本方法，而 electriccar 则添加了充电功能。您可以在不知道每个部件如何工作的情况下使用汽车 - 您只需要知道如何启动和充电。