浅拷贝:拷贝对象的属性的值(简单类型
存的值就是值本身
,引用类型
存的值是对象的堆地址
),所以如果拷贝的对象值中有引用类型属性
,拷贝后的新对象属性和源对象属性指向同一个对地址,修改
此指向的对象会相互影响
。
常见方法:
案例如下:
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>浅拷贝title>
head>
<body>
<script>
const user = {
uname: 'pink',
age: 18,
family: {
baby: '小pink'
}
}
// 浅拷贝
const o1 = {...user
}
o1.age = 20 //对象属性值类型修改不影响
console.log(o1.age) //20
console.log(user.age) //18
// 浅拷贝
const o2 = {}
Object.assign(o2, user)
o2.age = 20
o2.family.baby = '老pink' //对象属性引用类型修改会相互影响
console.log(o2.family.baby) //老pink
console.log(user.family.baby) //老pink
script>
body>
html>
递归函数实现深拷贝:
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>递归函数实现深拷贝title>
head>
<body>
<script>
const obj = {
uname: 'pink',
age: 18,
hobby: ['乒乓球', '足球'],
family: {
baby: '小pink'
}
}
const o = {}
// 拷贝函数
function deepCopy(newObj, oldObj) {
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]
}
}
}
// 函数调用 两个参数 o 新对象 obj 旧对象
deepCopy(o, obj)
o.age = 20
o.hobby[0] = '篮球'
o.family.baby = '老pink'
console.log(o.age) //20
console.log(o.hobby[0]) //篮球
console.log(o.family.baby) //老pink
console.log(obj.age) //18
console.log(obj.hobby[0]) //乒乓球
console.log(obj.family.baby) //小pink
script>
body>
html>
lodash.cloneDeep实现深拷贝:
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>lodash.cloneDeep实现深拷贝title>
head>
<body>
<script src="./lodash.min.js">script>
<script>
const obj = {
uname: 'pink',
age: 18,
hobby: ['乒乓球', '足球'],
family: {
baby: '小pink'
}
}
const o = _.cloneDeep(obj)
o.age = 20
o.hobby[0] = '篮球'
o.family.baby = '老pink'
console.log(o.age) //20
console.log(o.hobby[0]) //篮球
console.log(o.family.baby) //老pink
console.log(obj.age) //18
console.log(obj.hobby[0]) //乒乓球
console.log(obj.family.baby) //小pink
script>
body>
html>
JSON.stringify实现深拷贝:
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>JSON.stringify实现深拷贝title>
head>
<body>
<script>
const obj = {
uname: 'pink',
age: 18,
hobby: ['乒乓球', '足球'],
family: {
baby: '小pink'
}
}
// 把对象转换为 JSON 字符串
const o = JSON.parse(JSON.stringify(obj))
o.age = 20
o.hobby[0] = '篮球'
o.family.baby = '老pink'
console.log(o.age) //20
console.log(o.hobby[0]) //篮球
console.log(o.family.baby) //老pink
console.log(obj.age) //18
console.log(obj.hobby[0]) //乒乓球
console.log(obj.family.baby) //小pink
script>
body>
html>
抛出异常信息
,程序也会终止执行
案例如下:
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>throw抛出异常title>
head>
<body>
<script>
function fn(x, y) {
if (!x || !y) {
// throw '没有参数传递进来'
throw new Error('没有参数传递过来')
}
return x + y
}
console.log(fn())
script>
body>
html>
案例如下:
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>try-catch捕获异常title>
head>
<body>
<p>123p>
<script>
function fn() {
try {
// 可能发送错误的代码 要写到 try
const p = document.querySelector('.p')
p.style.color = 'red'
} catch (err) {
// 拦截错误,提示浏览器提供的错误信息,但是不中断程序的执行
console.log(err.message)
} finally {
// 不管你程序对不对,一定会执行的代码
console.log('不管你程序对不对,一定会执行的代码')
}
console.log(11)
}
fn()
script>
body>
html>
普通函数this指向
箭头函数this指向
箭头函数中的并不存在 this,箭头函数中的this是绑定的最近作用域中的this,向外层作用域中一层一层查找this,直到有this的定义
不适用情况:构造函数,原型函数,字面量对象中函数,dom事件函数等
适用情况:需要使用上层this的地方
案例如下:
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>普通函数的this指向title>
head>
<body>
<button>点击button>
<script>
// 普通函数:谁调用我,this就指向谁
console.log(this) // window
function fn() {
console.log(this) // window
}
window.fn()
window.setTimeout(function() {
console.log(this) // window
}, 1000)
document.querySelector('button').addEventListener('click', function() {
console.log(this) // 指向 button
})
const obj = {
sayHi: function() {
console.log(this) // 指向 obj
}
}
obj.sayHi()
script>
body>
html>
调用函数
,同时指定
被调用函数中 this
的值fun.call(thisArg, arg1, arg2, ...)
调用函数
,同时指定
被调用函数中 this
的值fun.apply(thisArg, [argsArray])
必须包含在数组里面
因此 apply 主要跟数组有关系,比如使用 Math.max() 求数组的最大值
不会调用函数
。指定
被调用函数中 this
的值,返回新函数fun.bind(thisArg, arg1, arg2, ...)
原函数拷贝 (新函数)
因此只改变 this 指向,不调用函数时,使用 bind,比如改变定时器内部的this指向.
call案例如下:
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>calltitle>
head>
<body>
<script>
const obj = {
uname: 'pink'
}
function fn(x, y) {
console.log(this) // window
console.log(x + y)
}
// 1. 调用函数
// 2. 改变this指向obj,原来是window调用指向window
// 3. 返回值就是函数的返回值
fn.call(obj, 1, 2)
script>
body>
html>
apply案例如下:
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>applytitle>
head>
<body>
<script>
const obj = {
age: 18
}
function fn(x, y) {
console.log(this)
console.log(x + y)
}
// 1. 调用函数
// 2. 改变this指向
// 3. 返回值就是函数的返回值
fn.apply(obj, [1, 2])
// 使用场景:求数组最大值最小值
const arr = [100, 44, 77]
const max = Math.max.apply(Math, arr)
const min = Math.min.apply(null, arr)
console.log(max, min)
script>
body>
html>
bind案例如下:
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>bindtitle>
head>
<body>
<button>发送短信button>
<script>
const obj = {
age: 18
}
function fn() {
console.log(this)
}
// 1. bind不会调用函数
// 2. 能改变this指向
// 3. 返回值是个函数,但是这个函数里面的this是更改过的obj
const fun = fn.bind(obj)
fun()
// 需求:有一个按钮,点击里面就禁用,2秒钟之后开启
document.querySelector('button').addEventListener('click', function() {
// 禁用按钮
this.disabled = true
window.setTimeout(function() {
// 在这个普通函数里面,我们要this由原来的window 改为 btn
this.disabled = false
}.bind(this), 2000) // 这里的this 和 btn 一样
})
script>
body>
html>
重新计算
函数执行时间案例如下:
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>防抖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
//数值加1
function mouseMove() {
box.innerHTML = ++i
}
// 防抖函数
function debounce(fn, t) {
let timeId
return function() {
// 如果有定时器就清除
if (timeId) clearTimeout(timeId)
// 开启定时器
timeId = setTimeout(function() {
fn()
}, t)
}
}
//鼠标移动触发函数
box.addEventListener('mousemove', debounce(mouseMove, 1000))
script>
body>
html>
案例如下:
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>节流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
//数值加1
function mouseMove() {
box.innerHTML = ++i
}
// 节流函数
function throttle(fn, t) {
// 起始时间
let startTime = 0
return function() {
// 得到当前的时间
let now = Date.now()
// 判断如果大于等于 500 调用函数
if (now - startTime >= t) {
// 调用函数
fn()
// 起始的时间 = 现在的时间
startTime = now
}
}
}
box.addEventListener('mousemove', throttle(mouseMove, 1000))
script>
body>
html>
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>lodash节流和防抖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 src="./lodash.min.js">script>
<script>
const box = document.querySelector('.box')
let i = 1
//数值加1
function mouseMove() {
box.innerHTML = ++i
}
// lodash 节流
// box.addEventListener('mousemove', _.throttle(mouseMove, 500))
// lodash 防抖
box.addEventListener('mousemove', _.debounce(mouseMove, 500))
script>
body>
html>