这是我参与[第四届青训营]笔记创作活动的第三天，今天我学习并总结了一些关于js方面的知识点，主要内容包括js中的数据类型，闭包，以及改变页面样式的三种方法。
一.数据类型
1.js的基本数据类型
- string
- number
- boolean
- null
- undefined
- symbol
2.js的复杂数据类型
- object
- array
- function
3.数据类型的使用
typeof可以判断undifend/数值/字符串/布尔值
instanceof可以用于判断具体类型 具体用法：a instanceof Object返回结果为true或者forth
undefind和null的区别：undefind表示定义但是未赋值,null表示已经赋值了但是赋的值为null
什么时候需要赋值为null：1.初始赋值为null，表明将要赋值为对象，确定对象就赋值
2.结束前，让对象成为垃圾对象（被垃圾回收器回收）
4.原型和原型链
prototype:每个函数都有，指向原型对象
—proto—：隐式原型，每个对象都会有，指向构造该对象的构造函数的原型
原型链：根据prototype和—proto—串成的一条链，查找对象的某一个内容时，如果找到了就停止并返回，未找到就到原型或隐式原型中继续找，直到找到或者隐式原型为null
二.闭包
1.闭包的产生
在js里，当存在函数嵌套，并且在函数的内部引用了函数外部的数据的时候，闭包就产生了。
例如：
function fn(){
var a = 1
function fn1(){
console.log(a)
}
}
2.闭包的特性
闭包内的数据在函数执行完之后不会被垃圾回收器回收，因此可以延长部分数据的生命周期，同时使函数外部可以对函数内部的数据进行相关的操作。但是这一特性也会引起一些问题，比如当闭包无用之后但是没有及时回收，就会产生内存溢出和内存泄露。
3.内存溢出
当程序运行所需的内存超出了剩余可分配的内存时，就会产生内存溢出，是一种程序运行出现的错误。
4.常见的内存泄露
1.意外的全局变量
2.没有及时清理的计时器和回调函数
3.闭包
因此，闭包虽然好用，但是可以不用的时候尽量不要用，用了的话要及时清除。
三.改变样式的三种方法
1.直接操作dom改变样式
这种方法容易理解，适用于初学者使用，虽然简单，但是会严重影响性能，因此不建议使用。
原因：传统开发模式中，每次js改变dom，都会造成一次重绘重排，而有时对某一个元素需要进行如背景色、字体颜色、字体大小等等多方面的修改，因此会多次执行更新操作，严重浪费浏览器性能。
window.onload=function(){
document.getElementById("file-btn")
const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
const body = document.body;
if (e.target.innerHTML === '🌞'){
body.style.backgroundColor = 'black';
body.style.color = 'white';
e.target.innerHTML = '🌜';
}else{
body.style.backgroundColor = 'white';
body.style.color = 'black';
e.target.innerHTML = '🌞';
}
});
}
2.通过改变class类名改变样式
这种方法比起上一种好了太多，不仅增加了代码的可读性，避免代码臃肿，在性能消耗上也比上一种代码好了不知道多少。
window.onload=function(){
document.getElementById("file-btn")
const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
const body = document.body;
if (body.className !== 'night') {
body.className = 'night';
} else {
body.className = '';
}
});
}
3.不使用js就能改变样式
这个是先在外面写一个类型为checkbox的input框，然后通过样式设置为display：none隐藏。
<input id="modeCheckBox" type="checkbox">
<div class="content">
<header>
<label id="modeBtn" for="modeCheckBox"></label>
</header>
</div>
将label直接与input框相连，点击即可改变input框是否选中，然后再通过input的选中与否来决定样式的。通过伪类来改变样式。
#modeCheckBox {
display: none;
}
#modeCheckBox:checked+.content {
background-color: black;
color: white;
transition: all 1s;
}
#modeBtn {
font-size: 2rem;
float: right;
}
#modeBtn::after {
content: '🌞';
}
#modeCheckBox:checked+.content #modeBtn::after {
content: '🌜';
}
