jsliang 求职系列 – 45 – 设计模式系列汇总

一 目录

不折腾的前端，和咸鱼有什么区别

二 前言

设计模式是一门学问，它里面有 22+ 种类的设计模式。

淡淡忧伤：你尽管学，过几个月忘了回来再看看你还懂不懂。

前端面试中，常见的你可以回答的设计模式如下：

当然，如果你还了解其他，那就更好了~

三 面向对象

在开始复习设计模式之前，我们回顾下面向对象。

什么是面向对象，我们可以和面向过程比对一下：

• 面向过程：关注的是过程中的每一个环节

• • 吃蛋炒饭（单身狗版）：买鸡蛋 → 买米 → 蒸米 → 炒蛋 → 炒米 → 混合 → 搅拌 → 蛋炒饭

• 面向对象：关注的是让对象做事情

• • 吃蛋炒饭（情侣版）：找一个对象，做蛋炒饭，你吃蛋炒饭

现实可能不会扎你的心，但是 jsliang 会。

jsliang 也是单身汪，所以扎你们前先扎了自己，不慌，一起扎心

面向对象（Object Oriented Programming，简称 OOP），是一种编程开发思想。

它将真实世界各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。

1. 现实需求（盖大楼）

2. 需要哪些对象（设计师、搬运工、砌墙师、木匠、导购…）

3. 分工与合作

4. 完成项目

这就好比你要完成一个项目，你可以会配置 Webpack + Babel，并且用上 React 和 Ant Design。

那么 Webpack 由什么组成呢，你又可以将其拆分开，填充一个一个 和 ，最终由一个个小组件组合成一个项目。

简单来说：面向对象关心的不是过程，关心的是哪个部分找谁来完成。

面向对象有三大特性：封装、基础和多态，下面我们一一介绍。

3.1 封装

假设我们需要判断目标类型：

面向过程写法

这就好比今天亲戚 A 找你办事，明天亲戚 B 找你办事，后天亲戚 C 找你办事，但是他们要你帮忙做的是查一下某某明星。

烦不烦，为啥别家亲戚是介绍相亲，你家亲戚是介绍明星。

于是你想了个法子：

面向对象写法

当你让亲戚用你写的 “千度” 软件去查找之后，世界瞬间安静了，恭喜你完成了宅男的特性的维护。

咳咳，话回正题，其实这就是封装了。

想必看到这里小伙伴也不会陌生，日常工作中，碰到出现多次的代码，一般都会采取封装方式将代码抽取出来。

封装的好处：封装的优势在于定义只可以在类内部进行对属性的操作，外部无法对这些属性指手画脚，要想修改，也只能通过你定义的封装方法。

3.2 继承

离职期间，jsliang 每天晚上因为找不到工作而疲惫的时候，都会幻想我老爸是千万富翁，其实让我工作只是为了让我能承受考验，最后是要回家继承资产的~

没错，这个继承和你想的继承差不多，就是有一个方法 ，然后 继承 账目上的内容。

注意是账目上，就是说 的静态属性和静态方法并不会继承，就好比你继承资产就够了，不需要继承父辈的不良嗜好（抽烟喝酒）。

哆嗦无益，咱看代码。

3.2.1 ES5 写法

ES5 写继承的话，这里来一个手写继承的方式吧，用的是 寄生组合式继承。

这是一个面试考点，就是考你能不能手写继承。

当然还有其他的继承方式，这是 jsliang 找到的一个较为完善的继承方法。

3.2.2 ES6 写法

特别提醒：继承会继承父类的实例属性和实例方法，并不会继承静态属性和静态方法，并且静态方法只能通过类名去调用。

继承的好处：继承减少了代码的冗余，省略了很多重复代码，开发者可以从父类底层定义所有子类必须有的属性和方法，以达到耦合的目的；

3.3 多态

多态，可以简单理解为继承过来并对其有自己的理解。

多态具体表现为方法重载和方法重写：

• 方法重载：重载是指不同的函数使用相同函数名，但是函数的参数个数或者类型不同。调用的时候根据函数的参数来区分不同的函数。

• 方法重写：重写（也叫覆盖）是指派生类中重新对基类中的虚函数重新实现。即函数名和参数都一样，只是函数的实现体不一样。

下面我们来个多态之 方法重写 的 ES5 和 ES6 写法。

3.3.1 ES5 写法

3.3.2 ES6 写法

来源：JavaScriptLiang