前端学习笔记-JS进阶篇-04

1、深浅拷贝

开发中经常需要复制一个对象。如果直接用赋值会有下面问题：

首先浅拷贝和深拷贝只针对引用类型

1.1、浅拷贝

浅拷贝：拷贝的是地址

常见方法：

1.2.1、 拷贝对象：Object.assgin() / 展开运算符 {...obj} 拷贝对象

1.2.2、拷贝数组：Array.prototype.concat() 或者 [...arr]

如果是简单数据类型拷贝值，引用数据类型拷贝的是地址(简单理解：如果是单层对象，没问题，如果有多层就有问题) 

1. 直接赋值和浅拷贝有什么区别？

• 直接赋值的方法，只要是对象，都会相互影响，因为是直接拷贝对 象栈里面的地址
• 浅拷贝如果是一层对象，不相互影响，如果出现多层对象拷贝还会 相互影响

2. 浅拷贝怎么理解？

• 拷贝对象之后，里面的属性值是简单数据类型直接拷贝值
• 如果属性值是引用数据类型则拷贝的是地址

1.2、深拷贝

深拷贝：拷贝的是对象，不是地址

常见方法：

1.2.1、通过递归实现深拷贝

函数递归： 如果一个函数在内部可以调用其本身，那么这个函数就是递归函数

简单理解:函数内部自己调用自己, 这个函数就是递归函数

递归函数的作用和循环效果类似

由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件return

 

1.2.2、lodash/cloneDeep

【js库lodash里面cloneDeep内部实现了深拷贝】

1.2.3、通过JSON.stringify()实现

2、异常处理

异常处理是指预估代码执行过程中可能发生的错误，然后最大程度的避免错误的发生导致整个程序无法继续运行

2.1、throw 抛异常

1. throw 抛出异常信息，程序也会终止执行

2. throw 后面跟的是错误提示信息

3. Error 对象配合throw 使用，能够设置更详细的错误信息

2.2、try /catch 捕获异常

通过try / catch 捕获错误信息（浏览器提供的错误信息） try 试试 catch 拦住 finally 最后

1. try...catch 用于捕获错误信息

2. 将预估可能发生错误的代码写在try代码段中

3. 如果try代码段中出现错误后，会执行catch代码段，并截获到错误信息

4. finally 不管是否有错误，都会执行

5.利用catch的参数调用错误信息

2.3、debugger

通过try / catch 捕获错误信息（浏览器提供的错误信息）

3、处理this

3.1、this指向

3.1.1、普通函数

普通函数的调用方式决定了this的值，即【谁调用this的值指向谁】

普通函数没有明确调用者时this值为window，严格模式下没有调用者时this的值为undefined 

 

3.1.2、箭头函数

箭头函数中的this与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在this

1. 箭头函数会默认帮我们绑定外层this 的值，所以在箭头函数中this 的值和外层的this 是一样的

2.箭头函数中的this引用的就是最近作用域中的this

3.向外层作用域中，一层一层查找this，直到有this的定义

注意情况1：

在开发中【使用箭头函数前需要考虑函数中this的值】，事件回调函数使用箭头函数时，this为全局的window，因此DOM事件回调函数如果里面需要DOM对象的this，则不推荐使用箭头函数 

 

注意情况2：

同样由于箭头函数this的原因，基于原型的面向对象也不推荐采用箭头函数

 

总结：

1. 函数内不存在this，沿用上一级的

2.不适用---构造函数，原型函数，dom事件函数等等

3. 适用---需要使用上层this的地方

4. 使用正确的话，它会在很多地方带来方便

3.2、改变this

JavaScript 中还允许指定函数中this的指向，有3个方法可以动态指定普通函数中this的指向

3.2.1、call()-了解

使用call 方法调用函数，同时指定被调用函数中this的值

语法： fun.call(thisArg, arg1, arg2, ...)

• thisArg：在fun 函数运行时指定的this 值
• arg1，arg2：传递的其他参数
• 返回值就是函数的返回值，因为它就是调用函数

 

3.2.2、apply()

使用apply方法调用函数，同时指定被调用函数中this的值

语法： fun.apply(thisArg, [argsArray])

• thisArg：在fun函数运行时指定的this 值
• argsArray：传递的值，必须包含在数组里面
• 返回值就是函数的返回值，因为它就是调用函数
• 因此apply 主要跟数组有关系，比如使用Math.max() 求数组的最大值

案例：求数组最大值2个方法：

3.3.3、bind()-重点

bind() 方法不会调用函数。但是能改变函数内部this 指向

语法： fun.bind(thisArg, arg1, arg2, ...)

