面向对象三大特性和UML类图

Posted 2021-04-17 惊天码盗

所谓技术，就是用来解决现实问题的手段。

前言

今天主要了解一下面向对象的三大特性在JS中应用和怎么画一个简单的UML类图。

面向对象的三大特性

「 为什么要使用面向对象 」

在小说《我创造来世界》中，创建世界首先要创建的是生命，世界的本质就是不同生命之间的交流和竞争。在计算机这个虚拟的世界里，我们把生命称之为「对象」。

松本行弘在《代码的未来》中说：「 编程的本质是思考。编程的最大魅力就是能够按照自己的意愿来创建世界 」。那么面向对象就是我们首先要思考的。

在所有的编程语言中，程序的执行有三种方式： 顺序、判断、循环 ，我们把它称之为结构化。 面 向对象其实就是数据结构化 。数据是人要求计算机处理的内容，编程语言就是把这些数据解析成计算机可识别、可执行的。而对于计算机，只有结构化的东西才是最简单的。面向对象就是把零散的数据结构化。

在js中有两个常用的概念：「 类 」和「 实例 」。类相当于一个模版，比如我们常说的人类、种类等。实例就是通过类创建的对象，他是一个单独的个体。

class Persion {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    eat() {
        console.log(`${this.name} eat apple`);
    }
    speak() {
        console.log(`My name is ${this.name} , age ${this.age}`);
    }
}

let zhang = new Persion("zhang", 20);
zhang.speak();
//My name is zhang , age 20

let wang = new Persion("wang", 29);
wang.speak();
//My name is wang , age 29

接下来是面向对象的三大特性：继承、封装、多态。可能在业务中不常用，但是你必须知道。

「 继承」

子继承父类。父类的属性是公共的，继承可以将公共方法提取出来，提高复用率。

class Student extends Persion {
    constructor(name, age, gender) {
        super(name, age);
    }
}

let zhang = new Student("zhang", 20);
zhang.speak();
//My name is zhang , age 20

let wang = new Student("wang", 29);
wang.speak();
//My name is wang , age 29

「 封装」

数据的权限与保密。减少耦合，不该外露的不外露，对于封装有三个关键字需要了解：

• public:完全开放
  

• protected:对子类开放
  

• private:对自己开放

这三个关键字ES6目前还不支持，我们用Ts来示范。

class Persion {
    name; //默认是public
    public age;
    protected weight;
    constructor(name, age) {
        this.name = name;
        this.age = age;
        this.weight = 200;
    }
    speak() {
        console.log(`My name is ${this.name} , age ${this.age}`);
    }
}
class Student extends Persion {
    number;
    private friend; //外部取不到
    constructor(name, age, number) {
        super(name, age);
        this.friend = "Tom";
    }
    getWeight() {
        console.log(`weight is ${this.weight}`);
    }
}

let zhang = new Student("zhang", 20);
zhang.getWeight(); //可以取到父类的weight
console.log(zhang.name); //可以取到
console.log(zhang.weight); //外部取不到
//Property 'weight' is protected and only accessible within class 'Persion' and its subclasses.
console.log(zhang.friend); //外部取不到
//Property 'friend' is private and only accessible within class 'Student'.

「 多态」

同一接口的不同实现。保持子类的灵活性和开放性。

class Persion {
    constructor(name, age) {
        this.name = name;
        this.age = age;
        this.weight = 200;
    }
    speak() {
        console.log(`My name is ${this.name} , age ${this.age}`);
    }
}
class StudentA extends Persion {
    constructor(name, age) {
        super(name, age);
    }
    speak() {
        console.log(`I am StudentA`);
    }
}

class StudentB extends Persion {
    constructor(name, age) {
        super(name, age);
    }
    speak() {
        console.log(`I am StudentB`);
    }
}

let zhang = new StudentA("zhang", 20);
zhang.speak(); //I am StudentA
let wang = new StudentB("wang", 89);
wang.speak(); //I am StudentB

UML类图

UML-Unified Modeling Language  统一建模语言 ，又称 标准建模语言 。UML是在开发阶段，说明、可视化、构建和书写一个 面向对象 软件密集系统的制品的开放方法。

UML图的种类较多， 在这里我们只说 类图 ，类图是描述系统中的类，以及各个类之间的关系的静态视图。能够让我们在正确编写代码以前对 系统有一个全面的认识。类图是一种模型类型，确切的说，是一种静态模型类型。类图表示类、接口和它们之间的协作关系。

我们通过 Processon ( www.processon.com ) 来 创建。Processon可以画流程图、原型图、思维导图、UML、BPMN等等。

那么我们就根据代码画一个类图，来表明类之间的关系。

class Persion {
    constructor(name, house) {
    this.name = name;
    this.house = house;
    }
    speak() {
        this.house.showCity(this.name);
    }
}

class House {
    constructor(city) {
        this.city = city;
    }
    showCity(name) {
        console.log(`I am ${name},My house is in ${this.city}`);
    }
}
class StudentA extends Persion {
    constructor(name, house, weight) {
        super(name, house);
        this.weight = weight;
    }
    speak() {
        // console.log(`I am StudentA`);
        this.house.showCity(this.name);
    }
}

class StudentB extends Persion {
    constructor(name, house, number) {
        super(name, house);
        this.number = number;
    }
    speak() {
        // console.log(`I am StudentB`);
        this.house.showCity(this.name);
    }
}
let house = new House("beijing");
let zhang = new StudentA("zhang", house, "90");
zhang.speak();
//I am zhang,My house is in beijing
let wang = new StudentB("wang", house, 20);
wang.speak();
//I am wang,My house is in beijing

实线表示引用（关联），虚心线表示继承（泛化）。