当前位置：首页 > article >正文

JavaScript进阶(十二)

article 2025/9/7 18:20:52

第三部分：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>