可视化编辑网站开发电子商务网站设计原则
第三部分：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. 实现深拷贝三种方式?