JavaScript 常用知识汇总

一、节流、防抖

1. 节流

概括：类似于一种阀门一样的开关函数，也就是在函数执行一次后，某段时间内暂时失效，过了这段时间后在重新激活（类似于大招的冷却时间）
使用场景：
- 保存、提交防重复点击
- 输入框input事件

 function throttle(fn,delay){
    let valid = true
    return function() {
       if(!valid){
           return false 
       }

        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
 }

 function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滚动条位置：' + scrollTop);
 }
 window.onscroll = throttle(showTop,1000)

2. 防抖

概括：在第一次触发事件时，不立即执行函数，而是给一个期限值。如果在期限值内没有触发该方法就执行，如果在该期限值内再次执行就重新开始计时

使用场景：

滚动条事件
拖拽效果
浏览器resize事件（浏览器尺寸缩放时执行的事件）

function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer) 
        }
        timer = setTimeout(fn,delay) // 简化写法
    }
}
// 然后是旧代码
function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滚动条位置：' + scrollTop);
}
window.onscroll = debounce(showTop,1000)

二、回流、重绘

1. 回流

概括：当页面进行加载的时候会重新对dom元素会进行渲染，渲染的过程成为回流

2. 重绘

概括：当回流的时候，会有部分失效的元素属性（样式）或者新改变的元素属性（样式）进行重新绘制到页面中，这样的过程成为重绘

三、宏任务、微任务

1. 宏任务

概括：是基于宿主环境进行执行的程序队列，比如说绑定事件、setTimeout、setInterval、ajax

2. 微任务

概括：是基于js引擎进行执行的任务程序队列，比如说Promise、async/await、Object.proxy

 setTimeout(function(){
    console.log('1');
 });
 new Promise(function(resolve){         
    console.log('2');
    resolve();
 }).then(function(){            
    console.log('3');
 }).then(function(){
    console.log('4')
 });        
 console.log('5');

 // 2 5 3 4 1

四、同步、异步

1. 同步

概括：因为js是单线程，根据js代码执行顺序从上至下依次执行称为同步

 consoled.log(0)
 let str = 1 
 console.log(str)
 console.log(2)
 // 0 1 2

2. 异步

概括：当程序执行到异步代码时，会将异步代码放置异步池里面，而不会影响同步代码的执行，类似于Java中的多线程

 console.log(1)
 setTimeout(() => {
     console.log(2)
 })
 console.log(3)
// 1 3 2

3. 区别

同步会阻塞后续代码的执行，异步不会阻塞后续代码的执行

五、高内聚、低耦合

1. 高内聚

概括：一个模块中，里面的多个元素之间的联系越紧密，关联程度越高，内聚性越高

2. 低耦合

概括：每个模板之前联系越紧密关联度越高，则独立性越差，耦合性越高

六、闭包

概括：函数外部可以访问函数内部的变量
原理：
- 触发垃圾回收机制
- 将数据暂时储存起来，如果需要使用再次调用，如不需要在销毁
缺点：造成内存的占用，使用不当会造成内存泄漏
优点：可以在外部操作作用域中的变量，减少了变量污染，相当于声明了一个全局的私有变量

七、原型链

概括：每个函数或者类都有一个属性 prototype，可以通过prototype访问到自己的原型对象，类实例化的对象也可以通过_ _ proto _ _访问到原型对象，原型对象也有自己的原型对象，依次往上直到访问到顶层，这样的链式结构被称为原型链
优点：实现类的继承，可以将一些方法或者属性储存到里面，提高方法的扩展性

八、this指向

指向场景：

在函数内部指向 -- window
在定时器中指向 -- window
在对象中的函数指向 -- 对象
在事件函数中指向 -- 事件源
在构造函数中指向 -- 实例化对象
在constructor（构造方法）中指向 -- 实例化对象
在类中指向 -- 实例化对象
再箭头函数中指向 -- 宿主对象（父级的指向）

改变指向：

call() 方法

概括：如果不传参默认指向window

参数：

参数1：目标this指向
参数2+：之后的参数就是函数的形参

 var obj= {
    name:"lixue",
    age:21
 }
 function fn(x,y){
    console.log(x+","+y);
    console.log(this);
    console.log(this.name);
    console.log(this.age);
 }
 fn.call(obj,"hh",20); // 此时this指向对象obj

