面向对象三大特性:
封装性
继承性
多态性
原型可以解决构造函数中浪费内存的问题
公共的属性写到构造函数里,公共的方法写到原型对象身上
constructor属性的作用是什么? 指向该原型对象的构造函数
对象都会有一个属性 _ _ proto _ _ 指向构造函数的 prototype 原型对象,之所以我们对象可以使用构造函数 prototype
原型对象的属性和方法,就是因为对象有 proto 原型的存在。
原型链
所有对象都有_ proto _,
只要是原型对象具有constructor,指向创造该原型对象的构造函数
模态框案例
<!DOCTYPE html>
<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="delete">删除</button>
<button id="login">登录</button>
<button id="add">新增</button>
<!-- <div class="modal">
<div class="header">温馨提示 <i>x</i></div>
<div class="body">您没有删除权限操作</div>
</div> -->
<script>
// 1.Modal 构造函数封装 - 模态框
function Modal(title = '', message = '') {
// 创建模态盒子
// 1.1创建div盒子
this.modalBox = document.createElement('div')
// 1.2给div标签添加类名为modal
this.modalBox.className = 'modal'
// 1.3modal 盒子内部填充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()
// 这个方法不用箭头函数,因为要用到this
// 把刚才创建的modalBox 显示到页面body中
document.body.append(this.modalBox)
// 要等着盒子显示出来,就可以绑定点击事件了
this.modalBox.querySelector('i').addEventListener('click', () => {
this.close()
})
}
// 3.给构造函数原型对象挂载close方法
Modal.prototype.close = function () {
this.modalBox.remove()
}
// 测试删除按钮
document.querySelector('#delete').addEventListener('click', () => {
const del = new Modal('温馨提示', '你没有删除权限')
// 实例对象调用open方法
del.open()
})
// 测试登录按钮
document.querySelector('#login').addEventListener('click', () => {
const login = new Modal('友情提示', '你还没有注册')
// 实例对象调用open方法
login.open()
})
// 测试新增按钮
document.querySelector('#add').addEventListener('click', () => {
const add = new Modal('强烈提示', '你没有新增权限')
// 实例对象调用open方法
add.open()
})
</script>
</body>
</html>