一、编程思想
1.1 面向过程编程
目标:从生活例子了解什么是面向过程编程
面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了。
举个栗子:蛋炒饭
面向过程,就是按照我们分析好了的步骤,按照步骤解决问题。
1.2 面向对象编程 (oop)
目标:从生活例子了解什么是面向对象编程
面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。
面向对象是以对象功能来划分问题,而不是步骤。
在面向对象程序开发思想中,每一个对象都是功能中心,具有明确分工。
面向对象编程具有灵活、代码可复用、容易维护和开发的优点,更适合多人合作的大型软件项目。
面向对象的特性:
封装性
继承性
多态性
编程思想-面向过程和面向对象的对比
面向过程编程
优点:性能比面向对象高,适合跟硬件联系很紧密的东西,例如单片机就采用的面向过程编程。
缺点:没有面向对象易维护、易复用、易扩展
面向对象编程
优点:易维护、易复用、易扩展,由于面向对象有封装、继承、多态性的特性,可以设计出低耦合的系统,使系统 更加灵活、更加易于维护。
缺点:性能比面向过程低
生活离不开蛋炒饭,也离不开盖浇饭,选择不同而已,只不过前端不同于其他语言,面向过程更多
二、构造函数
- 封装是面向对象思想中比较重要的一部分,js面向对象可以通过构造函数实现的封装。
- 样的将变量和函数组合到了一起并能通过 this 实现数据的共享,所不的是借助构造函数创建出来的实例对象之间是彼此不影响的
- 总结:
1.构造函数体现了面向对象的封装特性
2.构造函数实例创建的对象彼此独立、互不影响
前面我们学过的构造函数方法很好用,但是存在浪费内存的问题
<body>
<script>
// 构造函数 公共的属性和方法 封装到 Star 构造函数里面了
function Star(uname, age) {
this.uname = uname
this.age = age
this.sing = function(){
console.log('唱歌')
}
}
const ldh = new Star('刘德华', 55)
const zxy = new Star('张学友', 58)
console.log(ldh === zxy) //false
console.log(ldh.sing === zxy.sing) //false
</script>
</body>
- 总结
1.Js 实现面向对象需要借助于谁来实现?
构造函数
2.构造函数存在什么问题?
浪费内存
3.我们希望所有的对象使用同一个函数,这样就比较节省内存,那么我们要怎样做呢?
原型
三、原型
3.1 原型
目标:能够利用原型对象实现方法共享
- 构造函数通过原型分配的函数是所有对象所共享的。
- JavaScript 规定,每一个构造函数都有一个 prototype 属性,指向另一个对象,所以我们也称为原型对象
- 这个对象可以挂载函数,对象实例化不会多次创建原型上函数,节约内存
- 我们可以把那些不变的方法,直接定义在 prototype 对象上,这样所有对象的实例就可以共享这些方法。
- 构造函数和原型对象中的this 都指向实例化的对象
<body>
<script>
// 构造函数 公共的属性和方法 封装到 Star 构造函数里面了
// 1.公共的属性写到 构造函数里面
function Star(uname, age) {
this.uname = uname
this.age = age
// this.sing = function(){
// console.log('唱歌')
// }
}
// 2.公共的方法写到原型对象身上
Star.prototype.sing = function () {
console.log('唱歌')
}
const ldh = new Star('刘德华', 55)
const zxy = new Star('张学友', 58)
console.log(ldh === zxy) //false
console.log(ldh.sing === zxy.sing) //true
</script>
</body>
构造函数和原型对象中的this 都指向 实例化的对象
总结:
1.原型是什么 ?
一个对象,我们也称为 prototype 为原型对象
2.原型的作用是什么 ?
共享方法
可以把那些不变的方法,直接定义在 prototype 对象上
3.构造函数和原型里面的this指向谁 ?
实例化的对象
给数组扩展方法
需求:
①:给数组扩展求最大值方法和求和方法
比如: 以前学过
const arr = [1,2,3]
arr.reverse() 结果是 [3,2,1]
扩展完毕之后:
arr.sum() 返回的结果是 6
<body>
<script>
// 自己定义 数组拓展方法 求和 和 最大值
// 1.我们定义的这个方法,任何一个数组实例对象都可以使用
// 2.自定义的方法写到 数组.prototype 身上
// 1.最大值
const arr = [1,2,3]
Array.prototype.max = function () {
// 展开运算符
return Math.max(...this)
// 原型函数里面的this 指向谁? 实例对象 arr
}
// 2.最小值
Array.prototype.min = function () {
// 展开运算符
return Math.min(...this)
// 原型函数里面的this 指向谁? 实例对象 arr
}
console.log(arr.max())
console.log(arr.min())
console.log([2,5,9].max())
// 3.求和 方法
Array.prototype.sum = function(){
return this.reduce((prev, item) => prev + item, 0)
}
console.log([1, 2, 3].sum())
</script>
</body>
3.2 constructor 属性
在哪里? 每个原型对象里面都有个constructor 属性(constructor 构造函数)
作用:该属性指向该原型对象的构造函数, 简单理解,就是指向我的爸爸,我是有爸爸的孩子
使用场景:
如果有多个对象的方法,我们可以给原型对象采取对象形式赋值.
但是这样就会覆盖构造函数原型对象原来的内容,这样修改后的原型对象 constructor 就不再指向当前构造函数了
此时,我们可以在修改后的原型对象中,添加一个 constructor 指向原来的构造函数。
3.3 对象原型
思考
构造函数可以创建实例对象,构造函数还有一个原型对象,一些公共的属性或者方法放到这个原型对象身上
但是 为啥实例对象可以访问原型对象里面的属性和方法呢?
对象都会有一个属性 proto 指向构造函数的 prototype 原型对象,之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法,就是因为对象有 proto 原型的存在。
<body>
<script>
function Star() { }
const ldh = new Star()
console.log(ldh)
</script>
</body>
运行结果:
<body>
<script>
function Star() { }
const ldh = new Star()
// 对象原型__proto__指向 构造函数的原型对象
console.log(ldh.__proto__ === Star.prototype) //true
</script>
</body>
注意:
proto 是JS非标准属性
[[prototype]]和__proto__意义相同
用来表明当前实例对象指向哪个原型对象prototype
__proto__对象原型里面也有一个 constructor属性,指向创建该实例对象的构造函数
<body>
<script>
function Star() { }
const ldh = new Star()
// 对象原型__proto__指向 构造函数的原型对象
// console.log(ldh.__proto__ === Star.prototype) //true
console.log(ldh.__proto__.constructor === Star)
</script>
</body>
总结
1.prototype是什么?哪里来的?
原型(原型对象)
构造函数都自动有原型
2. constructor属性在哪里?作用干啥的?
prototype原型和对象原型__proto__里面都有
都指向创建实例对象/原型的构造函数
3. __proto__属性在哪里?指向谁?
在实例对象里面
指向原型 prototype
3.4 原型继承
继承是面向对象编程的另一个特征,通过继承进一步提升代码封装的程度,JavaScript 中大多是借助原型对象实现继承的特性。
龙生龙、凤生凤、老鼠的儿子会打洞描述的正是继承的含义。
我们来看个代码:
1. 封装-抽取公共部分
把男人和女人公共的部分抽取出来放到人类里面
2. 继承-让男人和女人都能继承人类的一些属性和方法
把男人女人公共的属性和方法抽取出来 People
然后赋值给Man的原型对象,可以共享这些属性和方法
注意让constructor指回Man这个构造函数
3. 问题:
如果我们给男人添加了一个吸烟的方法,发现女人自动也添加这个方法
4.问题:原因
男人和女人都同时使用了同一个对象,根据引用类型的特点,他们指向同一个对象,修改一个就会都影响
5. 解决:
需求:男人和女人不要使用同一个对象,但是不同对象里面包含相同的属性和方法
答案:构造函数
new 每次都会创建一个新的对象
6. 继承写法完善
7.思路
真正做这个案例,我们的思路应该是先考虑大的,后考虑小的
1.人类共有的属性和方法有那些,然后做个构造函数,进行封装,一般公共属性写到构造函数内部,公共方法,挂载到构造函数原型身上。
2. 男人继承人类的属性和方法,之后创建自己独有的属性和方法
3. 女人同理
<body>
<script>
// 继承抽取 公共的部分放在原型上
// const Person = {
// ears : 2,
// Head : 1,
// }
// 构造函数 new出来的对象 结构一样 但是对象不一样
function Person() {
this.eyes = 2
this.head = 1
}
// 女人 构造函数 想要继承 Person
function Woman(){
}
// Woman通过原型来继承 Person
// 父构造函数(父亲) 子构造函数(字类)
// 子类的原型 = new 父类
Woman.prototype = new Person()
// 指挥原来的构造函数
Woman.prototype.constructor = Woman
// 给女人添加一个方法 生孩子
Woman.prototype.baby = function() {
console.log('宝贝')
}
const red = new Woman()
console.log(red)
console.log(Woman.prototype)
// 男人 构造函数 想要继承 Person
function Man(){
}
// Man通过原型来继承 Person
Man.prototype = new Person()
// 指挥原来的构造函数
Man.prototype.constructor = Man
const pink = new Man()
console.log(pink)
console.log(Man.prototype)
</script>
</body>
3.5 原型链(高频面试题)
基于原型对象的继承使得不同构造函数的原型对象关联在一起,并且这种关联的关系是一种链状的结构,我们将原型对象的链状结构关系称为原型链
1.原型链-查找规则
① 当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性。
② 如果没有就查找它的原型(也就是 __proto__指向的 prototype 原型对象)
③ 如果还没有就查找原型对象的原型(Object的原型对象)
④ 依此类推一直找到 Object 为止(null)
⑤ __proto__对象原型的意义就在于
为对象成员查找机制提供一个方向,或者说一条路线
⑥ 可以使用 instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上
Array.prototype.map()
<body>
<script>
function Person(){
}
const ldh = new Person()
console.log(ldh instanceof Person) //true
console.log([1, 2, 3] instanceof Array) //true
</script>
</body>
四、综合案例
1.消息提示对象封装
目的: 练习面向对象写插件(模态框)
分析需求:
1.定义模态框 Modal 构造函数,用来创建对象
2.模态框具备 打开功能 open 方法 (按钮点击可以打开模态框)
3.模态框 具备关闭功能 close 方法
问:
open 和 close 方法 写到哪里?
构造函数的原型对象上,共享方法
所以可以分为三个模块, 构造函数, open方法, close方法
步骤:
①:Modal 构造函数 制作
需要的公共属性: 标题(title)、提示信息内容(message) 可以设置默认参数
在页面中创建模态框
(1) 创建div标签可以命名为:modalBox
(2) div标签的类名为 modal
(3) 标签内部添加 基本结构,并填入相关数据
需要的公共属性:标题(title)、提示信息内容(message)可以设置默认参数
2:open方法
写到构造函数的原型对象身上
把刚才创建的modalBox 添加到 页面 body 标签中
open 打开的本质就是 把创建标签添加到页面中
点击按钮, 实例化对象,传入对应的参数,并执行 open 方法
3:close方法
写到构造函数的原型对象身上
把刚才创建的modalBox 从页面 body 标签中 删除
需要注意,x 删除按钮绑定事件,要写到open里面添加
因为open是往页面中添加元素,同时顺便绑定事件
<body>
<button id="delete">删除</button>
<button id="login">登录</button>
<!-- <div class="modal">
<div class="header">温馨提示 <i>x</i></div>
<div class="body">您没有删除权限操作</div>
</div> -->
<script>
// 1.Modal构造函数封装 - 模态框
function Modal(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('友情提示', '您还没登陆呢')
// 2.给构造函数原型对象挂载open方法
Modal.prototype.open = function(){
// 先来判断页面中是否有modal盒子,如果有先删除,否则继续添加
const box = document.querySelector('.modal')
box && box.remove()
// 注意这个方法不要用箭头函数
// 把刚才创建的modalBox显示到页面body中
document.body.append(this.modalBox)
// 要等着盒子显示出来,就可以绑定点击事件了
this.modalBox.querySelector('i').addEventListener('click',() => {
// 这个地方需要用到箭头函数
// 这个this指向实例对象
this.close()
})
}
// 3.给构造函数原型对象挂载close方法
Modal.prototype.close = function(){
this.modalBox.remove()
}
// 测试以下点击 删除按钮
document.querySelector('#delete').addEventListener('click',() => {
// 先调用Modal构造函数
const del = new Modal('温馨提示', '您没有删除权限操作')
// 实例对象调用open方法
del.open()
})
// 测试以下点击 登录按钮
document.querySelector('#login').addEventListener('click',() => {
// 先调用Modal构造函数
const login = new Modal('友情提示', '您还没登陆呢')
// 实例对象调用open方法
login.open()
})
</script>
</body>