- 深浅拷贝
- 异常处理
- 处理this
- 性能优化
一. 深浅拷贝
深浅拷贝只针对引用类型
1.1 浅拷贝
- 拷贝的是地址
- 常见方法
（1）拷贝对象：Object.assign() / 展开运算符 {...obj}
（2）拷贝数组：Array.prototype.concat() 或者 [...arr]
- 浅拷贝存在的问题
① 简单数据类型拷贝的是值，引用数据类型拷贝的是地址
② 赋值的时候不会影响原来的值，如果是简单数据类型拷贝值，引用数据类型拷贝的是地址
③ 如果是单层对象，就没问题，如果是多层对象就有问题
改变o 的值不会影响obj的值
如果是多层对象，改变o的值就会影响到obj的值
- 直接赋值和浅拷贝有什么区别
① 直接赋值，只要是对象，就会互相影响，因为会直接拷贝对象栈里面的地址
② 浅拷贝如果是一层对象，不会相互影响，如果是多层对象，还是会互相影响
- 浅拷贝怎么理解
① 拷贝对象后，里面的属性值是简单数据类型直接拷贝值
② 如果属性值是引用数据类型则拷贝的是地址
1.2 深拷贝
- 深拷贝：拷贝的是对象，不是地址
- 常见方式
① 通过递归实现深拷贝
② loadash/cloneDeep
③ 通过JSON.stringify()实现
- 通过递归实现深拷贝
① 函数递归：如果一个函数在内部可以调用其本身，那么这个函数就是递归函数
② 就是自己调自己
③ 递归容易发生“栈溢出"错误，所以必须要加退出条件return
let i = 1
function fn () {
console.log(`这是第${i}次`)
if (i >= 6) {
return
}
i++
fn()
}
fn()- 递归实现
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]
}
// k 属性名 属性值 oldObj[k]
}
}
deepCopy(o, obj)
o.age = 20
o.hobby[0] = '篮球'
o.family.baby = '小hi'
console.log(o)
console.log(obj)
- 使用lodash实现深拷贝
<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>- 利用JSON.stringfy
const obj = {
uname :'pink',
age: 18,
hobby:['乒乓球', '足球'],
family: {
baby: '小pink'
}
}
// 1.先转换为字符串，然后再转回对象，就会生成一个新的对象，跟原来的对象没有关系，
// 修改里面的值不会影响原来的数据
const o = JSON.parse(JSON.stringify(obj))
console.log(o)
o.family.baby = '123'
console.log(obj)二.异常处理
- throw抛异常
- try/catch 捕获异常
- debugger
2.1 throw抛异常
① 异常处理是指预估代码在执行过程中可能发生的错误，然后最大程度的避免错误的发生导致整个程序无法继续执行
- throw 抛出异常信息，程序也会终止执行
- throw 后面跟的是错误提示信息
- Error对象配合throw使用，能够设置更详细的错误信息
function fn(x, y) {
if (!x || !y) {
// throw '没有参数传递进来'
// 精确到行
throw new Error('没有参数传递进来')
}
return x + y
}2.2 catch捕获异常
① 代码示例
function fn(){
try {
const p = document.querySelector('.p')
p.style.color = 'red'
} catch (err) {
// 只是拦截错误，提示浏览器提供的错误信息，但是不中断程序的执行
console.log(err.message)
// 加return 中断程序
// return
throw new Error('选择器错误了')
}
// 不管程序对不对，一定会执行的代码
finally {
alert('弹出对话框')
}
//
console.log(111)
}
fn()② 说明
- 可能发送错误的代码写到try中
- 如果try中的代码出现错误后，会执行catch中的代码段，并截获到错误信息
- catch会拦截错误，提示浏览器提供的错误信息，但是不中断程序的执行
- finally无论程序对错，一定会执行
2.3 debugger
作用：断点调试
三.this指向
3.1 普通函数的this指向
- 普通函数的调用方式决定了this的值，即【谁调用this的值就指向谁】
- 普通函数没有明确调用者时this的值为window, 严格模式(use strict)下没有调用者时this的值为undefined
3.2 箭头函数的this指向
- 箭头函数中的this与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在this
- 箭头函数中的this会默认绑定上一层的this值
- 会向外层作用域一层一层查找this, 直到有this的定义
3.3 注意情况
- DOM事件回调函数如果里面需要DOM对象的this, 不推荐使用箭头函数
- 基于原型的面向对象也不推荐采用箭头函数
- 构造函数，原型函数，DOM事件等不适用
- 适用于需要使用上层this的地方
3.4 改变this的指向
- call()
- apply()
- bind()
1.call（）
- 使用call方法调用函数，同时执行被调用函数中this的值
- 语法：fun.call(thisArg, arg1, arg2)
- 返回值就是函数的返回值，因为它就是调用函数
const obj = {
uname: 'pink'
}
function fn (x, y) {
console.log(x + y)
console.log(this) // obj
}
// 1.调用函数
// 2.改变this指向
fn.call(obj, 1, 2)2.apply()
- 使用apply方法调用函数，同时指定被调用函数中this的值
- 语法： fun.apply(thisArg, [argsArray])
- thisArg:在fun函数运行时指定的this值
- argsArray:传递的值，必须包含在数组里面
- 返回值就是函数的返回值，因为它就是调用函数
- apply主要跟数组有关系，比如使用Math.max() 求数组的最大值
const obj = {
uname: 'pink'
}
function fn (x, y) {
console.log(this)
console.log(x + y)
}
// 1.调用函数 2.改变this指向 3.第三个参数要放一个数组
fn.apply(obj, [1, 2])求数组最大值
const arr = [2, 4, 5]
const max = Math.max.apply(Math, arr)
console.log(max)
console.log(Math.max(...arr))3.bind()
- bind() 方法不会调用函数，但是能改变函数内部this指向
- 语法：fun.bind(thisArg, arg1, arg2)
- thisArg：在 fun函数运行时指定this的值
- arg1, arg2：传递的其他参数
- 返回由指定的this值和初始化参数改造的 原函数拷贝（新函数）
- 只是向改变this指向，并不想调用这个函数的时候，可以使用bind
- 如下代码，如果不调用fun的话只是去调用bind，fn函数是不会调用的
const obj = {
uname: 'pink'
}
function fn () {
console.log(this)
}
// 返回值是个函数，但是这个函数里面的this是更改过的obj
const fun = fn.bind(obj)
// console.log(fun)
fun()4. 相同点
- 都可以改变函数内部的this指向
5.区别点
- call 和 apply 会调用函数，并且改变函数内部this指向
- call和apply传递的参数不一样，call传递参数arg1, arg2...的形式，apply 必须传数组形式
- bind不会调用函数，可以改变函数内部this指向
6.主要应用场景
- call 调用函数并且可以传递参数
- apply 经常跟数组有关系，比如借助于数学对象实现数组最大值最小值
- bind 不调用函数，但还想改变this指向
四. 防抖
- 防抖：单位时间内，频发触发事件，只执行最后一次
- 使用场景
① 搜索框搜索输入，只需用户最后一次输入完，再发送请求
② 手机号，邮箱验证输入检测
- 需求实现：鼠标在盒子上移动，鼠标停止500ms之后，里面的数字才会变化 +1
① losash 提供的防抖来处理
const box = document.querySelector('.box')
let i = 1
function mouseMove() {
box.innerHTML = i++
// 如果里面存在大量消耗性能的代码，比如dom操作，数据处理，可能造成卡顿
}
box.addEventListener('mousemove', _.debounce(mouseMove, 500))② 手写一个防抖函数来处理
（1）定时器变量
（2）先判断是否有定时器，如果有定时器，先清除以前的定时器
（3）如果没有定时器则开启定时器，记得存到变量里面
（4）在定时器里面调用要执行的函数
function debounce (fn, t) {
let timer
// return 返回一个匿名函数
return function () {
if (timer) clearTimeout(timer)
timer = setTimeout(function () {
fn() // 加小括号调用
}, t)
}
}
box.addEventListener('mousemove', debounce(mouseMove, 500))五. 节流
- 单位时间内，频繁触发事件，只执行一次
- 举例：王者荣耀冷却技能
- 使用场景：鼠标移动mousemove 页面尺寸缩放resize 滚动条滚动scroll
- 实现方式
① 使用lodash实现
const box = document.querySelector('.box')
let i = 1
function mouseMove() {
box.innerHTML = i++
}
// // 500毫秒之内只会执行一次
box.addEventListener('mousemove', _.throttle(mouseMove, 500))② 自己写一个节流函数
// 1.声明一个定时器变量
// 2.当鼠标每次滑动都先判断是否有定时器，如果有定时器就不开启
// 3.如果没有定时器则开启定时器
// 4.定时器里面调用要执行的函数
// 5.定时器里面要把定时器清空
function throttle(fn, t) {
let timer = null
return function() {
if (!timer) {
timer = setTimeout(function() {
fn()
// 清空定时器
// 不能使用clearTimeout(timer), 在setTimeout中无法使用clearTimeout来清除定时器
timer = null
}, t)
}
}
}
box.addEventListener('mousemove', throttle(mouseMove, 500))节流防抖总结