• thisArg：在fun 函数运行时指定的this 值
• arg1，arg2：传递的其他参数
• 返回由指定的this 值和初始化参数改造的原函数拷贝（新函数）
• 因此当我们只是想改变this 指向，并且不想调用这个函数的时候，可以使用bind，比如改变定时器内部的 this指向

call apply bind 总结

相同点:

• 都可以改变函数内部的this指向.

区别点:

• call 和apply 会调用函数, 并且改变函数内部this指向.
• call 和apply 传递的参数不一样, call 传递参数aru1, aru2..形式 apply 必须数组形式[arg]
• bind 不会调用函数, 可以改变函数内部this指向.

主要应用场景:

• call 调用函数并且可以传递参数
• apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
• bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向.

4、性能优化

4.1、防抖-debounce

触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间【北京买房政策：需要连续5年的社保，如果中间有一年断了社保，则需要从新开始计算 比如，我2020年开始计算，连续交5年，也就是到2024年可以买房了，包含2020年 但是我2024年断社保了，整年没交，则需要从2025年开始算第一年往后推5年… 也就是2029年才能买房…】

开发使用场景-搜索框防抖 假设输入就可以发送请求，但是不能每次输入都去发送请求，输入比较快发送请求会比较多。我们设定一个时间，假如300ms，当输入第一个字符时候，300ms后发送请求，但是在200ms的时候又输入了一个字符， 则需要再等300ms 后发送请求

案例 利用防抖来处理-鼠标滑过盒子显示文字

要求：鼠标在盒子上移动，鼠标停止之后，500ms后里面的数字就会变化+1 利用防抖的方式实现 核心思路：

1. 利用定时器实现，当鼠标滑过，判断有没有定时器，还有就清除，以最后一次滑动为准开启定时器 写一个防抖函数debounce ，来控制这个操作函数(mouseMove)
2. 防抖函数传递2个参数，第一个参数mouseMove函数，第二个参数指定时间500ms
3. 鼠标移动事件，里面写的是防抖函数
4. 声明定时器变量 timeId
5. 但是节流函数因为里面写的函数名debounce(mouseMove, 500), 是调用函数，无法再次调用执行， 所以需要在节流函数里面写return 函数这样可以多次执行
6. 如果有定时器，则清除定时器
7. 否则开启定时器，在设定时间内，调用函数

4.2、节流-throttle

所谓节流，就是指连续触发事件但是在n秒中只执行一次函数【只有等到了上一个人做完核酸，整个动作完成了，第二个人才能排队跟上】【王者荣耀游戏中技能冷却的时候，就算一直点都是灰色，必须等技能冷却结束才能继续点击技能的释放】

开发使用场景–小米轮播图点击效果 、 鼠标移动、页面尺寸缩放resize、滚动条滚动就可以加节流。假如一张轮播图完成切换需要300ms，不加节流效果，快速点击，则嗖嗖嗖的切换。加上节流效果，不管快速点击多少次，300ms时间内，只能切换一张图片。

案例 利用节流来处理-鼠标滑过盒子显示文字

要求：鼠标在盒子上移动，里面的数字就会变化+1

利用节流的方式，鼠标经过，500ms ，数字才显示

核心思路： 利用时间相减：移动后的时间- 刚开始移动的时间 >= 500ms 我才去执行mouseMove函数

1. 声明一个起始时间startTime= 0
2. 但是节流函数因为里面写的函数名 throttle(mouseMove, 500), 是调用函数，无法再次调用执行 ，所以需要在节流函数里面写return 函数这样可以多次执行
3. 记录当前时间 now = Date.now()
4. 进行判断如果大于等于500ms，则执行函数，但是千万不要忘记让起始时间 = 现在时间

1. 节流和防抖的区别是？

• 节流: 就是指连续触发事件但是在n秒中只执行一次函数,比如 可以利用节流实现1s之内只能触发一次鼠标移动事件
• 防抖：如果在n秒内又触发了事件，则会重新计算函数执行时间

2. 节流和防抖的使用场景是？

• 节流: 鼠标移动，页面尺寸发生变化，滚动条滚动等开销比较 大的情况下
• 防抖: 搜索框输入，设定每次输入完毕n秒后发送请求，如果期 间还有输入，则从新计算时间

Lodash 库实现节流和防抖 

 

5、节流综合案例

案例 页面打开，可以记录上一次的视频播放位置

思路：

1. 在ontimeupdate事件触发的时候，每隔1秒钟，就记录当前时间到本地存储

2. 下次打开页面，onloadeddata事件触发，就可以从本地存储取出时间，让视频从取出的时间播放，如 果没有就默认为0s

3. 获得当前时间 video.currentTime