JS进阶-高阶技巧
深浅拷贝
首先浅拷贝和深拷贝只针对引用类型
• 浅拷贝
开发中我们经常需要复制一个对象。如果直接用赋值会有下面问题：
这好比有同学来pink老师这里拷视频，竟然用的是剪切…气人不
浅拷贝：拷贝的是地址
1. 拷贝对象：Object.assgin() / 展开运算符 {...obj} 拷贝对象
2.拷贝数组：Array.prototype.concat() 或者 [...arr]
如果是简单数据类型拷贝值，引用数据类型拷贝的是地址 (简单理解： 如果是单层对象，没问题，如果有多层就有问题)
1. 直接赋值和浅拷贝有什么区别？
- 直接赋值的方法，只要是对象，都会相互影响，因为是直接拷贝对象栈里面的地址
- 浅拷贝如果是一层对象，不相互影响，如果出现多层对象拷贝还会相互影响
2. 浅拷贝怎么理解？
- 拷贝对象之后，里面的属性值是简单数据类型直接拷贝值
- 如果属性值是引用数据类型则拷贝的是地址
• 深拷贝
深拷贝：拷贝的是对象，不是地址
常见方法：
1. 通过递归实现深拷贝
2. lodash/cloneDeep
3. 通过JSON.stringify()实现
1. 通过递归实现深拷
函数递归：如果一个函数在内部可以调用其本身，那么这个函数就是递归函数
简单理解:函数内部自己调用自己, 这个函数就是递归函数
递归函数的作用和循环效果类似
由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件 return
2. js库lodash里面cloneDeep内部实现了深拷贝
3. 通过JSON.stringify()实现
异常处理
• throw 抛异常
异常处理是指预估代码执行过程中可能发生的错误，然后最大程度的避免错误的发生导致整个程序无法继续运行
1. 抛出异常我们用那个关键字？它会终止程序吗？
- throw 关键字
- 会中止程序
2. 抛出异常经常和谁配合使用？
- Error 对象配合 throw 使用
• try /catch 捕获异常
我们可以通过try / catch 捕获错误信息（浏览器提供的错误信息） try 试试 catch 拦住 finally 最后
• debugger
我们可以通过try / catch 捕获错误信息（浏览器提供的错误信息）
debugger就相当于打断点，只是它是代码形式的
处理this
• this指向
1. 普通函数this指向
普通函数的调用方式决定了 this 的值，即【谁调用 this 的值指向谁】
普通函数没有明确调用者时 this 值为 window，严格模式下没有调用者时 this 的值为 undefined
2. 箭头函数this指向
箭头函数中的 this 与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在 this ！
1. 箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的
2.箭头函数中的this引用的就是最近作用域中的this
3.向外层作用域中，一层一层查找this，直到有this的定义
注意情况1：
在开发中【使用箭头函数前需要考虑函数中 this 的值】，事件回调函数使用箭头函数时，this 为全局的 window 因此DOM事件回调函数如果里面需要DOM对象的this，则不推荐使用箭头函数
注意情况2：
同样由于箭头函数 this 的原因，基于原型的面向对象也不推荐采用箭头函数
• 改变this
JavaScript 中还允许指定函数中 this 的指向，有 3 个方法可以动态指定普通函数中 this 的指向
- call()
- apply()
- bind()
call apply bind 总结
相同点:
- 都可以改变函数内部的this指向.
区别点:
- call 和 apply 会调用函数, 并且改变函数内部this指向.
- call 和 apply 传递的参数不一样, call 传递参数 aru1, aru2..形式 apply 必须数组形式[arg]
- bind 不会调用函数, 可以改变函数内部this指向.
主要应用场景:
- call 调用函数并且可以传递参数
- apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
- bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向.
性能优化
• 节流
• 防抖
综合案例
页面打开，可以记录上一次的视频播放位置
分析：
两个事件:
①：ontimeupdate 事件在视频/音频（audio/video）当前的播放位置发送改变时触发
②：onloadeddata 事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频（audio/video）的
下一帧时触发
谁需要节流？
ontimeupdate ， 触发频次太高了，我们可以设定 1秒钟触发一次
综合案例
