什么是面向对象与设计模式

面向对象

对于面向对象的理解，千人千面，不同的人有不同的解读，这里就以我个人所了解的知识给大家解释一下面向对象。

历史角度

我们先从历史的角度去看！

计算器在发明之初，处理的能力是有限的，所有的代码编辑都需要根据“机器语言（二进制）”来进行编写。这显然非常痛苦。

那么如果我们把二进制换成一个个单词（助记符单词），是不是又更好一点了呢，于是“汇编语言”诞生了，但是使用上也就被机器语言强那么一点点。

那么有没有比汇编语言更好用的呢？

于是面向过程的C语言出现了，c的位置处于机器与人的中间点，既没有偏向人的思维模式，也没有偏向机器语言思维。

可以说c语言的底层结构是机器语言，但是它将机器语言封装成自己的语法，通过自己的语法去调用机器语言。它只需分析解决问题的步骤，然后一步一步实现，使用的时候一个个依次调用。

由于面向过程本身不需要去实例化对象，因此它的开销很小，相对于的性能也更好。

但当我们的项目越来越庞大的时候，面向过程的短板也越来越明显，复用性、可维护性、扩展性；这些都成为现在选择语言的标准。

那么，有没有符合上述三个要求的编程语言呢？

当然是有的，这个就是面向对象编程，面向对象也是一种人的思维模式，只是在生活中我们不仔细去品味的话很容易忽视。

就以这张汽车的图为例：

我们观察到这个汽车，可以在脑海里想象一下汽车的组成。

在机器的眼中，图片可能就是一个个二进制数据，但是在人的眼中，他是不一样的

举个例子：

1. 四个车轮
2. 一个车体

就可以组成一辆车，也可以是：

1. 车轮
2. 发动机
3. 车体
4. 变速箱
5. 方向盘
6. ...等等

当他们组装到一起，相互关联后，组成了汽车，汽车这个整体就可以理解为一个对象，当我们将这种思维模式放在代码上时，它就是面向对象的编程逻辑。

比如我有一个需求，我需要在网页上利用canvas画布绘制一个汽车，那么我们也可以利用这种思维模式，将需要的功能抽象出来，拆分成不同的模块，模块之间逻辑隔离，通过某些方法连接，最后组装到一起，最后调用这个一个对象就可以实现了。

一个封装的集合总是会比一堆零散的方法调用会好的多。

代码角度

在讲之前先抛出一个疑问：js是基于对象还是面向对象？

基于对象： 事先创建好一个对象，然后根据这个对象进行扩展

面向对象： 现有一个抽象的类，通过类实例化一个对象

如何判定一个编程语言是否是面向对象编程语言？

严格角度来看需要支持四大特性：封装、继承、多态和抽象，如果放宽要求的话，只要某种编程语言支持类、对象语法类，那基本就可以说这种编程语言是面向对象编程语言了。

目前js支持：封装、继承、多态，抽象则只有使用ts来实现。

面向对象编程和面对象语言之间的关系

面向对象编程一般使用面向对象语言开发，但是，不用面向对象语言也能面向对象编程，反过来讲，你使用面向对象语言，写出的代码也可以是面向过程风格。

类

面向对象自然是离不开类的支持，在js早期是没有类的概念的，我们如果需要创建一个对象，就需要使用构造函数去生成，es6之后提供了class语法，但这个class和java这种语言的class是不一样的，咱们的只是语法糖而已，让你更好的去理解语法。

为什么咱们的class不一样？

这个就需要了解目前面向对象语言设计的两大流派：

1. java是主流的用类的方式来描述对象
2. js使用的是原型方式

不同的设计导致实现的方式不同。

1.封装特性：

解释：将代码及其处理的数据绑定在一起的一种编程机制，该机制保证了程序和数据都不受外部干扰且不被误用。

有一个需求，实现一个雨刮器的功能：

class Wiper {
    //启动雨刮器
    start() {}

    //关闭雨刮器
    stop() {}
}

封装了两个方法到Wiper类中

2. 继承特性：

解释：是一个对象获得另一个对象的属性的过程

我开发了一种新的雨刮器，他有一个快速档位

class Wiper {
    //启动雨刮器
    start() {}

    //关闭雨刮器
    stop() {}
}

class SuperWiper extends Wiper {
    //快速档位
    fast() {}
}

3. 多态特性

解释：是允许一个接口被多个同类动作使用的特性。

这里我举个例子：

雨刮器最基本的功能就是启动，关闭，快速。如果我是一家新的厂商，我虽然做的功能是一样，但是我的体验不一样，我可以start启动雨刮时让雨刮的速度更快一些，fast的时候慢一些。

同一个方法拥有不同的实现。

class Wiper {
    //启动雨刮器
    start() {}

    //关闭雨刮器
    stop() {}

    //快速档位
    fast() {}
}

//标准雨刮器
class MyWiper extends Wiper {
    //启动雨刮器
    start() {
        console.log('启动雨刮器,每秒1次');
    }

    //关闭雨刮器
    stop() {
        console.log('停止雨刮器');
    }

    //快速档位
    fast() {
        console.log('启动雨刮器,每秒2次');
    }
}

//极速雨刮器
class FastWiper extends Wiper {
    //启动雨刮器
    start() {
        console.log('启动雨刮器,每秒3次');
    }

    //关闭雨刮器
    stop() {
        console.log('停止雨刮器');
    }

    //快速档位
    fast() {
        console.log('启动雨刮器,每秒5次');
    }
}

到了这里，我们可以知道js是可以实现面向对象语言所需要的功能，所以js的确确一门正宗的面向对象语言，只流派不同。上面的疑问就可以解除了。

小结

面向对象可以理解为两方面，一方面是编程思维，一方面是编程语言。

什么是设计模式

可以理解为代码界考试的标准答案，是先辈程序员针对开发中遇到的问题提出的大家公认且行之有效的解决方案。

解决编程里某类问题的通用模板，总结出来就是设计模式。

但是设计模式也是有适用范围的，它适用于面向对象编程语言，对于面向过程语言，谈论设计模式是没有意义的。

目前有23种设计模式，前端不一定全部用的到，有些模式js也不一定能很好的表达，所以不要强行去学，而是要理解它的思维模式。