JS进阶——深入面向对象
1、编程思想
1.1 面向过程编程
面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的一次调用就可以了。
1.2 面向对象编程（oop）
面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作
- 在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工。
- 面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目
- 面向对象的特性：
- 封装性
- 继承性
- 多态性
1.3 面向过程和面向对象的对比
面向过程编程
优点：性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程
缺点：没有面向对象易维护、易复用、易扩展
面向对象编程
优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统更加灵活、更加易于维护
缺点：性能比面向过程低
2、构造函数
封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现的封装
同样的将变量和函数组合到了一起并能通过this实现数据的共享，所不同的是借助构造函数创建出来的实例对象之间是彼此不影响的
总结：
- 构造函数体现了面向对象的封装特性
- 构造函数实例创建的对象彼此独立、互不影响
封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现的封装
前面学过的构造函数方法很好用，但是存在浪费内存的问题。
3、原型
3.1 什么是原型
构造函数通过原型分配的函数是所有对象所共享的。
JavaScript规定，每一个构造函数都有一个prototype属性，指向另一个对象，所以也称为原型对象
这个对象可以挂载函数，对象实例化不会多次创建原型上函数，节约内存
可以把那些不变的方法，直接定义在prototype对象上，这样所有对象的实例就可以共享这些方法。
构造函数和原型对象中的this都指向实例化的对象
3.1.1 原型-this指向
构造函数和原型对象中的this都指向实例化的对象
3.1.2 给数组扩展方法
需求：
①：给数组扩展求最大值方法和求和方法
比如：以前学过
const arr = [1,2,3]
arr.reverse() 结果是[3,2,1]
扩展完毕之后：
arr.sum() 返回的结果是6
Document
3.2 constructor属性
每个原型对象里面都有个constructor属性（constructor构造函数）
作用：该属性指向该原型对象的构造函数，简单理解，就是指向我的爸爸，我是有爸爸的孩子
使用场景：
如果有多个对象的方法，可以给原型对象采取对象形式赋值
但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象constructor就不再指向当前构造函数了
此时，可以在修改后的原型对象中，添加一个constructor指向原来的构造函数
3.3 对象原型
对象都会有一个属性__proto__指向构造函数的prototype原型对象，之所以我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有__proto__原型的存在。
注意：
- __proto__是JS非标准属性
- [[prototype]]和__proto__意义相同
- 用来表明当前实例对象指向哪个原型对象prototype
- __proto__对象原型里面也有一个constructor属性，指向创建该实例对象的构造函数
总结：
1.prototype是原型（原型对象），构造函数都自动有原型
2.constructor属性在prototype原型和对象原型__proto__里面都有，都指向创建实例对象/原型的构造函数
3.__proto__属性指向原型prototype，在实例对象里面
3.3.1 练习 根据下面代码，请画图
需求：
①：利用画图工具，画出 构造函数 原型 实例对象 三者的关系
②：要求里面有__proto__和constructor的指向
③：并在代码打印验证指向正确
3.4 原型继承
继承是面向对象编程的另一个特征，通过继承进一步提升代码封装的程度，JavaScript中大多是借助原型对象实现继承的特性。
3.4.1 封装-抽取公共部分
把男人和女人公共的部分抽取出来放到人类里面
3.4.2 继承-让男人和女人都能继承人类的一些属性和方法
- 把男人女人公共的属性和方法抽取出来People
- 然后赋值给Man的原型对象，可以共享这些属性和方法
- 注意让constructor指回Man这个构造函数
3.4.3 问题：
如果我们给男人添加了一个吸烟的方法，发现女人自动也添加这个方法
3.4.4 问题：--原因
男人和女人都同时使用了同一个对象，根据引用类型的特点，他们指向同一个对象，修改一个就会都影响
3.4.5 解决
需求：男人和女人不要是使用同一个对象，但是不同对象里面包含相同的属性和方法
答案：构造函数
new每次都会创建一个新的对象
Document
3.5 原型链
基于原型对象的继承使得不同构造函数的原型对象关联在一起，并且这种关联的关系是一种链状的结构，我们将原型对象的链状结构关系称为原型链。
3.5.1 原型链-查找规则
4、综合案例
面向对象写插件（模态框）
分析需求：
1.多个模态框一样的，而且每次点击都会出来一个，怎么做呢？
构造函数。把模态框封装一个构造函数Modal，每次new都会产出一个模态框，所以点击不同的按钮就是在做new模态框，实例化
2.模态框有什么功能？打开功能（显示），关闭功能，而且每个模态框都包含着2个功能
open功能
close功能
这两个功能写到构造函数Modal的原型对象上，共享方法
分析需求：
1.定义模态框Modal构造函数，用来创建对象
2.模态框具备打开功能open方法（按钮点击可以打开模态框）
3.模态框具备关闭功能close方法
步骤：
①：Modal构造函数 制作
需要的公共属性：标题（title）、提示信息内容（message） 可以设置默认参数
在页面中创建模态框
（1）创建div标签可以命名为：modalBox
（2）div标签的类名为modal
（3）标签内部添加 基本结构，并填入相关数据
②：open方法
写到构造函数的原型对象身上
把刚才创建的modalBox添加到页面body标签中
open打开的本质就是把创建标签添加到页面中
点击按钮，实例化对象，传入对应的参数，并执行open方法
③：close方法
写到构造函数的原型对象上
把刚才创建的modalBox 从页面body标签中删除
需要注意，x删除按钮绑定事件，要写到open里面添加
因为open是往页面中添加元素，同时顺便绑定事件
④：BUG：多次点击会显示很多的模态框
解决：准备open显示的时候，先判断页面中有没有modal盒子，有就移除，没有就添加
面向对象封装消息提示