一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。 一、面向对象的介绍
一、面向对象三大特征(继承)
面向对象三大特征 :
1. 封装 : 把代码放入对象的方法中
2. 继承 : 一个对象(子对象) 拥有 另一个对象(父对象) 所有的成员
* js主要用继承
3. 多态 : 一个对象不同情况下的不同状态
* 多态是java语言特长，js基本不涉及
重点：原型继承 : 把父对象 作为 子对象构造函数原型
二、原型链
1、介绍原型链 : 每一个实例对象都有自己的原型,而原型也是对象,也有自己的原型,以此类推形成链式结构。称之为原型链。
2、访问原则就近原则
- 对象优先访问自己的属性，自己没有才会访问原型，原型也没有就访问原型的原型，以此类推直到原型链终点(null),如果还没有。 属性则获取undefined, 方法则报错 xxx is not a function
3、原型链作用
继承
4.查看date的原型链
- 细节: js中有部分对象无法用 log来打印的: dom对象、函数、日期 如果想查看堆内存结构，就可以使用 console.dir()
5、instanceof运算符
instanceof运算符 : 检测某个构造函数prototype 在不在实例对象的原型链上
语法 : 实例对象 instanceof 构造函数
true: 在 false:不在
instanceof运算符原理。 检测右边构造函数prototype 是否在左边实例对象的原型链中
三、原型链的封装 （ps直接上代码）
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>面向对象封装消息提示</title>
<style>
.modal {
width: 300px;
min-height: 100px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 4px;
position: fixed;
z-index: 999;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
background-color: #fff;
}
.modal .header {
line-height: 40px;
padding: 0 10px;
position: relative;
font-size: 20px;
}
.modal .header i {
font-style: normal;
color: #999;
position: absolute;
right: 15px;
top: -2px;
cursor: pointer;
}
.modal .body {
text-align: center;
padding: 10px;
}
.modal .footer {
display: flex;
justify-content: flex-end;
padding: 10px;
}
.modal .footer a {
padding: 3px 8px;
background: #ccc;
text-decoration: none;
color: #fff;
border-radius: 2px;
margin-right: 10px;
font-size: 14px;
}
.modal .footer a.submit {
background-color: #369;
}
</style>
</head>
<body>
<button id="btn1">消息提示1</button>
<button id="btn2">消息提示2</button>
<button id="btn3">消息提示3</button>
<button id="btn4">消息提示4</button>
<!-- <div class="modal">
<div class="header">提示消息 <i>x</i></div>
<div class="footer">
<img src="./111.jpg" alt="" width="80%">
</div>
</div> -->
<script>
/* 学习目标: 原型链 作用是 实现继承 */
/* 文本模态框 */
//1.模态框构造函数
function Modal(title, message) {
this.title = title
this.message = message
this.modalBox = `
<div class="modal">
<div class="header">${this.title} <i>x</i></div>
<div class="body">
${this.message}
</div>
</div>
`
}
//2.模态框原型
Modal.prototype.open = function () {
//(1)创建空标签
let div = document.createElement('div')
div.innerHTML = this.modalBox
document.body.appendChild(div)
//(2)注册点击关闭事件
div.querySelector('i').onclick = function () {
document.body.removeChild(div)
}
}
//modal的eat
Modal.prototype.eat = function () {
console.log('我是modal的eat')
}
/* 图片模态框 */
function PicModal(title, src) {
this.title = title
this.src = src
this.modalBox = `
<div class="modal">
<div class="header">${this.title} <i>x</i></div>
<div class="footer">
<img src="${this.src}" alt="" width="100%">
</div>
</div>
`
}
/* PicModal继承modal的open方法
原型继承 : 把父对象实例 作为 子对象构造函数原型
(1)Modal.prototype 有自己的eat
(2)如果把父对象原型 作为 子对象原型。 只要给子对象原型添加eat就会覆盖Modal原来的eat
(3)如果把父对象实例 作为 子对象原型。 给子对象原型添加eat,本质是给父对象实例添加。不会污染Modal原来的eat
*/
PicModal.prototype = new Modal()
/* 给PicModal的原型添加自己的方法 */
PicModal.prototype.eat = function () {
console.log('吃东西')
}
document.querySelector('#btn1').onclick = function () {
//创建modal实例
let m1 = new Modal('友情提示', '登录成功')
console.log(m1)
/* 创建modal只是在内存创建,还没有添加到dom树。 要想在页面看到弹窗，需要添加到dom树 */
m1.open()
}
document.querySelector('#btn2').onclick = function () {
//创建modal实例
let m2 = new Modal('提示消息', '您的订单已提交')
//展示模态框
m2.open()
}
document.querySelector('#btn3').onclick = function () {
//创建PicModal实例
let p1 = new PicModal('提示信息', './111.jpg')
console.log(p1)
p1.open()
}
document.querySelector('#btn4').onclick = function () {
//创建PicModal实例
let p2 = new PicModal('我是标题', './222.jpg')
console.log(p2)
p2.open()
}
</script>
</body>
</html>
四、原型链的封装
1、arguments介绍
arguments : 获取函数所有的实参
1.1 是一个伪数组：有数组三要素，不能调用数组方法
2、剩余(rest)参数 : 获取函数剩余的参数
语法: function(...形参名){}
注意点: 是一个真数组,剩余参数必须写在末尾位置
rest应用 : 一般情况下, rest可以取代arguments
3、函数默认参数
function fn(a = 10, b = 20) {
//ES5: 默认参数 逻辑或短路
//找真 : 左边为真则返回左边式子的值,反之则返回右边式子的值
// a = a || 10
// b = b || 20
console.log(a, b)
console.log(a + b)
}
fn(5)//a = 5 b = 20
fn(1, 2)//a = 1 b = 2
