发表于： 2023-03-20 20:27:41
0 277
今天的js知识点：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 什么是原型链？ 原型链-查找规则
// 原型链通俗易懂的理解就是可以把它想象成一个链条，互相连接构成一整串链子！
// 而原型链中就是实例对象和原型对象之间的链接。每个函数都有一个prototype属性，
// 这个prototype属性就是我们的原型对象，我们拿这个函数通过new构造函数创建出来的实例对象，
// 这个实例对象自己会有一个指针(_proto_)指向他的构造函数的原型对象！
// 这样构造函数和实例对象之间就通过( _proto_ )连接在一起形成了一条链子。
function Person() {}
const ldh = new Person()
// console.log(Person.prototype.__proto__ === Object.prototype) // true
// console.log(ldh.__proto__ === Person.prototype) //true
// console.log(Object.prototype)
// console.log(Object.prototype.__proto__)
console.log('---------------------------------')
//instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
console.log(ldh instanceof Person) //true
console.log(ldh instanceof Object) //true
console.log(ldh instanceof Array) //false
console.log([1,2,3] instanceof Array) //true
console.log(Array instanceof Object) //teue
</script>
</body>
</html>
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.modal {
position: relative;
width: 300px;
height: 100px;
background-color: #fff3cd;
margin: 100px auto;
border-radius: 5px;
border: 1px solid #333333;
}
.header {
margin: 5px;
font-size: 20px;
}
.body {
font-size: 20px;
text-align: center;
line-height: 50px;
}
.modal i {
position: absolute;
top: -5px;
right: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<button id="delete">删除</button>
<button id="login">登录</button>
<button id="add">新增</button>
<!-- <div class="modal">-->
<!-- <div class="header">温馨提示<i>×</i></div>-->
<!-- <div class="body">您没有删除权限操作</div>-->
<!-- </div>-->
<script>
function Modal(tittle = '', message = '') {
// console.log(tittle,message)
//创建动态 modal 盒子
//1、创建div标签
this.malBox = document.createElement('div')
//2、给div标签添加类名modal
this.malBox.className = 'modal'
//3、modal盒子内部 填充 两个div标签且修改文字内容
this.malBox.innerHTML = `
<div class="header">${tittle}<i>×</i></div>
<div class="body">${message}</div>
`
console.log(this.malBox)
}
// new Modal('温馨提示','您没有删除权限操作')
// new Modal('友情提示','您还没有登录呢')
// 4、给构造函数原型对象挂载 open 方法
Modal.prototype.open = function () {
// 先判断页面中是否有modal盒子 如果有先删除，否则继续添加
const box = document.querySelector('.model')
box && box.remove()
// 注意这个方法不要用箭头函数
// 把刚才创建的 modalBox 显示到页面body中
document.body.append(this.malBox)
// 要等着盒子显示出来，就可以绑定点击事件了
this.malBox.querySelector('i').addEventListener('click', () => {
// 这个地方要用到箭头函数 close() 方法关闭
this.close()
})
}
// 给构造函数原型对象挂载 close 方法 close() 方法关闭
Modal.prototype.close = function () {
this.malBox.remove()
}
// 测试 点击一下删除按钮
document.querySelector('#delete').addEventListener('click', () => {
//先调用 Modal 构造函数
const del = new Modal('温馨提示','您没有删除权限操作')
// 实例对象调用 open 方法 open() 方法，是用指定的名称将指定的资源加载到浏览器上下文
del.open()
})
// 测试 点击一下登录按钮
document.querySelector('#login').addEventListener('click', () => {
//先调用 Modal 构造函数
const del = new Modal('友情提示','您还没有登录呢')
// 实例对象调用 open 方法 open() 方法，是用指定的名称将指定的资源加载到浏览器上下文
del.open()
})
// 测试 点击一下新增按钮
document.querySelector('#add').addEventListener('click', () => {
//先调用 Modal 构造函数
const del = new Modal('强烈提示','您没有新增权限')
// 实例对象调用 open 方法 open() 方法，是用指定的名称将指定的资源加载到浏览器上下文
del.open()
})
</script>
</body>
</html>
返回列表
评论