### 什么是js垃圾回收机制(前提)
垃圾回收机制(GC:Garbage Collection):执行环境负责管理代码执行过程中使用的内存。JS的垃圾回收机制是为了以防内存泄漏,内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着,没有被释放,导致该内存无法被使用,垃圾回收机制就是间歇的不定期的寻找到不再使用的变量,并释放掉它们所指向的内存。
其实我们通俗的解释就是:js存在专门的机制去处理我们不用的一些东西,不论是简单数据类型还是复杂数据类型。
```
简单举例:var a =1,我们定义了变量a,并且给它赋值为1,随后我们去改变a的值,a = 100,
现在的话我们知道a的值变成了100,那么数值1我们肯定就不会用到了,
那么js的垃圾回收机制会帮助我们把数值1给回收了,为了避免内存泄漏!
```
**闭包的概念:**
`函数内部返回一个函数,这个内部函数被外界所引用`,这个内部函数就不会被js回收机制所销毁,内部函数所用到的外部函数的变量也不会被销毁。
```
示例:
function outer() {
let name = 'james'
let age = 37
//返回一个函数
return function() {
return name + ' is superstar';
}
}
let func = outer()
console.log(func()); //james is superstar
```
**代码解析**
在上方代码中我们定义了一个外部函数outer(),在外部函数内部返回了一个函数(内部函数),随后在外界中将外部函数赋给了func,这个func就是内部函数,然后执行func(),打印出来了相应的结果,在这里,我们使用了外部函数内定义的属性name和内部函数,所以name和内部函数不会被js回收机制所处理,但是属性age我们并没有使用,所以age被js垃圾回收机制所回收!
* **优点和缺点**
* 在代码解析中,我们知道了 我们所创建的临时变量`name`将不会被回收,所以闭包的优点就是:`让临时变量可以永驻内存`。
* 但是如果我们不停的执行`func`,那么就会出问题,这样的话会使内存中不断的储存临时变量,就会导致`内存泄漏`,所以闭包的缺点就是:`会造成内存泄漏`。
**应用:闭包防抖和节流**
1.在这里写一个搜索框,搜索框的内容输入频次可以使用`防抖`或`节流`来优化
```
<input type="text" id="search">
```
防抖:
```
search.oninput = (function() {
let timer = null
return ()=>{
if(timer) {
clearTimeout(timer)
}
timer = setTimeout(()=>{
console.log('发送了ajax请求');
},500)
}
})()
```
节流:
```
search.oninput = (function(){
let flag=true
return ()=>{
if(flag) {
setTimeout(()=>{
console.log('发送了ajax请求');
flag = true
},500)
}
flag = false
}
})()
```
闭包的实战常见场景主要是在防抖和节流中,就是为了防止在防抖和节流中我们创建的`临时变量`会丢失!
- vue项目目录
- git
- git 使用
- git 新建和合并不同git分支
- vue使用element ui
- vue复选框
- vue使用富文本编辑器
- element 级联选择器使用
- vue使用时间过滤器
- vue form表单中使用table表格
- element ui图片上传(upload)功能
- 树形tree组件
- element 表格表头样式修改
- element ui添加loading动画
- table展开列
- el-tooltip提示框加for循环无法显示数据
- table合并
- table表头插槽,render-header警告
- table列表中鼠标放上去显示图片
- 表格中输入内容动态改变数据(箭头和颜色)
- 使用element ui表格跨页勾选
- 可编辑表格可分页
- 组件之间简单传值
- 从表格中选择其他表单子段
- router
- vuex
- vue接口写法
- 将后端返回的数字转成字符串显示在表格中
- element ui实现动态验证
- vue根据token判断登录
- vue修饰符
- js小案例
- 倒计时
- 验证码
- 带文字匹配搜索框
- 选项卡
- 复选框全选,反选,全不选
- 相册选择,鼠标放到图片上,对应图放大显示
- 敏感词过滤
- 进度条
- 点击按钮回到顶部
- 电影院选座
- 盒子移动
- 鼠标绑定一个盒子
- 档案建立,输入信息添加到表格
- 抽奖机
- 放大镜
- 购物车
- 飞机大战
- echarts案例
- 常规条形图
- 横向条形图
- 折线图
- 散点图
- 饼状图
- 地图
- 雷达图
- 仪表盘
- 条形堆叠图
- 微前端--qiankun框架
- node中间件
- 手机端样式自适应,格式化初始样式插件
- 简单的axios请求封装,无权限
- npm安装后缀-s或-d
- 系统环境变量
- 过滤字符串,不足两位前面添加0
- 概念问题
- async和await的区别
- created和mounted区别
- link和@import区别
- 排他算法
- 数组方法
- 数组扁平化
- 数组去重
- 遍历数组的四种方法
- vue数组中哪些方法时响应式的
- splice删除数组遇到的坑
- 展开运算符(...)用法
- 冒泡排序
- 判断数组中是否有重复
- 计算数组中某项出现的次数
- filter方法
- 将数组分割成多个指定长度的数组
- 常用数组方法整合
- 对象数据处理
- 合并对象:Object.assign( )
- Object.keys(),返回数组,自身枚举对象
- Object.values使用
- Object.entries使用
- vue中使用svg
- svg组件
- vue滑块验证
- 方法一:滑块验证
- 方法二:滑块插件
- vue配置不同的启动和打包环境
- js过滤日期
- js获取指定日期前一个月日期
- js指定日期与当前日期比较
- js截取字符串
- js截取字符串最后的逗号
- js截取图片后缀
- 前端监听网络
- vue.config.js解析
- 常用正则
- 闭包概念+闭包防抖节流
- vue插槽
- 网络安全栏
- canvas指纹追踪技术
- exif照片信息
- xss攻击
- vue中操作引导
- 封装全局loading组件
- vue更换主题方案(手动)
- vue项目打包优化
- 组件递归案例
- Promise及异步操作介绍
- vue-cli打包的dist文件怎么直接运行
- 浏览器页签通信(BroadcastChannel)
- nginx配置