2023年8月25日
1.通过构造函数创建对象的案例
<script>
// 创建对象的方法有三种
const o1 = {name: "张三"};
const o2 = new Object({name:"李四"});
function People(name){
this.name = name;
}
const o3 = new People("王五");
console.log(o1);
console.log(o2);
console.log(o3);
</script>
<!--和上面的代码原理相同-->
<script>
function Goods(name, price, count){
this.name = name;
this.price = price;
this.count = count;
};
const xiaomi = new Goods('小米', 1999, 20);
const huawei = new Goods('华为', 3999, 59);
const vivo = new Goods('vivo', 1888, 100);
console.log(xiaomi);
console.log(huawei);
console.log(vivo);
</script>
2.一个使用 Object 常用方法的一个小案例
<div></div>
<script>
const spec = {size:'40cm*40cm', color:'黑色'};
const div = document.querySelector('div');
div.innerHTML = Object.values(spec).join('/');
</script>
4.伪数组转为真数组的方法
<script>
// 众所周知，通过 querySelectorAll 拿到的是一个伪数组
const li = document.querySelectorAll('ul li');
const liPlus = Array.from(li);
liPlus.pop(); // 删除末尾元素
console.log(liPlus);
</script>
5.根据给出的数组利用数组相关方法，完成数据修改并输出到指定位置的案例
<p></p>
<script>
const gift = '50g茶叶,清洗球';
const p = document.querySelector('p');
p.innerHTML = gift.split(',').map(item => `<span class="tag">【赠品】${item}</span><br>`).join('');
</script>
6.基于各种方法，将给出的数据渲染到浏览器页面的案例
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.list {
width: 990px;
margin: 100px auto 0;
}
.item {
padding: 15px;
transition: all .5s;
display: flex;
border-top: 1px solid #e4e4e4;
}
.item:nth-child(4n) {
margin-left: 0;
}
.item:hover {
cursor: pointer;
background-color: #f5f5f5;
}
.item img {
width: 80px;
height: 80px;
margin-right: 10px;
}
.item .name {
font-size: 18px;
margin-right: 10px;
color: #333;
flex: 2;
}
.item .name .tag {
display: block;
padding: 2px;
font-size: 12px;
color: #999;
}
.item .price,
.item .sub-total {
font-size: 18px;
color: firebrick;
flex: 1;
}
.item .price::before,
.item .sub-total::before,
.amount::before {
content: "¥";
font-size: 12px;
}
.item .spec {
flex: 2;
color: #888;
font-size: 14px;
}
.item .count {
flex: 1;
color: #aaa;
}
.total {
width: 990px;
margin: 0 auto;
display: flex;
justify-content: flex-end;
border-top: 1px solid #e4e4e4;
padding: 20px;
}
.total .amount {
font-size: 18px;
color: firebrick;
font-weight: bold;
margin-right: 50px;
}
</style>
</head>
<body>
<div class="list">
<!-- <div class="item">
<img src="https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg" alt="">
<p class="name">称心如意手摇咖啡磨豆机咖啡豆研磨机 <span class="tag">【赠品】10优惠券</span></p>
<p class="spec">白色/10寸</p>
<p class="price">289.90</p>
<p class="count">x2</p>
<p class="sub-total">579.80</p>
</div> -->
</div>
<div class="total">
<div>合计：<span class="amount">1000.00</span></div>
</div>
<script>
const goodsList = [
{
id: '4001172',
name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
price: 289.9,
picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
count: 2,
spec: { color: '白色' }
},
{
id: '4001009',
name: '竹制干泡茶盘正方形沥水茶台品茶盘',
price: 109.8,
picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
count: 3,
spec: { size: '40cm*40cm', color: '黑色' }
},
{
id: '4001874',
name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
price: 488,
picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
count: 1,
spec: { color: '青色', sum: '一大四小' }
},
{
id: '4001649',
name: '大师监制龙泉青瓷茶叶罐',
price: 139,
picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
count: 1,
spec: { size: '小号', color: '紫色' },
gift: '50g茶叶,清洗球'
}
]
// 1.根据数据渲染页面
document.querySelector('.list').innerHTML = goodsList.map(item => {
// 取出每项对应数据
const {name, price, picture, count, spec, gift} = item;
const text = Object.values(spec).join('/');
const subTotal = ((price * 100 * count) / 100).toFixed(2);
const str = gift ? gift.split(',').map(item => {
`<span class="tag">【赠品】${item}</span>`
}).join('') : '';
// map 的 return 部分就是 str 的值
return `
<div class="item">
<img src=${picture} alt="">
<p class="name">${name} ${str}</p>
<p class="spec">${text}</p>
<p class="price">${price.toFixed(2)}</p>
<p class="count">x${count}</p>
<p class="syb-total">${subTotal}</p>
</div>
`;
}).join('');
// 3.合计模块
const total = goodsList.reduce((prev, item) => prev + (item.price * 100 * item.count) / 100, 0);
document.querySelector('.amount').innerHTML = total.toFixed(2);
</script>
</body>
</html>
7.利用原型对象给数组扩展功能的一个小案例
// 原型对象可以给对象添加不重复创建的方法或属性，节省内存空间
<script>
// 对于对象中的某些变量或者方法，不想根据创建不同的对象多次创建，就可以使用原型
function Stars(name, age){
this.name = name;
this.age = age;
};
// 定义了 Stars 对象的一个原型方法
Stars.prototype.sing = function(){
console.log('我唱歌超好听的');
};
// 创建两个对象判断一下 >> 结果为 true
const s1 = new Stars('周星驰', 20);
const s2 = new Stars('周润发', 20);
console.log(s1.sing() === s2.sing());
</script>
<script>
const arr = [1, 2, 3];
// 添加求最大值的方法
Array.prototype.max = function(){
return Math.max(...this);
};
// 添加求和的方法
Array.prototype.sum = function(){
return this.reduce((prev, item) => prev + item, 0);
};
console.log(arr.max());
console.log(arr.sum());
</script>
8.和原型相关的一些内容
<script>
function Star(){
}
const ldh = new Star();
console.log(ldh.__proto__);
// __proto__ 和 prototype 的作用是一样的
console.log(ldh.__proto__ === Star.prototype)
// 对于上面两个都有 constructor 属性，作用是指向构造函数
console.log(ldh.__proto__.constructor === Star);
</script>
9.通过原型继承可以实现面向对象的继承功能
<script>
function Person(){
this.eyes = 2;
this.head = 1;
}
function Woman(){
};
Woman.prototype = new Person();
// 需要将 prototype 指向原来的构造函数
Woman.prototype.constructor = Woman;
// 给女人添加一个方法
Woman.prototype.baby = function(){
console.log('宝贝');
};
const red = new Woman();
console.log(red);
// 创建男人对象，看有没有出现函数污染的情况 >> 通过 new 创建的是不同的对象
function Man(){
};
Man.prototype = new Person();
Man.prototype.constructor = Man;
const blue = new Man();
console.log(blue);
</script>
10.责任链的作用就是由继承关系形成的一条链
<script>
console.log(Object.prototype);
console.log(Object.prototype.__proto__);
function Person(){};
const ldh = new Person();
console.log(ldh.__proto__ === Person.prototype);
console.log(Person.prototype.__proto__ === Object.prototype);
console.log(ldh instanceof Person);
console.log(ldh instanceof Object);
console.log(ldh instanceof Array);
console.log([1,2,3] instanceof Array);
console.log(Array instanceof Object);
</script>
11.综合案例
<script>
// 1. 模态框的构造函数
function Modal(title = '', message = '') {
// 公共的属性部分
this.title = title
this.message = message
// 因为盒子是公共的
// 1. 创建 一定不要忘了加 this
this.modalBox = document.createElement('div')
// 2. 添加类名
this.modalBox.className = 'modal'
// 3. 填充内容 更换数据
this.modalBox.innerHTML = `
<div class="header">${this.title} <i>x</i></div>
<div class="body">${this.message}</div>
`
// console.log(this.modalBox)
}
// 2. 打开方法 挂载 到 模态框的构造函数原型身上
Modal.prototype.open = function () {
if (!document.querySelector('.modal')) {
// 把刚才创建的盒子 modalBox 渲染到 页面中 父元素.appendChild(子元素)
document.body.appendChild(this.modalBox)
// 获取 x 调用关闭方法
this.modalBox.querySelector('i').addEventListener('click', () => {
// 箭头函数没有this 上一级作用域的this
// 这个this 指向 m
this.close()
})
}
}
// 3. 关闭方法 挂载 到 模态框的构造函数原型身上
Modal.prototype.close = function () {
document.body.removeChild(this.modalBox)
}
// 4. 按钮点击
document.querySelector('#delete').addEventListener('click', () => {
const m = new Modal('温馨提示', '您没有权限删除')
// 调用 打开方法
m.open()
})
// 5. 按钮点击
document.querySelector('#login').addEventListener('click', () => {
const m = new Modal('友情提示', '您还么有注册账号')
// 调用 打开方法
m.open()
})
</script>
12.一个和深浅拷贝相关的一个小案例
<script>
// 定义函数
function fn(){
setTimeout(function(){
console.log(new Date().toLocaleString());
fn();
}, 1000);
}
fn();
</script>
