### 什么是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配置