一、编程思想
1.1 面向过程编程
面向过程
就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了。
举个例子:蛋炒饭。
![](https://i-blog.csdnimg.cn/blog_migrate/8cd7c7eafb2c42f5a09e63102c487001.png)
面向过程,就是按照我们分析好了的步骤,按照步骤解决问题。
1.2 面向对象编程 (oop)
面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。
举个例子:盖浇饭
![](https://i-blog.csdnimg.cn/blog_migrate/10155b412ff03e57423c81c621ff9537.png)
面向对象是以对象功能来划分问题,而不是步骤。
在面向对象程序开发思想中,每一个对象都是功能中心,具有明确分工。
面向对象编程具有灵活、代码可复用、容易维护和开发的优点,更适合多人合作的大型软件项目。
面向对象的特性: 封装性、 继承性、 多态性。
1.3 面向过程和面向对象的对比
(1)面向过程编程
优点:
性能比面向对象高,适合跟硬件联系很紧密的东西,例如单片机就采用的面向过程编程。
缺点:
没有面向对象易维护、易复用、易扩展
(2)
面向对象编程
优点:
易维护、易复用、易扩展,由于面向对象有封装 、继承、多态性的特性,可以设计出低耦合的系统,使系统 更加灵活、更加易于维护。
缺点:
性能比面向过程低。
二 、构造函数
封装是面向对象思想中比较重要的一部分,js面向对象可以通过构造函数实现的封装。
同样的将变量和函数组合到了一起并能通过 this 实现数据的共享,所不同的是借助构造函数创建出来的实例对象之间是彼此不影响的。
![](https://i-blog.csdnimg.cn/blog_migrate/ee18bab6c941e52a4c3860b56ce076af.png)
总结:
1. 构造函数体现了面向对象的封装特性
2. 构造函数实例创建的对象彼此独立、互不影响
封装是面向对象思想中比较重要的一部分,js面向对象可以通过构造函数实现的封装。
前面我们学过的构造函数方法很好用,但是
存在浪费内存的问题
![](https://i-blog.csdnimg.cn/blog_migrate/9412cb4cb47229e6477109c94d486992.png)
三、原型
3.1 原型
构造函数通过原型分配的函数是所有对象所
共享的。
JavaScript 规定,
每一个构造函数都有一个prototype 属性
,指向另一个对象,所以我们也称为原型对象
这个对象可以挂载函数,对象实例化不会多次创建原型上函数,节约内存
我们可以把那些不变的方法,直接定义在 prototype 对象上,这样所有对象的实例就可以共享这些方法。
构造函数和原型对象中的this 都指向 实例化的对象
![](https://i-blog.csdnimg.cn/blog_migrate/cd347b408fed9685e0e4dfb6b312cb8c.png)
原型- this指向
构造函数和原型对象中的this 都指向 实例化的对象
![](https://i-blog.csdnimg.cn/blog_migrate/0f45ad109467966bda304c21f34f6188.png)
![](https://i-blog.csdnimg.cn/blog_migrate/173463b798d6101e19fdde61d1aebd12.png)
3.2 constructor 属性
每个原型对象里面都有个constructor 属性(constructor 构造函数)
作用:
该属性
指向
该原型对象的
构造函数, 简单理解,就是指向我的爸爸,我是有爸爸的孩子。
![](https://i-blog.csdnimg.cn/blog_migrate/47932bafe63682d2cd403d8b743e88a0.png)
使用场景:
如果有多个对象的方法,我们可以给原型对象采取对象形式赋值.
但是这样就会覆盖构造函数原型对象原来的内容,这样修改后的原型对象 constructor 就不再指向当前构造函数了
此时,我们可以在修改后的原型对象中,添加一个 constructor 指向原来的构造函数。
![](https://i-blog.csdnimg.cn/blog_migrate/c43bd67e00b59489dda2969bac869e8c.png)
思考:
构造函数可以创建实例对象,构造函数还有一个原型对象,一些公共的属性或者方法放到这个原型对象身上,但是 为啥实例对象可以访问原型对象里面的属性和方法呢?
![](https://i-blog.csdnimg.cn/blog_migrate/b948277960a0081a6bfd5196630113f0.png)
3.3 对象原型
对象都会有一个属性 __proto__
指向构造函数的 prototype 原型对象,之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法,就是因为对象有 __proto__ 原型的存在。
![](https://i-blog.csdnimg.cn/blog_migrate/624daa80187bd22784e569dc53baf299.png)
注意:
(1)__proto__ 是JS非标准属性
(2)[[prototype]]和__proto__意义相同
(3)用来表明当前实例对象指向哪个原型对象prototype
(4)__proto__对象原型里面也有一个
constructor属性,
指向创建该实例对象的构造函数
![](https://i-blog.csdnimg.cn/blog_migrate/33032325c21b731ac49f77bba30933c0.png)
3.4 原型继承
继承是面向对象编程的另一个特征,通过继承进一步提升代码封装的程度,JavaScript 中大多是借助原型对象实现继承的特性。
![](https://i-blog.csdnimg.cn/blog_migrate/a6d2e89e1088f7b08ec7305e7cb9de9d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b38171e8348dc116b5258ddf4fab5cf3.png)
1. 封装-抽取公共部分
把男人和女人公共的部分抽取出来放到人类里面。
2. 继承-
让男人和女人都能继承人类的一些属性和方法
把男人女人公共的属性和方法抽取出来 People
然后赋值给Man的原型对象,可以共享这些属性和方法
注意让constructor指回Man这个构造函数
![](https://i-blog.csdnimg.cn/blog_migrate/84858b292a74143fddbd3fdb4fe89d03.png)
男人和女人都同时使用了同一个对象,根据引用类型的特点,他们指向同一个对象,修改一个就会都影响。
![](https://i-blog.csdnimg.cn/blog_migrate/78eace83e7d3adfe609915e940fdfb56.png)
需求:男人和女人不要使用同一个对象,但是不同对象里面包含相同的属性和方法
答案:构造函数
new 每次都会创建一个新的对象。
![](https://i-blog.csdnimg.cn/blog_migrate/4c7c37b9d05a6b7ebc68aaca87c55776.png)
3. 继承写法完善
![](https://i-blog.csdnimg.cn/blog_migrate/c6041f32bb9cfa676d9d2c79f18de8de.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1a355167ed5fe6a50df09774f2653dc0.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5dc497508c090dc0e8d6f059c443fe65.png)
思路:
1.
人类共有的属性和方法有那些,然后做个构造函数,进行封装,一般公共属性写到构造函数内部,公共方法,挂载到构造函数原型身上。
2.
男人继承人类的属性和方法,之后创建自己独有的属性和方法
3.
女人同理
3.5 原型链
基于原型对象的继承使得不同构造函数的原型对象关联在一起,并且这种关联的关系是一种链状的结构,我们将原型对象的链状结构关系称为原型链。
![](https://i-blog.csdnimg.cn/blog_migrate/ed0ee81079fc7f02e74f84c8aa2c997e.png)
原型链-查找规则
①
当访问一个对象的属性(包括方法)时,首先查找这个
对象自身
有没有该属性。
②
如果没有就查找它的原型(也就是 __proto__指向的
prototype 原型对象
)
③
如果还没有就查找原型对象的原型(
Object的原型对象
)
④
依此类推一直找到 Object 为止(
null
)
⑤
__proto__对象原型的意义就在于为对象成员查找机制提供一个方向,或者说一条路线
⑥
可以使用
instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上