js总结笔记

一.数据类型

1.js的基本数据类型

2.js的复杂数据类型

3.数据类型的使用

typeof可以判断undifend/数值/字符串/布尔值

instanceof可以用于判断具体类型     具体用法：a   instanceof   Object返回结果为true或者forth

undefind和null的区别：undefind表示定义但是未赋值,null表示已经赋值了但是赋的值为null

什么时候需要赋值为null：1.初始赋值为null，表明将要赋值为对象，确定对象就赋值

                                          2.结束前，让对象成为垃圾对象（被垃圾回收器回收）

4.原型和原型链

prototype:每个函数都有，指向原型对象

—proto—：隐式原型，每个对象都会有，指向构造该对象的构造函数的原型

原型链：根据prototype和—proto—串成的一条链，查找对象的某一个内容时，如果找到了就停止并返回，未找到就到原型或隐式原型中继续找，直到找到或者隐式原型为null

二.闭包

在js里，当存在函数嵌套，并且在函数的内部引用了函数外部的数据的时候，闭包就产生了。

例如：

function fn(){

var a = 1

function fn1(){

console.log(a)

}

}

闭包内的数据在函数执行完之后不会被垃圾回收器回收，因此可以延长部分数据的生命周期，同时使函数外部可以对函数内部的数据进行相关的操作。但是这一特性也会引起一些问题，比如当闭包无用之后但是没有及时回收，就会产生内存溢出和内存泄露。

当程序运行所需的内存超出了剩余可分配的内存时，就会产生内存溢出，是一种程序运行出现的错误。                                                                                                                                             

1.意外的全局变量

2.没有及时清理的计时器和回调函数

3.闭包                                            

因此，闭包虽然好用，但是可以不用的时候尽量不要用，用了的话要及时清除。

三.改变样式的三种方法

这种方法容易理解，适用于初学者使用，虽然简单，但是会严重影响性能，因此不建议使用。

原因：传统开发模式中，每次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 = '🌞';
      }
    });
}

这种方法比起上一种好了太多，不仅增加了代码的可读性，避免代码臃肿，在性能消耗上也比上一种代码好了不知道多少。

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 = '';
    }
    });
}

这个是先在外面写一个类型为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: '🌜';
    }