深浅拷贝
![前端学习——JS进阶 (Day4)_第1张图片](http://img.e-com-net.com/image/info8/9169ca4b2b1245958c20c7727d391a7b.jpg)
![前端学习——JS进阶 (Day4)_第2张图片](http://img.e-com-net.com/image/info8/571294a6174e40e78cc064150f3f8444.jpg)
![前端学习——JS进阶 (Day4)_第3张图片](http://img.e-com-net.com/image/info8/5b7722ee0331421b9588018771d652c7.jpg)
![前端学习——JS进阶 (Day4)_第4张图片](http://img.e-com-net.com/image/info8/9be35288531c406b92be1063f05834bb.jpg)
![前端学习——JS进阶 (Day4)_第5张图片](http://img.e-com-net.com/image/info8/5655227443b34d66849f227ea04ce5df.jpg)
练习
![前端学习——JS进阶 (Day4)_第6张图片](http://img.e-com-net.com/image/info8/72fec38f000742a0820fa0e463b16b68.jpg)
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<div></div>
<script>
function getTime(){
document.querySelector('div').innerHTML = new Date().toLocaleString()
setTimeout(getTime,1000)
}
getTime()
</script>
</body>
</html>
![在这里插入图片描述](http://img.e-com-net.com/image/info8/6b9611aab2ae4eb6a4570d093b0f3c46.jpg)
![前端学习——JS进阶 (Day4)_第7张图片](http://img.e-com-net.com/image/info8/8a75da02451945ba89c0a726053cfd64.jpg)
<!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] = []
deepCopy(newObj[k], oldObj[k])
} else if (oldObj[k] instanceof Object) {
newObj[k] = {}
deepCopy(newObj[k], oldObj[k])
}
else {
newObj[k] = oldObj[k]
}
}
}
deepCopy(o, obj)
console.log(o)
o.age = 20
o.hobby[0] = '篮球'
o.family.baby = '老pink'
console.log(obj)
console.log([1, 23] instanceof Object)
</script>
</body>
</html>
![前端学习——JS进阶 (Day4)_第8张图片](http://img.e-com-net.com/image/info8/75c83112f6a947b0817db81579f2899b.jpg)
<!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 src="./lodash.min.js"></script>
<script>
const obj = {
uname: 'pink',
age: 18,
hobby: ['乒乓球', '足球'],
family: {
baby: '小pink'
}
}
const o = _.cloneDeep(obj)
console.log(o)
o.family.baby = '老pink'
console.log(obj)
</script>
</body>
</html>
![前端学习——JS进阶 (Day4)_第9张图片](http://img.e-com-net.com/image/info8/75e09f6ae4d34e2c8f4f098380ffc173.jpg)
<!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 = JSON.parse(JSON.stringify(obj))
console.log(o)
o.family.baby = '123'
console.log(obj)
</script>
</body>
</html>
![前端学习——JS进阶 (Day4)_第10张图片](http://img.e-com-net.com/image/info8/e0a28d8fbaa947169f61d4df35adb494.jpg)
异常处理
throw 抛异常
![前端学习——JS进阶 (Day4)_第11张图片](http://img.e-com-net.com/image/info8/0cd74499659b466aad3340db5f91f506.jpg)
![前端学习——JS进阶 (Day4)_第12张图片](http://img.e-com-net.com/image/info8/bf48c9e7b3e5473ba9c322a6b88c8e2d.jpg)
try/catch 捕获错误信息
![前端学习——JS进阶 (Day4)_第13张图片](http://img.e-com-net.com/image/info8/88fac9615ed948b891f4a05bf6c3a8fe.jpg)
![前端学习——JS进阶 (Day4)_第14张图片](http://img.e-com-net.com/image/info8/5020c466ab9745f4b82bce0851faaaae.jpg)
debugger
![前端学习——JS进阶 (Day4)_第15张图片](http://img.e-com-net.com/image/info8/5c8b02b8ded64cdfa73f3051608c4dc3.jpg)
处理this
this指向——普通函数
![前端学习——JS进阶 (Day4)_第16张图片](http://img.e-com-net.com/image/info8/d782e680ea614f48b95671225780f858.jpg)
![前端学习——JS进阶 (Day4)_第17张图片](http://img.e-com-net.com/image/info8/f98a741a062641c5a65c39f618eec7f3.jpg)
![前端学习——JS进阶 (Day4)_第18张图片](http://img.e-com-net.com/image/info8/e9df8eee97964c55865f0da2f2b07b7c.jpg)
![前端学习——JS进阶 (Day4)_第19张图片](http://img.e-com-net.com/image/info8/0130659d75664dc3a78cd8bbb8fc28bd.jpg)
![前端学习——JS进阶 (Day4)_第20张图片](http://img.e-com-net.com/image/info8/728f184c9a3e4c50aff58973df5c69e7.jpg)
<!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>
<button>点击</button>
<script>
console.log(this)
function fn() {
console.log(this)
}
window.fn()
window.setTimeout(function () {
console.log(this)
}, 1000)
document.querySelector('button').addEventListener('click', function () {
console.log(this)
})
const obj = {
sayHi: function () {
console.log(this)
}
}
obj.sayHi()
</script>
</body>
</html>
![前端学习——JS进阶 (Day4)_第21张图片](http://img.e-com-net.com/image/info8/1523b7f0ade94f7c80029b7e9bae3f62.jpg)
改变this
![前端学习——JS进阶 (Day4)_第22张图片](http://img.e-com-net.com/image/info8/8ee40815ec974c518291a491459515a3.jpg)
![前端学习——JS进阶 (Day4)_第23张图片](http://img.e-com-net.com/image/info8/07e64666267a477a95de52d478eef1c1.jpg)
<!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'
}
function fn(x, y) {
console.log(this)
console.log(x + y)
}
fn.call(obj, 1, 2)
</script>
</body>
</html>
![前端学习——JS进阶 (Day4)_第24张图片](http://img.e-com-net.com/image/info8/72348dda51bb4728bdde3a371923cfb8.jpg)
![前端学习——JS进阶 (Day4)_第25张图片](http://img.e-com-net.com/image/info8/5166c108b8944d7fb28db9bca2dc6af1.jpg)
![前端学习——JS进阶 (Day4)_第26张图片](http://img.e-com-net.com/image/info8/ecd13eb2e70e4244ab292e535a17440f.jpg)
![前端学习——JS进阶 (Day4)_第27张图片](http://img.e-com-net.com/image/info8/2cab8da7a9394f678d880b40ac859b49.jpg)
![前端学习——JS进阶 (Day4)_第28张图片](http://img.e-com-net.com/image/info8/bae48af3040649fc89170f79bdfb88dc.jpg)
![前端学习——JS进阶 (Day4)_第29张图片](http://img.e-com-net.com/image/info8/ae56ee7f803541889bb3057829632c13.jpg)
性能优化
节流
![前端学习——JS进阶 (Day4)_第30张图片](http://img.e-com-net.com/image/info8/eb5b20c581eb4cb8b2b92d88bb7aa584.jpg)
案例
![前端学习——JS进阶 (Day4)_第31张图片](http://img.e-com-net.com/image/info8/c818bc28894a46c5a6185e9dca57d83d.jpg)
<!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>
<style>
.box {
width: 500px;
height: 500px;
background-color: #ccc;
color: #fff;
text-align: center;
font-size: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
const box = document.querySelector('.box')
let i = 1
function mouseMove() {
box.innerHTML = ++i
}
function throttle(fn, t) {
let startTime = 0
return function () {
let now = Date.now()
if (now - startTime >= t) {
fn()
startTime = now
}
}
}
box.addEventListener('mousemove', throttle(mouseMove, 500))
</script>
</body>
</html>
![前端学习——JS进阶 (Day4)_第32张图片](http://img.e-com-net.com/image/info8/b750e1e9a84b4baf93968cb10d2e1990.jpg)
防抖
![前端学习——JS进阶 (Day4)_第33张图片](http://img.e-com-net.com/image/info8/a28d5db28f354a7b8916af6412b8c3b0.jpg)
![前端学习——JS进阶 (Day4)_第34张图片](http://img.e-com-net.com/image/info8/3f85c6e019304ee8b104e98958ba5530.jpg)
![前端学习——JS进阶 (Day4)_第35张图片](http://img.e-com-net.com/image/info8/e02b792d5cf54e8bb92fd306fad6719a.jpg)