第三部分：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) {
debugger
for (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 = 20
o.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. 实现深拷贝三种方式?
