目录
本章节用的所有素材都可以自取哦：素材自取
1、编程思想
1.1 面向过程编程
目标：从生活例子了解什么是面向过程编程
面向过程 就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。
举个栗子：蛋炒饭
面向过程，就是按照我们分析好了的步骤，按照步骤解决问题。
1.2 面向对象编程 (oop)
目标：从生活例子了解什么是面向对象编程
面向对象
是把事务分解成为一个个对象，然后由对象之间分工与合作。
举个栗子：盖浇饭
面向对象是以对象功能来划分问题，而不是步骤。
在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工。
面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。
面向对象的特性：
封装性继承性多态性
继承：继承自拖拉机，实现了扫地的接口封装：无需知道如何运作，开动即可多态：平时扫地，天热当风扇重用：没用额外动力，重复利用了发动机能量多线程：多个扫把同时工作低耦合：扫把可以换成拖把而无须改动组件编程：每个配件都是可单独利用的工具适配器模式：无需造发动机，继承自拖拉机，只取动力方法代码托管：无需管理垃圾，直接扫到路边即可
1. 编程思想-面向过程和面向对象的对比
面向过程编程
优点： 性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。缺点： 没有面向对象易维护、易复用、易扩展
面向对象编程
优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统 更加灵活、更加易于维护
缺点：性能比面向过程低
生活离不开蛋炒饭，也离不开盖浇饭，选择不同而已，只不过前端不同于其他语言，面向过程更多
2、构造函数
封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现的封装。
同样的将变量和函数组合到了一起并能通过 this 实现数据的共享，所不同的是借助构造函数创建出来的实例对象之间是彼此不影响的
总结：
1. 构造函数体现了面向对象的封装特性2. 构造函数实例创建的对象彼此独立、互不影响
封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现的封装。前面我们学过的构造函数方法很好用，但是 存在浪费内存的问题
可以看到上面代码：
console.log(ldh.sing === zxy.sing) // false二者都是构造同一个方法，但是确实开辟了两个不同的空间，存在浪费空间的问题
我们希望所有的对象使用同一个函数，这样就比较节省内存，那么我们要怎样做呢？
3、原型
3.1 原型
目标：能够利用原型对象实现方法共享
构造函数通过原型分配的函数是所有对象所
共享的
。
JavaScript 规定，
每一个构造函数都有一个 prototype 属性
，指向另一个对象，所以我们也称为
原型对象
这个对象可以挂载函数，对象实例化不会多次创建原型上函数，节约内存
我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。
构造函数和原型对象中的this 都指向 实例化的对象
公共的方法写到原型对象身上~~~~
3.1 原型- this指向
目标：能够说出构造函数和原型对象中的this 指向
构造函数和原型对象中的this 都指向 实例化的对象
构造函数和原型里面的this指向 实例化的对象
Array 转 Object：
const arr = [1, 2, 3];
const obj = { ...arr }; // { 0: 1, 1: 2, 2: 3 }Object 转 Array：
const obj = { a: 1, b: 2, c: 3 };
const arr = Object.values(obj); // [1, 2, 3]
Object：适合存储键值对数据，尤其是键为非数字的情况。
Array：适合存储有序列表数据，尤其是需要频繁操作元素顺序或数量的场景。
const arr1 = [1, 2, 3]; // 字面量
const arr2 = new Array(1, 2, 3); // 构造函数
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3]-
底层原理：字面量
[]实际上是语法糖，JavaScript 引擎在底层会调用Array构造函数。 -
原型链：无论哪种方式创建的数组，都是
Array的实例
练习 给数组扩展方法
需求：
①：给数组扩展求最大值方法和求和方法
比如： 以前学过
const arr = [1,2,3]arr.reverse() 结果是 [3,2,1]扩展完毕之后：arr.sum() 返回的结果是 6
// 自己定义数组扩展方法 求和 和 最大值
// 1. 我们定义的这个方法 任何一个数组实例对象都可以使用
// 2. 自定义的方法写道 数组.prototype 身上
// Array是一个构造函数
const arr = [1, 2, 3]
Array.prototype.max = function () {
// 展开运算符
return Math.max(...this)
// 原型函数里面的this指向的实例对象
}
Array.prototype.min = function () {
// 展开运算符
return Math.min(...this)
// 原型函数里面的this指向的实例对象
}
console.log(arr.max()) // 3
console.log(arr.min()) // 1
// const arr = new Array(1, 2, 3)
// console.log(arr)
// 3.求和
Array.prototype.sum = function () {
return this.reduce((prev, item) => prev + item, 0)
}
console.log([1, 2, 3].sum()) // 6
console.log([1, 2, 3, 4, 5].sum()) // 153.2 constructor 属性
在哪里？
每个原型对象里面都有个constructor 属性（
constructor 构造函数
）
作用：
该属性
指向
该原型对象的
构造函数， 简单理解，就是指向我的爸爸，我是有爸爸的孩子
使用场景：
如果有多个对象的方法，我们可以给原型对象采取对象形式赋值.
但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了
此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。
// constructor在原型对象里面 也就是在prototype里面 单词 构造函数
function Star() {
}
// Star.prototype.sing() = function () {
// console.log('唱歌')
// }
// Star.prototype.donce() = function () {
// console.log('跳舞')
// }
// 这里相当于把protoytpe重新赋值了 因为constructor 消失了
Star.prototype = {
// 重新指回创造这个原型对象的 构造函数
constructor: Star,
sing: function () {
console.log('唱歌')
},
dance: function () {
console.log('跳舞')
}
}
console.log(Star.prototype) //此时就包含constructor
const ldh = new Star()
// console.log(Star.prototype)
// constructor 又指回构造函数
console.log(Star.prototype.constructor === Star) //trueconstructor属性的作用是指向该原型对象的构造函数
3.3 对象原型
对象都会有一个属性 __proto__
指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype原型对象的属性和方法，就是因为对象有 __proto__ 原型的存在。
注意：
__proto__ 是JS非标准属性[[prototype]]和__proto__意义相同用来表明当前实例对象指向哪个原型对象prototype__proto__对象原型里面也有一个 constructor属性， 指向创建该实例对象的构造函数
function Star() { }
const ldh = new Star()
console.log(ldh.__proto__ === Star.prototype) //true
console.log(ldh.__proto__)
console.log(Star.prototype)
console.log(Star.prototype.constructor === Star) //true
console.log(ldh.__proto__.constructor === Star.prototype.constructor) //true 总结：
1. prototype是什么？哪里来的？
原型（原型对象）构造函数都自动有原型
2. constructor属性在哪里？作用干啥的？
prototype原型和对象原型__proto__里面都有都 指向 创建实例对象/原型的 构造函数
3. __proto__属性在哪里？指向谁？
在实例对象里面指向原型 prototype
3.4 原型继承
继承是面向对象编程的另一个特征，通过继承进一步提升代码封装的程度，JavaScript 中大多是借助原型对象实现继承的特性。
龙生龙、凤生凤、老鼠的儿子会打洞描述的正是继承的含义。
1. 封装-抽取公共部分
把男人和女人公共的部分抽取出来放到人类里面
// 继续抽取 公共的部分放到原型上
const Person = {
eays: 2,
head: 1
}
// 女人 构造函数 想要继承Person
function Woman() {
}
// woman 通过原型来继承 Person
Woman.prototype = Person
// 指回原来的构造函数
Woman.prototype.constructor = Woman
const red = new Woman()
console.log(red.eays)
// 男人 构造函数 想要继承Person
function Man() {
}
Man.prototype = Person
Man.prototype.constructor = Man
const pink = new Man()
console.log(pink)2. 继承-让男人和女人都能继承人类的一些属性和方法
把男人女人公共的属性和方法抽取出来 People
然后赋值给Man的原型对象，可以共享这些属性和方法
注意让constructor指回Man这个构造函数
3. 问题：
如果我们给男人添加了一个
吸烟的方法
，发现女人自动也添加这个方法
--原因
男人和女人都同时使用了同一个对象，根据引用类型的特点，他们指向同一个对象，修改一个就会都影响
4. 解决：
需求：男人和女人不要使用同一个对象，但是不同对象里面
包含相同的属性和方法
答案：
构造函数
new 每次都会创建一个新的对象
// // 继续抽取 公共的部分放到原型上
// const Person = {
// eays: 2,
// head: 1
// }
// 由于我们要求结构一样，但是对象不一样，就采用构造函数
// new 对象
function Person() {
this.eyes = 2
this.head = 1
}
// 女人 构造函数 想要继承Person
function Woman() {
}
// woman 通过原型来继承 Person
// 每次new 产生的对象都是独一无二的
// 子类的原型 = new 父类
Woman.prototype = new Person()
// 指回原来的构造函数
Woman.prototype.constructor = Woman
// 给女人添加一个方法， 生孩子
// 由于Women 和 Man 都是继承了同一个类，
// 现在进行添加后，两者都会进行添加，因为用的是同一块内存空间
// 这里就相当于 对原型进行了修改
Woman.prototype.baby = function () {
console.log('宝贝')
}
const red = new Woman()
console.log(red)
// 男人 构造函数 想要继承Person
function Man() {
}
Man.prototype = new Person()
Man.prototype.constructor = Man
const pink = new Man()
console.log(pink)
思路
真正做这个案例，我们的思路应该是先考虑大的，后考虑小的
1.
人类共有的属性和方法有那些，然后做个构造函数，进行封装，一般公共属性写到构造函数内部，公共方法，挂载到构造函数原型身上。
2.
男人继承人类的属性和方法，之后创建自己独有的属性和方法
3.
女人同理
3.5 原型链
基于原型对象的继承使得不同构造函数的原型对象关联在一起，并且这种关联的关系是一种链状的结构，我们将原型对象的链状结构关系称为原型链
只要是对象就有 对象原型__proto__ 指向原型对象 --> Star.prototype只要是原型对象 ，里面就有constructor 指向创造该对象的 构造函数
3.5 原型链-查找规则
①
当访问一个对象的属性（包括方法）时，首先查找这个
对象自身
有没有该属性。
②
如果没有就查找它的原型（也就是 __proto__指向的
prototype 原型对象
）
③
如果还没有就查找原型对象的原型（
Object的原型对象
）
④
依此类推一直找到 Object 为止（
null
）
⑤
__proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线
⑥
可以使用
instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上
判断是否在该条链路上！！！
案例 消息提示对象封装
素材都可以自取哦：素材自取
目的： 练习面向对象写插件（模态框）
分析需求：
1. 定义模态框 Modal 构造函数，用来创建对象2. 模态框具备 打开功能 open 方法 （按钮点击可以打开模态框）3. 模态框 具备关闭功能 close 方法
问：
open 和 close 方法 写到哪里？
构造函数的原型对象上，共享方法
所以可以分为三个模块， 构造函数， open方法， close方法
步骤：
①：Modal 构造函数 制作
- 需要的公共属性： 标题（title）、提示信息内容（message） 可以设置默认参数- 在页面中创建模态框
(1) 创建div标签可以命名为：modalBox(2) div标签的类名为 modal(3) 标签内部添加 基本结构，并填入相关数据
①：open方法
- 写到构造函数的原型对象身上- 把刚才创建的modalBox 添加到 页面 body 标签中- open 打开的本质就是 把创建标签添加到页面中- 点击按钮， 实例化对象，传入对应的参数，并执行 open 方法
①：close方法
- 写到构造函数的原型对象身上- 把刚才创建的modalBox 从页面 body 标签中 删除- 需要注意，x 删除按钮绑定事件，要写到open里面添加因为open是往页面中添加元素，同时顺便绑定事件
有点难，建议看懂了多手敲三遍~~~~
// 1. Modal 构造函数封装 - 模态框
function Modal(title = '', message = '') {
console.log(title, message)
// 创建modal 模态框盒子
// 1.1 创建div标签
this.modalBox = document.createElement('div')
// 1.2 给div标签添加类名为modal
this.modalBox.className = 'modal'
// 1.3 modal盒子内部填充 2个div标签并且修改文字内容
this.modalBox.innerHTML = `
<div class="header">${title} <i>x</i></div>
<div class="body">${message}</div >
`
console.log(this.modalBox)
}
// new Modal('温馨提示', '您没有权限删除')
// new Modal('友情提示', '您还没有登录')
Modal.prototype.open = function () {
const box = document.querySelector('.modal')
box && box.remove()
document.body.append(this.modalBox)
// 要等着盒子显示出来才能进行关闭 就可以进行事件绑定了
this.modalBox.querySelector('i').addEventListener('click', () => {
// 这个地方需要用到箭头函数
// 这个this指向 实例对象，因为我们要关闭的是大盒子 modalBox
this.close()
})
}
// 3. 给构造函数原型对象挂载close 方法
Modal.prototype.close = function () {
this.modalBox.remove()
}
document.querySelector('#delete').addEventListener('click', () => {
const del = new Modal('温馨提示', '您没有权限删除')
del.open()
})
document.querySelector('#login').addEventListener('click', () => {
const log = new Modal('友情提示', '您没有登录！')
log.open()
})
document.querySelector('#add').addEventListener('click', () => {
const log = new Modal('友情提示', '您没有新增权限！')
log.open()
})
总结一下~本章节对我有很大收获，希望对你也是~~~~
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