apply() 方法

概括：不传参默认指向window

参数：

参数1：目标this指向
参数2：不管之后有几个参数统一写入数组

 var obj= {
    name:"lixue",
    age:21
 }
 function fn(x,y){
    console.log(x+","+y);
    console.log(this);
    console.log(this.name);
    console.log(this.age);
 }
 fn.apply(obj,["hh",20]); // 此时this指向对象obj

bind() 方法

概括：该方法会创建新函数改变新函数的this指向,不会改变原始函数的this指向

参数：

参数1：目标this指向
参数2+：之后的参数就是新函数的参数

 // 此方法和以上两种方法不同, bind方法会产生一个新的函数设置新函数中的this指向
 function fn(){
    // 此时this指向新函数
    console.log(this);
    console.log(arguments);
    return "hahahahha";
 }
 // 产生一个新的函数,此时this指向函数
 var res = fn.bind("hello",10,20,30,40);
 res();
 console.log(res);

区别
- call方法和apply方法都是改变原有函数的this指向，而bind方法会生成一个新的函数改变新函数的this指向
- call方法的bind方法参数2+ 都是以平铺的方式进行传参，二而apply方法将参数2+ 的多个参数合并成为一个数组

九、高并发

概括：指的是用户因为请求次数过多，导致的服务器负载压力过大
优化：
- 减少Http请求次数
- 服务器进行负载均衡操作，将一台服务器的压力分发到多台服务器上，从而减少服务器压力
- 整合前端资源，将资源进行压缩
  - css代码压缩
  - html代码压缩
  - js代码压缩
  - css图片使用精灵图
  - css图片使用Base64格式编码直接嵌入页面

十、跨域

概括：由于受到浏览器同源策略的限制，不同协议、不同端口、不同域名的情况下不可以互相访问，如互相访问的情况下被称为跨域
实现方法：
- JSONP：通过script标签的src属性不受同源策略的限制实现跨域（只能支持GET请求）
- CORS：通过后端进行配置 Access-Control-Allow-Origin 属性，实现跨域
- Nginx：通过Nginx（中间件）将请求反向代理到指定的服务器，实现跨域

十一、localStorage、sessionStorage、cookie

1. loacalStorage

概括：主要要来本地储存使用，用来解决cookie储存空间不足问题
优点：比cookie储存空间大，相当于在前端有个5M大小的数据库，安全性比较高
缺点：兼容性不太好（IE8以上），浏览器隐私模式下不可以被读取到
操作：
- 储存数据：localstorage.setItem(key,value)
- 读取数据：localStorage.getItem(key)
- 删除数据：localStorage.removeItem(key)
- 修改数据：localStorage.setItem(新的键,新的值)

2. sessionStorage

概括：和localStorage同为本地储存，但是sessionStorage是会话时效，一旦浏览器关闭将会清除数据
操作：和localStorage相同

3. cookie

概括：浏览器本地储存数据，储存大小约为4K
操作：
- 储存：document.cookie='属性=值';expires='时间字符串';
- 读取：document.cookie
- 删除：设置有效期过期

十二、栈和堆

1. 栈内存

概括：主要储存一些基本数据类型和复杂数据类型的地址
基本数据类型：String、Number、Boolean、Undefined、Null

2. 堆内存

概括：主要储存一些复杂数据类型，复杂数据类型通过栈内存中的地址访问到堆内存中对应的数据
复杂数据类型：Function、Array、Object

如有概括错误，欢迎各位网友斧正🎈
敬请期待后续更新⏳

JavaScript 常用知识汇总

一、节流、防抖

1. 节流

2. 防抖

二、回流、重绘

1. 回流

2. 重绘

三、宏任务、微任务

1. 宏任务

2. 微任务

四、同步、异步

1. 同步

2. 异步

3. 区别

五、高内聚、低耦合

1. 高内聚

2. 低耦合

六、闭包

七、原型链

八、this指向

指向场景：

改变指向：

九、高并发

十、跨域

十一、localStorage、sessionStorage、cookie

1. loacalStorage

2. sessionStorage

3. cookie

十二、栈和堆

1. 栈内存

2. 堆内存

推荐阅读更多精彩内容