一.数据类型
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: '🌜';
}