js高级
1.箭头函数
就是函数的简写
// 以前写函数
function func1(num1) {
return num1 + 100;
}
// 箭头函数的时候
// const func2 = (num1) => num1 + 100;
// 定义一个箭头函数 没有形参 没有返回值
const func2 = () => {
console.log('执行业务1');
console.log('执行业务2');
};
// 没有形参、没有返回值、业务只有一行代码 大括号都可以省略
const func3 = () => console.log('执行业务1');
// 只有一个形参、没有返回值、业务只有一行代码
// const func4 = num => console.log(num + 1);
// const func4 = (num) => console.log(num + 1);
// 两个或者多个参数（括号不能省略）、没有返回值、业务只有一行代码
// const func5 = (a, b) => console.log(a + b);
// 没有形参，有返回值 业务两行代码
const func6 = () => {
let a = 100;
return a + 100;
};
// 没有形参、有返回值，业务一行代码
// const func7 = () => {
// return 100 + 200;
// };
// 没有形参、有返回值，业务一行代码 等价上述写法
const func7 = () => 100 + 200; // 相等于 return 100+200
console.log(func7());
const button = document.querySelector('button');
button.addEventListener('click', () => {
console.log(123321);
});
2.数组的常见方法forEach
数组遍历的简写
// forEach() 数组每个元素都执行一次回调函数。 = 类似以前的for forEach 高阶函数（可以接收一个形参-函数）
// for循环可以通过 break来打断、 forEach不能通过break打断
const arr=['a','b','c'];
// 分别打印他们
// arr.forEach(function(value,index){
// console.log(`值 是 ${value} 下标是 ${index}`);
// })
//两个值的写法
// arr.forEach((value,index)=> console.log(`值 是 ${value} 下标是 ${index}`))
//一个值的写法
arr.forEach(value => console.log(`值 是 ${value}`))
3.数组的拼接
就是讲数组里面的内容转换成字符串再通过拼接生成到页面上面 join("")：数组转换字符串
<script>
map();
function map() {
// map 根据原来的数组 来返回新的数组
// 也会循环数组 在循环的回调函数中可以返回新的数据 组装成新的数组
// const arr = ['a', 'b', 'c'];
// 可以返回 ["我的字母是a","我的字母是b","我的字母是c"]
// const newArr = arr.map((value) => '我的字母是' + value); // [1,1,1]
// console.log(newArr);
// const list=[10,11,12];
// const newList=list.map(value=>value+1);// [11,12,13]
// console.log(newList);
// const objectArr=[{name:"悟空"},{name:"八戒"}];
// const newObjectArr=objectArr.map(value=>{
// // 1
// value.color="red";
// // 2
// return value
// })// [{name:"悟空",color:"red"},{name:"八戒",color:"red"}]
// console.log(newObjectArr);
const texts=["刘德华","郭德纲","林志颖"];
// // 返回 [<div>刘德华</div>,<div>郭德纲</div>,<div>林志颖</div>]
const newTexts=texts.map(value=>`<div>${value}</div>`);
// console.log(newTexts);
// // [<div>刘德华</div>,<div>郭德纲</div>,<div>林志颖</div>]
// // 把它转成字符串
const html=newTexts.join("");// <div>刘德华</div><div>郭德纲</div><div>林志颖</div>
// console.log(html);
document.body.innerHTML=html;
// 后面再说
// const renderHTML=value=>`<div>${value}</div>`
// document.body.innerHTML=["刘德华","郭德纲","林志颖"].map(renderHTML).join("");
}
</script>
4.捐赠方法-map数组方法
<!--
1 快速实现静态布局
2 使用提供好的数组数据 来遍历 渲染页面
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>01-捐赠管理.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h3 {
margin: 50px;
text-align: center;
}
table {
width: 800px;
margin: 0 auto;
border-collapse: collapse;
text-align: center;
}
thead {
background-color: #337ab7;
color: #fff;
}
td,
th {
padding: 10px 50px;
/* 设置文字不换行 */
white-space: nowrap;
}
</style>
</head>
<body>
<h3>捐赠管理</h3>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>捐赠人</th>
<th>收捐单位</th>
<th>金额</th>
<th>收捐日期</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
// 获取tbody
const tbody = document.querySelector('tbody');
// 定义数据
const arr = [
// id:数据编号 person:捐赠人姓名 unit:捐赠单位名称 money:捐赠金额 date:捐赠日期
{
id: 1,
person: '刘德化',
unit: '壹基金',
money: 1000,
date: '2021-10-5',
},
{
id: 2,
person: '周杰伦',
unit: '自然之友',
money: 1000,
date: '2021-01-15',
},
{
id: 3,
person: '李连杰',
unit: '嫣然基金',
money: 1000,
date: '2021-06-7',
},
];
// 根据数组来渲染页面
function render() {
// let html = ``;
// for (let index = 0; index < arr.length; index++) {
// html += `
// <tr>
// <td>${arr[index].id}</td>
// <td>${arr[index].person}</td>
// <td>${arr[index].unit}</td>
// <td>${arr[index].money}</td>
// <td>${arr[index].date}</td>
// <td>
// <a href="#" class="del">删</a>
// <a href="#" class="update">改</a>
// </td>
// </tr>
// `;
// }
// 只能使用 map方法 和 数组转方式方法 join 来实现 拼接html的功能
// 把 arr 转成（map、join 来实现功能） 变量 html 让下面的代码 （tbody.innerHTML = html;） 执行成功
let newArr = arr.map(value => ` <tr>
<td>${value.id}</td>
<td>${value.person}</td>
<td>${value.unit}</td>
<td>${value.money}</td>
<td>${value.date}</td>
<td>
<a href="#" class="del">删</a>
<a href="#" class="update">改</a>
</td>
</tr>
`)
let html = newArr.join('')
tbody.innerHTML = html;
}
// 根据数组数组渲染页面
render();
</script>
</body>
</html>
5.箭头函数-返回对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>05-箭头函数-返回对象.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
const arr = ['a', 'b', 'c'];
// 返回 [ {name:"a",name:"b",name:"c"} ]
// const newArr=arr.map(value=>name:value );// 排除！
// const newArr=arr.map(value=>{name:value} ); // 思路正确 代码不正确
// const newArr=arr.map(value=>{
// name:value
// } ); // 思路正确 代码不正确
// const newArr=arr.map(value=>{
// name:value
// return undefined
// } ); // 思路正确 代码不正确
// const newArr=arr.map(value=>{
// console.log(1);
// console.log(2);
// } ); // 思路正确 代码不正确
// console.log(newArr);
// 箭头函数 会认为 这个大括号 是 块级空间 符号 而不是对象的符号
// const newArr1 = arr.map((value) => { name: value; }); // 这个大括号 是表示 对象的符号 还是表示 可以块级空间
// const newArr2=arr.map(value=> {
// console.log(123) ;
// console.log(123) ;
// console.log(123) ;
// return undefined
// } );
// // js认为 大括号是 块级空间 可以写js语句
// {
// console.log(123);
// console.log(123);
// console.log(123);
// }
// let obj={ // js会认为大括号是 对象的符号 里面不能写 语句
// console.log(123);
// console.log(123);
// console.log(123);
// }
// 箭头函数 的返回值 可以被省略
const func = (num) => num + 1; // 相当于 return num+1
const func1 = (num) => {
return num + 1;
}; // 这个大括号表示 块级空间
const func2 = (num) => {
num + 1;
}; // 会执行 num+1 但是没有返回值
const func3 = (num) => {
let num1 = num + 1;
let num2 = num1 + 2;
};
// console.log(func3());
const func4 = (num) => {
return { a: 123 };
};
// console.log(func4());
const func5 = (num) => {}; // 只要直接出现 大括号 就表示 块级空间 和它里面写什么代码没有关系
// console.log(func5());
const func6 = (num) => {
a: 2;
}; // 这个大括号就是对象（你的认为！！ 浏览器还是一样 大括号就是块级空间）
// console.log(func6());
// 如果你真的看不懂 没有办法， 你先不要优雅！！ 先用以前的function
// 如果你一定要在箭头函数中想要通过省略 return的方式来 返回对象，请你加上一个小括号
const func7=(num)=>({a:123});// => 右边加了小括号 表示想要返回 小括号里面的数据 return {a:123};
const func8=(num)=>{a:123};// => undefined
console.log(func7()); {a:123}
console.log(func8());// undefined
</script>
</body>
</html>
6.单选控制全选-every数组方法
就是讲伪数组转为真数组再用every数组方法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>08-全选和不全选-every</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px '微软雅黑';
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
</head>
<body>
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll" />
<span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米手机</td>
<td>小米</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米电视</td>
<td>小米</td>
<td>￥5999</td>
</tr>
</table>
</body>
<script>
let checkAll = document.querySelector('#checkAll');
let checkboxList = document.querySelectorAll('.ck'); // checkboxList 现在是一个伪数组
checkboxList=[...checkboxList];// OK
// 商品全选点击 功能
checkAll.addEventListener('click', function () {
for (let index = 0; index < checkboxList.length; index++) {
checkboxList[index].checked = checkAll.checked;
}
});
// // 给每一个商品绑定点击事件
for (let index = 0; index < checkboxList.length; index++) {
checkboxList[index].addEventListener('click', function () {
// 判断是否达到了全选 条件
// 判断每一个小小的复选框的选中状态 如果都是true，那么就全选
let checked = checkboxList.every((value) => {
if (value.checked === true) {
return true;
} else {
return false;
}
});
// 设置全选按钮即可
checkAll.checked = checked;
});
}
</script>
</html>
<!--
两个知识
1 伪数组转真正的数组 let newArr=[...伪数组] ;
2 every 要求数组的每一个元素都符号要求， every才返回true
使用场景， 商品全选 => 每一个小商品都选中， 全选才勾选！！
4 如果 数组 有every方法， list.every 看是不是undefined
不是的话 表示数组有 every方法 list.every() 调用
是 表示数组没有 every方法，不用list.every()
-->
7.数组的方法-every
every: // 会返回true或者false // 要求数组中每一个元素都符号条件，every 得到true // 如果空的数组调用了every。 得到结果 也是true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>06-数组常见方法.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
every();
function every() {
// 会返回 true或者false
// 如果数组中每一个元素都复合条件，every返回true
// const arr = [1, 6, 3, 4];
// // 判断数组中每一个元素，是不是都小于 5 如果是 返回true
// // every当中的函数，要求每一个都return 了true 最后 every的返回值才是true
// const result = arr.every((value) => {
// if (value < 5) {
// return true;
// } else {
// return false;
// }
// });
// console.log(result);
// 有一个数组，存放每一个人 关于肺炎的检查结果
// const arr = [true, true, true, true, true]; // true就表示安全，false 中招
// 我想要判断一下 这个人群安不安全 （只要有一个为false，不安全） 要求每一个都为true才安全
// const result = arr.every((value) => {
// if (value === true) {
// return true;
// } else {
// return false;
// }
// });
// console.log(result);
//
// every 如果是空数组，调用every 直接返回true
let arr=[];
const result=arr.every(value=>console.log(12));// result = true
console.log(result);
// every:
// 会返回true或者false
// 要求数组中每一个元素都符号条件，every 得到true
// 如果空的数组调用了every。 得到结果 也是true
}
</script>
</body>
</html>
8.数组方法-some
some 最少有一个符合即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>10-数组常见方法.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
some();
function some() {
// 检测数组，其中只要有一个元素符合条件，some返回true (every要求每一个都符合)
const arr = [1, 3, 4, 6, 2];
// 这个数组里面有没有元素大于6的
const result = arr.some((value) => value > 6);
console.log(result);
/*
every 和 some 一起记
every 要求全部都符合
some 最少有一个符合即可
*/
}
</script>
</body>
</html>
9.数组方法-filter
过滤， 过滤出满足条件的数据 =>新的数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>10-数组常见方法.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
filter();
function filter() {
// 过滤， 过滤出满足条件的数据 =>新的数组
const arr = [1, 2, 3, 4, 5, 6, 7];
// 返回 奇数
// const newArr = arr.filter((value) => {
// // 如果你return 了 true 表示当前的value你想要
// if (value % 2 !== 0) {
// // value 1 2 3 4 5 6
// // value%2!==0 value=[1,3,5,7]
// // 奇数
// return true;
// } else {
// return false;
// }
// });
// const newArr = arr.filter((value) => value % 2 !== 0);
console.log(newArr);
}
</script>
</body>
</html>
10.事件待办-filter数组方法实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>11-待办列表.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #ccc;
}
ul {
list-style: none;
}
li {
padding: 20px;
text-align: left;
font-size: 30px;
border-bottom: 1px dashed #ccc;
display: flex;
justify-content: space-between;
align-items: center;
}
li input {
margin-right: 10px;
}
li button {
display: none;
padding: 5px;
}
li:hover button {
display: inline-block;
cursor: pointer;
}
.chk:checked + span {
text-decoration: line-through;
}
h1 {
margin-bottom: 10px;
}
.box {
background-color: #fff;
width: 60vw;
padding: 20px 20px 0;
margin: 50px auto;
}
.box .tool input {
width: 100%;
height: 50px;
text-indent: 20px;
font-size: 20px;
font-style: italic;
color: #666;
font-weight: 700;
}
section {
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
}
a {
text-decoration-color: #666;
color: inherit;
}
</style>
</head>
<body>
<div id="app" data-v-app="">
<div class="box">
<h1>待办列表</h1>
<div class="tool">
<input autofocus="" type="text" placeholder="请输入代办事项" />
</div>
<ul></ul>
<section>
<span>1 未完成</span><a href="#">清理 <b>0</b> 已完成</a>
</section>
</div>
</div>
<script>
const input = document.querySelector('.tool input');
const ul = document.querySelector('ul');
const unFinishSpan = document.querySelector('section span');
const finishA = document.querySelector('a b');
const a = document.querySelector('a');
let arr = [];
const strArr = localStorage.getItem('todo');
if (strArr) {
arr = JSON.parse(strArr);
}
render();
input.addEventListener('keydown', function (event) {
if (event.key === 'Enter') {
// input.value
arr.push({
text: input.value,
checked: false,
});
render();
input.value = '';
}
});
ul.addEventListener('click', function (event) {
const index = event.target.dataset.index;
if (event.target.className === 'chk') {
arr[index].checked = !arr[index].checked;
render();
} else if (event.target.nodeName === 'BUTTON') {
arr.splice(index, 1);
render();
}
});
a.addEventListener('click', function () {
let newArr = [];
for (let index = 0; index < arr.length; index++) {
if (!arr[index].checked) {
newArr.push(arr[index]);
}
}
arr = newArr;
render();
});
// 函数负责把数组数据渲染在页面上
function render() {
let html = ``;
for (let index = 0; index < arr.length; index++) {
const renderChecked = arr[index].checked ? 'checked' : '';
html += `
<li>
<div><input data-index="${index}" type="checkbox" class="chk" ${renderChecked} /><span class="false">${arr[index].text}</span></div>
<button data-index="${index}">X</button>
</li>
`;
}
ul.innerHTML = html;
localStorage.setItem('todo', JSON.stringify(arr));
statistics();
}
function statistics() {
// 未完成
unFinishSpan.innerText = arr.filter(value=>!value.checked).length + ' 未完成';
// 已经完成
finishA.innerText = arr.filter(value=>value.checked).length;
}
</script>
</body>
</html>
11.字面量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>13-字面量-创建对象.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
const obj1 = { username: '悟空1', tel: 123321 };
const name1 = 123;
const obj2 = { username: '悟空2', tel: 123322 };
const name2 = 123;
const obj3 = { username: '悟空3', tel: 123323 };
const name3 = 123;
const obj4 = { username: '悟空4', tel: 123324 };
const name4 = 123;
const obj5 = { name: '悟空5', tel: 123325 };
// 好处 方便
// 不方便维护-修改
// 不想要name属性，修改 username
</script>
</body>
</html>
12.工厂函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>14-工厂函数.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
function createPerson(name, age, height) {
return {
// name: name,
username: name,
age: age,
height: height,
};
}
// 创建对象
const obj1 = createPerson('悟空', 18, 150);
const obj2 = createPerson('八戒', 20, 140);
const obj3 = createPerson('龙马', 30, 190);
console.log(obj1);
console.log(obj2);
console.log(obj3);
// 优点 容易维护
// name => username
// 弊端 无法实现 继承的作用！
</script>
</body>
</html>
13.构造函数
1 声明一个函数（构造函数）
2 通过new的方式来创建对象（实例）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>15-构造函数.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 专业术语
// 会把 createPerson 叫做 构造函数
// 会把 createPerson 创建出来的对象 叫做 实例
// 1 声明一个函数
function createPerson(name, age) {
// 2 给this赋值
this.name = name;
this.age = age;
// this.color="red";
}
// 2 通过new的方式来创建对象
const obj1 = new createPerson('悟空', 10);
console.log(obj1);
console.log(obj1.name);
console.log(obj1.age);
</script>
</body>
</html>
14.构造函数-性能问题
函数函数 方法提取出去 这套代码 say()函数方法 优点： 方便代码维护、也解决了性能 obj1.say === obj2.say
缺点： 代码不够优雅 污染了全局变量 以后不能写 say方法，很容易就覆盖（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>16-构造函数-性能问题.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
function say() {
console.log('这个是say方法');
}
// 构造函数的首字母大写 - 行内编码规范
function CreatePerson(name) {
this.name = name; // 创建了name属性
// this.say = function () {
// console.log('这个是say方法');
// };
this.say = say; // say函数引用类型， 构造函数中的say 其实和外面的say内存地址一致的 同一个say方法
}
const obj1 = new CreatePerson('悟空');
const obj2 = new CreatePerson('八戒');
// obj1.say();
// obj2.say();
// 两个say的判断比较 是false 说明 两个say是在不同的内存空间上
// 两个say 占用了两个内存空间
// console.log(obj1.say === obj2.say); // false
console.log(obj1.say === obj2.say); // true
// 对于基本类型来说，= 就是复制了一份值
// let num=100;
// let num2=num;// 复制值 num和 num2占两给内存 各自不影响
// num2=1000;
// console.log(num);
// 对于引用类似 = 其实把地址拷贝了一份给新的对象 两个数据 公用一份数据
// let person1 = { name: '悟空' }; // person1 指向了 一个地址 0x1111 存放悟空
// let person2 = person1; // person2也指向了person1的地址 0x1111 person1和person2 通用一个数据
// 修改了person2 person1也会发生改变
// person2.name = '八戒';
// console.log(person1);
// person2 和person1 共同指向了同一个地址
// console.log(person1 === person2); // true
// let o={};// 开辟了一个内存
// let o2={};// 开辟了另外一个内存
// console.log(o===o2);// false 两个不同的内存地址
/*
构造函数想要解决 性能问题
1 一定会把方法-函数写在构造函数的外面
2 再通过this.say 指向外部的函数
*/
// 函数函数 方法提取出去 这套代码
// 优点： 方便代码维护、也解决了性能 obj1.say === obj2.say
// 缺点： 代码不够优雅 污染了全局变量 以后不能写 say方法，很容易就覆盖（）
</script>
</body>
</html>
15原型模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>18-原型对象.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 原型对象 是任何构造函数对存在的一个对象 prototype
// 作用： 构造函数看是人， 原型对象 就是人的DNA
// 如果我们修改了DNA，那么通过构造函数创建实例都会一起发生修改
// 如果我们在DNA上新增了一些东西，对应实例一样会被新增
function CreatePerson(name) {
this.name = name;
}
// 原型对象
// console.log(CreatePerson.prototype);
// 在DNA上新增 东西
CreatePerson.prototype.say = function () {
console.log('你好');
};
const obj1 = new CreatePerson('悟空');
const obj2 = new CreatePerson('八戒');
// obj1.say();
// obj2.say();
function CreateStudent() { }
CreateStudent.prototype.say = function () {
console.log('学生你好');
};
// console.log(obj1.say === obj2.say);// 没有性能问题
// 有污染全局变量的问题吗 没有
// CreatePerson.prototype.say
// CreateStudent.prototype.say
// 小结 原型对象-构造函数 一般情况
// 构造函数内只放属性 name 、age、color、height
// 对应原型上 都是放 方法 = 函数
</script>
</body>
</html>
16.面向对象初体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>20-面向对象-初体验.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.scale {
animation: ani-scale 3s linear infinite alternate;
}
@keyframes ani-scale {
0% {
transform: scale(0.1);
}
100% {
transform: scale(2);
}
}
</style>
</head>
<body>
<button class="btn1">控制图片1</button>
<script>
/*
需求： 通过 new MyImg("图片地址") 页面上就会多一个图片标签
1 页面上多一个图片的本质代码
1 const img = document.createElement("img");
2 img.src="图片地址"
3 document.body.appendChild(img);
2 new的方式来创建图片
new MyImg 做了什么事情 => 调用了一个构造函数 MyImg
通过 点击了按钮，控制对应的图片 放大缩小效果
1 css来实现放大缩小
2 按钮 绑定点击事件
*/
// const img1 = new MyImg('./images/1.png'); // 页面上多一个图片标签
function MyImg(src) {
const img = document.createElement('img');
img.src = src;
document.body.appendChild(img);
this.dom = img;// 把图片dom元素 添加到 this对象的一个属性 dom属性上了
}
MyImg.prototype.scale = function () {
// 图片放大缩小的本质是不是给图片的dom元素 添加一个class
// 获取一下 上一个函数中的一个变量 img
// 原型上 想要获取另外一个函数中的变量
// console.log(this.dom);
this.dom.classList.add("scale");
}
const imgModel = new MyImg('./images/gotop.png');// 创建了一个对象
const btn1 = document.querySelector(".btn1");
btn1.addEventListener("click", function () {
imgModel.scale();// 要调用这个对象的放大缩小的方法
})
</script>
</body>
</html>
