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

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

前言

今天主要了解一下面向对象的三大特性在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

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