第三部分：JavaScript進階
目錄
第三部分：JavaScript進階
十二、深淺拷貝
12.1 淺拷貝
12.2 深拷貝
1. 通過遞歸實現深拷貝
2. js庫lodash里面cloneDeep內部實現了深拷貝
3. 通過JSON.stringify()實現
十三、異常處理
13.1 throw拋異常
13.2 try /catch捕獲異常
13.3 debugger
十四、處理this
14.1 this指向
1. 普通函數this指向
2. 箭頭函數this指向
14.2 改變this
1. call() - 了解
2. apply() - 理解
3. bind() - 重點
call apply bind 總結
十五、性能優化
15.1 防抖
15.2 節流
十六、節流綜合案例
案例-頁面打開，可以記錄上一次的視頻播放位置
十二、深淺拷貝
開發中我們經常需要復制一個對象。如果直接用賦值會有下面問題：
12.1 淺拷貝
首先淺拷貝和深拷貝只針對引用類型
淺拷貝：拷貝的是地址常見方法
常見方法：
- 拷貝對象：Object.assgin() / 展開運算符...obj} 拷貝對象
- 拷貝數組：Array.prototype.concat() 或者[..arr]
總結：
1. 直接賦值和淺拷貝有什么區別?
- 直接賦值的方法，只要是對象，都會相互影響，因為是直接拷貝對象棧里面的地址
- 淺拷貝如果是一層對象，不相互影響，如果出現多層對象拷貝還會相互影響
2. 淺拷貝怎么理解?
- 拷貝對象之后，里面的屬性值是簡單數據類型直接拷貝值
- 如果屬性值是引用數據類型則拷貝的是地址
12.2 深拷貝
首先淺拷貝和深拷貝只針對引用類型
深拷貝：拷貝的是對象，不是地址
常見方法：
1. 通過遞歸實現深拷貝
2. lodash/cloneDeep
3. 通過JSON.stringify()實現
1. 通過遞歸實現深拷貝
函數遞歸：如果一個函數在內部可以調用其本身，那么這個函數就是遞歸函數
- 簡單理解：函數內部自己調用自己，這個函數就是遞歸函數
- 遞歸函數的作用和循環效果類似
- 由于遞歸很容易發生“棧溢出”錯誤(stack overflow)，所以必須要加退出條件return
練習-利用遞歸函數實現setTimeout模擬setInterval效果
需求：
①頁面每隔-秒輸出當前的時間
②輸出當前時間可以使用：new Date().toLocaleString()
通過遞歸函數實現深拷貝(簡版)：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>const obj = {uname: 'pink',age: 18,hobby: ['乒乓球', '足球'],family: {baby: '小pink'}}const o = {}// 拷貝函數function deepCopy(newObj, oldObj) {debuggerfor (let k in oldObj) {// 處理數組的問題 一定先寫數組 在寫 對象 不能顛倒if (oldObj[k] instanceof Array) {newObj[k] = []// newObj[k] 接收 [] hobby// oldObj[k] ['乒乓球', '足球']deepCopy(newObj[k], oldObj[k])} else if (oldObj[k] instanceof Object) {newObj[k] = {}deepCopy(newObj[k], oldObj[k])}else {// k 屬性名 uname age oldObj[k] 屬性值 18// newObj[k] === o.uname 給新對象添加屬性newObj[k] = oldObj[k]}}}deepCopy(o, obj) // 函數調用 兩個參數 o 新對象 obj 舊對象console.log(o)o.age = 20o.hobby[0] = '籃球'o.family.baby = '老pink'console.log(obj)console.log([1, 23] instanceof Object)// 復習// const obj = {// uname: 'pink',// age: 18,// hobby: ['乒乓球', '足球']// }// function deepCopy({ }, oldObj) {// // k 屬性名 oldObj[k] 屬性值// for (let k in oldObj) {// // 處理數組的問題 k 變量// newObj[k] = oldObj[k]// // o.uname = 'pink'// // newObj.k = 'pink'// }// }</script>
</body></html>2. js庫lodash里面cloneDeep內部實現了深拷貝
Lodash網址：Lodash 簡介 | Lodash中文文檔 | Lodash中文網
3. 通過JSON.stringify()實現
總結：
1. 實現深拷貝三種方式?
