# basicsReview
# javascript
# 防抖和截流
# 防抖
- 指在延迟时间后再执行操作，在延迟时间内重复触发，则会清除原有延迟时间，重新延迟执行
// 实现防抖函数
<script type="text/javascript">
function debouce(fn,wait){
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(()=>{
fn(args);
timer = null;
},wait)
}
}
</script>
# 截流
- 间隔时间内只执行第一次，重复触发需等待间隔时间结束再执行
// 实现截流函数
<script type="text/javascript">
const throttle = (fn,wait) =>{
let timer;
return (...args) => {
if(timer) return;
timer = setTimeout(()=>{
fn(args);
timer = null;
},wait)
}
}
</script>
# 闭包（closure）
- 一个函数和对其周围状态的引用捆绑在一起的组合就是闭包，闭包可以在一个内层函数中访问到其外层函数的作用域
- 简单概括：闭包可以突破变量局部作用域的界限，拿到不属于本身作用域内的变量
- 举个栗子：子函数访问父函数的变量，由于父函数的变量存在引用，即使创建它的上下文已经销毁，它仍然存在，从而形成了闭包。
# 闭包的优点
- 延长变量的生命周期，即执行上下文不被销毁，这个变量就可以一直存在
- 形成私有作用域，实现模块化，使某些变量不受外部干扰
- 突破函数独立作用域，可以从外部拿到里面的变量
# 闭包的缺点
- 绕过了垃圾回收机制，这个变量一直存在，过度使用闭包会导致内存占用过多
# 闭包的应用场景
- 自调用函数
- 回调函数
- 防抖截流
# 构造函数
- 构造函数
- 构造函数都有自己的原型对象
- 原型对象有个属性 constructor 指向构造函数
- 通过构造函数可以 new 很多实例、对象
- 实例和他的原型对象有条链接，叫原型链
- 原型对象还会指向自己的原型对象，一直到 Object 的原型（null）为止
- 构造函数和普通函数区别
- 构造函数需要用 this 创建变量和方法
- 调用方法不同，构造函数需要通过 new 来调用，先 new 一个实例对象，再通过实例访问其属性/方法
- 普通函数用 new 来调用只能获得空对象{}
- 构造函数 this 指向实例，普通函数 this 指向调用对象，箭头函数 this 指向上下文
- 箭头函数是匿名函数，不能作为构造函数，不能使用 new
# new 操作符具体干了什么呢?（new 的原理）
- 创建一个空对象
- 将空对象的原型链proto指向构造函数的原型 prototype
- 将构造函数的 this 指向空对象，属性和方法被继承
- 执行构造函数中的代码
- 返回该对象
# typeof 运算符和 instanceof 运算符的区别
typeof 操作符
- typeof 用于检测基本数据类型 number、string、boolean、null、undefined，以及引用数据类型 object、function，对于正则表达式、日期、数组这些引用数据类型，会全部识别为 object;
- typeof 对于值类型有四种结果（number、string、boolean、undefined）
- 对于引用类型有两种结果（function、object）
- 注意：typeof null==object；
instanceof 操作符
- instanceof 用来检测构造函数的原型是否存在于指定对象的原型链当中
- 判断规则：沿着 A 的proto属性这条线来找，同时沿着 B 的 prototype 属性这条线，若果两条线能找到同一个引用，即 同一个对象，则返回 true。
function _instanceof(L, R) {
//L为instanceof左表达式，R为右表达式
let Ro = R.prototype; //原型，取右表达式的 prototype 值
L = L.__proto__; //隐式原型， 取左表达式的__proto__值
while (true) {
if (L === null) {
//当到达L原型链顶端还未匹配，返回false
return false;
}
if (L === Ro) {
//全等时，返回true
return true;
}
L = L.__proto__;
}
}
# 事件循环机制（Event Loop）
# JavaScript 的事件分两种
- 宏任务：setTimeout，setInterval，requestAnimationFrame
- 微任务：Promise.then(非 new Promise)、catch、finally，process.nextTick(node 中)
# 事件循环机制
- 在 js 单线程中，主线程会按顺序执行同步任务，将异步任务挂在任务队列
- 主线程清空当前同步任务后逐个执行任务队列中的宏任务，每执行一个宏任务会将当前任务队列中的微任务清空
# 执行优先级
- 有同步先同步，遇到 promise 执行 resolve，async，await 也同理，异步先放入队列，最后执行 setTimeout、setInterval
- await 后的代码与.then()内的代码则是微任务按照进入顺序执行