4.1-内容和浅拷贝
![](https://i-blog.csdnimg.cn/blog_migrate/c9b716e96bb4e5e7f79d945ab8a7ad2d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3ff68bea139a9fbab9a6c424993721ef.png)
![](https://i-blog.csdnimg.cn/blog_migrate/79dd55043bdaa26721e7c380b6db84cf.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9da05628ad37b1d4f07aa5ef7c09e270.png)
![](https://i-blog.csdnimg.cn/blog_migrate/71543a43ceb87a8b75317bd7e5196b88.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9afc5714f8f25b0504cf2fdb0f996a59.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d8bcc56da737b75167a7a20fd098f0f0.png)
4.2-递归函数
![](https://i-blog.csdnimg.cn/blog_migrate/4cf365e9837e05b5fe804b98ccc4d190.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2e25eea5c86867f91db9902a0568c7eb.png)
4.3-深拷贝实现
![](https://i-blog.csdnimg.cn/blog_migrate/470ad099404a03e10d72ed29013402c5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2e6e01c79979785239ec4fa029556883.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b3cd6a498f09894cc24949ac03f354c8.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b84cafa4a49f06b3434aee645d9afb36.png)
![](https://i-blog.csdnimg.cn/blog_migrate/8f962b5612e15a01f90fa5c06698a97c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3a35f7cab8f4a3bbd0d75075efd11ed9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/25bb8611ab73568ef3de6c6787b86112.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2ad9727b5cc4dd01b83265bca12fffdf.png)
4.4-利用lodash和JSON实现深
![](https://i-blog.csdnimg.cn/blog_migrate/85fafb57ddecebcfbd5fca5cfdf408f8.png)
![](https://i-blog.csdnimg.cn/blog_migrate/492b5fc2429185b76710c8632e0e2210.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4423ab2b590b42546791a72599a5f3ea.png)
![](https://i-blog.csdnimg.cn/blog_migrate/314c847a6187c8f0581c6e56c2cdf259.png)
![](https://i-blog.csdnimg.cn/blog_migrate/30cda268ffb7a10ad74a3731f4373a74.png)
4.5-异常处理-throw和try、catch
![](https://i-blog.csdnimg.cn/blog_migrate/992ea08dcd5555c8b43915e0adc5ce4c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c74341e6b32efdb52360738e82d1d25e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1488b79187e499f0b9f42bca3578a9fd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ca4bca8e7c6d782587cc1704c9fe00d3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d2183fd6e0c4a9ac26393e2c389e1951.png)
![](https://i-blog.csdnimg.cn/blog_migrate/afd2645a4ba3b0e3bd0f23b1a972100b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d8ad664a0e572bc13c6a0a288cea90b7.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9e4ac61f78c96d3f66664d65ea2eb88f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a8a0d9b1e123e96c58dfbf9cd9f26288.png)
![](https://i-blog.csdnimg.cn/blog_migrate/007824028c2c7265923a29bbd2cb58d2.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9094b480e1473ed2de52338a4f841f26.png)
![](https://i-blog.csdnimg.cn/blog_migrate/fa7262f8867182a9d5cc544c4bb69bca.png)
4.6-普通函数和箭头函数的this
![](https://i-blog.csdnimg.cn/blog_migrate/8c0cafb5ee77484b522e01e5a6624c8d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d0167368641f0bafce22530ad32e1f3a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/8612f8580f9c91a98ec4587d7fd43483.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1b00a3c78411b2a351ee4777f7f96b81.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b1dc49c15bc452fff4a8a23a2d3447bb.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3fa93146d06ba37fd0ebab2347e3c526.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c60cc8b4aa91df7d94646e86c4ae4bcc.png)
![](https://i-blog.csdnimg.cn/blog_migrate/8660f0488f15d56a4e5c00f5187dc7cc.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7e594a1cabc1ef41875a6412322fd06b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e2a19cc69a04fd1500db871132980f0b.png)
4.7-call方法改变this指向
![](https://i-blog.csdnimg.cn/blog_migrate/e5ca0eea9b050df28f2a1e54dc1a3536.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7946afb0b178d514012fe851669cef1f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/10b2e3c6476f794f556175872c3e38a5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/41890a349c412c83f14822aac65aca55.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3284b59c85dde7627c7598c269f1107c.png)
4.8-apply方法
![](https://i-blog.csdnimg.cn/blog_migrate/c200a09982728c64d3cb40776384bf94.png)
![](https://i-blog.csdnimg.cn/blog_migrate/aae94d3ecb04749252beb60c33312254.png)
![](https://i-blog.csdnimg.cn/blog_migrate/8cd665662dece3e7791c1a7161cebb7c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/95c3177ce45619db98eca663c04847f9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5b18ea43eb18d5d427a62388c4a40955.png)
![](https://i-blog.csdnimg.cn/blog_migrate/82c4e0f84eaefddb824eb6827b854c48.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4d577fdd93c5a480fb8683b000f258da.png)
4.9-bind方法以及总结
![](https://i-blog.csdnimg.cn/blog_migrate/8f67ddf4c6f8caa5dbd984685e6abe86.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cc09b900070024935f73ba3f1366fafc.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6307d2db5657958b64cc058998873071.png)
![](https://i-blog.csdnimg.cn/blog_migrate/bb83fff1cd790d34b0deca981d463d72.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ed7b4f136dfd1458b7870612bf80a2c9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0a5f0a857913c8fcca51831ba1264ce4.png)
4.10-什么是防抖以及底层实现
![](https://i-blog.csdnimg.cn/blog_migrate/115487c83ab7511ca5181ad4700a7db5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3d2a228e292e0ce648a11deb5996b9b2.png)
![](https://i-blog.csdnimg.cn/blog_migrate/156785ba5600e6c5310c8aa7977dc6f7.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2b4ead60d7b9e400c39087b52b1b4011.png)
![](https://i-blog.csdnimg.cn/blog_migrate/82c78744546d256b099e61accf25736e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/03811a2e2b8fdd5d033c19eb26455d3e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f4c6fb4a7a02ab1ebcf2ed197142b3eb.png)
![](https://i-blog.csdnimg.cn/blog_migrate/883f6dbfc5d101b5f036ac696bd87156.png)
![](https://i-blog.csdnimg.cn/blog_migrate/dd53f38538a0fdd6b01483f37014ead3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/38b2a304eba76d892c7f2a5f75a69de8.png)
4.11-什么是节流以及底层实现
![](https://i-blog.csdnimg.cn/blog_migrate/7fbaaee5a7488371014af7296af5a0ca.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d8429b1b8391cb468d559e4f831ee8fb.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2111328ecd36368467b864ff9fe15db4.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c6db941e373692d7f493ac6087bf05c5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a0f0f3cf83c2e7e737fd4dbcf3fbf3c9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/989aa81ed8a874a90424d0a425ddeaed.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f448e754ab914d3f018ccb5be6b65713.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ff6285396a662ff0ef5c94382f2b2122.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a6e863f3f07af9b4e0665853bcab8b50.png)
4.12-节流综合案例-记录视频播放
![](https://i-blog.csdnimg.cn/blog_migrate/646476d88f1216de13312551428f764d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a552ad1275fcea6657231227f9999977.png)
![](https://i-blog.csdnimg.cn/blog_migrate/28fd716759b88b17c5e6dfc28f210760.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ba224a9344196be9bf72c28c598ab8ab.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c237b5975ddeeeaeb906dc5e181f5312.png)
<!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" />
<meta name="referrer" content="never" />
<title>综合案例</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 1200px;
margin: 0 auto;
}
.video video {
width: 100%;
padding: 20px 0;
}
.elevator {
position: fixed;
top: 280px;
right: 20px;
z-index: 999;
background: #fff;
border: 1px solid #e4e4e4;
width: 60px;
}
.elevator a {
display: block;
padding: 10px;
text-decoration: none;
text-align: center;
color: #999;
}
.elevator a.active {
color: #1286ff;
}
.outline {
padding-bottom: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<a href="http://pip.itcast.cn">
<img src="https://pip.itcast.cn/img/logo_v3.29b9ba72.png" alt="" />
</a>
</div>
<div class="video">
<video src="https://v.itheima.net/LapADhV6.mp4" controls></video>
</div>
<div class="elevator">
<a href="javascript:;" data-ref="video">视频介绍</a>
<a href="javascript:;" data-ref="intro">课程简介</a>
<a href="javascript:;" data-ref="outline">评论列表</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script>
// 1. 获取元素 要对视频进行操作
const video = document.querySelector('video')
video.ontimeupdate = _.throttle(() => {
// console.log(video.currentTime) 获得当前的视频时间
// 把当前的时间存储到本地存储
localStorage.setItem('currentTime', video.currentTime)
}, 1000)
// 打开页面触发事件,就从本地存储里面取出记录的时间, 赋值给 video.currentTime
video.onloadeddata = () => {
// console.log(111)
video.currentTime = localStorage.getItem('currentTime') || 0
}
</script>
</body>
</html>
----JavaScript核心与进阶大结局-------
![](https://i-blog.csdnimg.cn/blog_migrate/6046516d1a8c5f940c5ce7f7f9e653d7.png)