1 认识防抖和节流
2 underscore使用
3 防抖函数实现优化
4 节流函数实现优化
5 深拷贝函数的实现
6 事件总线工具实现
简而言之，防抖就是一直触发事件就一直往后拖延再执行。
节流就是一段时间就执行一次，不管中间你触发多少次。
防抖-认识防抖操作
<body> <button>按钮</button> <input type="text"> <!-- CDN引入: 网络的js文件 --> <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> --> <!-- 本地引入: 下载js文件, 并且本地引入 --> <script src="./js/underscore.js"></script> <script> // 1.获取input元素 const inputEl = document.querySelector("input") // 2.监听input元素的输入 // let counter = 1 // inputEl.oninput = function() { // console.log(`发送网络请求${counter++}:`, this.value) // } // 3.防抖处理代码 let counter = 1 inputEl.oninput = _.debounce(function() { console.log(`发送网络请求${counter++}:`, this.value) }, 3000) </script> </body>
防抖-实现防抖-基本实现(面试
需要拿到之前的执行的函数才能取消之前执行的函数，这里是通过let timer来获取的。
主要是通过定时器来做到延时执行，而定时器里面有timer置null的作用清除。
<body> <button>按钮</button> <input type="text"> <!-- CDN引入: 网络的js文件 --> <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> --> <!-- 本地引入: 下载js文件, 并且本地引入 --> <script src="./js/underscore.js"></script> <script> function hydebounce(fn, delay) { // 1.用于记录上一次事件触发的timer let timer = null // 2.触发事件时执行的函数 const _debounce = () => { // 2.1.如果有再次触发(更多次触发)事件, 那么取消上一次的事件 if (timer) clearTimeout(timer) // 2.2.延迟去执行对应的fn函数(传入的回调函数) timer = setTimeout(() => { fn() timer = null // 执行过函数之后, 将timer重新置null }, delay); } // 返回一个新的函数 return _debounce } </script> <script> // 3.自己实现的防抖 let counter = 1 inputEl.oninput = hydebounce(function() { console.log(`发送网络请求${counter++}`) }, 1000) </script> </body>
防抖-实现防抖-this和参数绑定
绑定this的过程
还有就是dom事件有绑定event事件，我们写hudebounce最终其实是在执行_debounce，那么这个函数其实已经隐式绑定了inputEl,拿到了this就是inputEl。而const _debounce = function(...args)可以拿到event和其他参数传递给fn函数。
<body> <button>按钮</button> <input type="text"> <!-- CDN引入: 网络的js文件 --> <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> --> <!-- 本地引入: 下载js文件, 并且本地引入 --> <script src="./js/underscore.js"></script> <script> function hydebounce(fn, delay) { // 1.用于记录上一次事件触发的timer let timer = null // 2.触发事件时执行的函数 const _debounce = function(...args) { // 2.1.如果有再次触发(更多次触发)事件, 那么取消上一次的事件 if (timer) clearTimeout(timer) // 2.2.延迟去执行对应的fn函数(传入的回调函数) timer = setTimeout(() => { fn.apply(this, args) timer = null // 执行过函数之后, 将timer重新置null }, delay); } // 返回一个新的函数 return _debounce } </script> <script> // 1.获取input元素 const inputEl = document.querySelector("input") // 未进行防抖处理代码 // let counter = 1 // inputEl.oninput = function(event) { // console.log(`发送网络请求${counter++}:`, this, event) // } // 2.underscore防抖处理代码 // let counter = 1 // inputEl.oninput = _.debounce(function() { // console.log(`发送网络请求${counter++}:`, this.value) // }, 1000) // 3.自己实现的防抖 let counter = 1 inputEl.oninput = hydebounce(function(event) { console.log(`发送网络请求${counter++}:`, this, event) }, 1000) </script> </body>
防抖-实现防抖-取消功能实现
oninput的事件，输入了就一定会执行了，我们可以设置一个按钮来取消这个事件的执行，具体怎么实现看代码。主要是hudebounce的_debounce是对象类型，所以可以直接.函数来取消执行。
<body> <button>按钮</button> <input type="text"> <button class="cancel">取消</button> <!-- CDN引入: 网络的js文件 --> <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> --> <!-- 本地引入: 下载js文件, 并且本地引入 --> <script src="./js/underscore.js"></script> <script> function hydebounce(fn, delay) { // 1.用于记录上一次事件触发的timer let timer = null // 2.触发事件时执行的函数 const _debounce = function(...args) { // 2.1.如果有再次触发(更多次触发)事件, 那么取消上一次的事件 if (timer) clearTimeout(timer) // 2.2.延迟去执行对应的fn函数(传入的回调函数) timer = setTimeout(() => { fn.apply(this, args) timer = null // 执行过函数之后, 将timer重新置null }, delay); } // 3.给_debounce绑定一个取消的函数 _debounce.cancel = function() { if (timer) clearTimeout(timer) } // 返回一个新的函数 return _debounce } </script> <script> // 1.获取input元素 const inputEl = document.querySelector("input") const cancelBtn = document.querySelector(".cancel") // 未进行防抖处理代码 // let counter = 1 // inputEl.oninput = function(event) { // console.log(`发送网络请求${counter++}:`, this, event) // } // 2.underscore防抖处理代码 // let counter = 1 // inputEl.oninput = _.debounce(function() { // console.log(`发送网络请求${counter++}:`, this.value) // }, 1000) // 3.自己实现的防抖 let counter = 1 const debounceFn = hydebounce(function(event) { console.log(`发送网络请求${counter++}:`, this, event) }, 5000) inputEl.oninput = debounceFn // 4.实现取消的功能 cancelBtn.onclick = function() { debounceFn.cancel() } </script> </body>
防抖-实现防抖-立即执行功能
应用场景可能是 用户输入book 的时候，第一次输入b的时候马上执行，后续的ook才有防抖效果。通过另外一个变量来控制 let isInvoke。
<body> <button>按钮</button> <input type="text"> <button class="cancel">取消</button> <!-- CDN引入: 网络的js文件 --> <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> --> <!-- 本地引入: 下载js文件, 并且本地引入 --> <script src="./js/underscore.js"></script> <script> // 原则: 一个函数进行做一件事情, 一个变量也用于记录一种状态 function hydebounce(fn, delay, immediate = false) { // 1.用于记录上一次事件触发的timer let timer = null let isInvoke = false // 2.触发事件时执行的函数 const _debounce = function(...args) { // 2.1.如果有再次触发(更多次触发)事件, 那么取消上一次的事件 if (timer) clearTimeout(timer) // 第一次操作是不需要延迟 if (immediate && !isInvoke) { fn.apply(this, args) isInvoke = true return } // 2.2.延迟去执行对应的fn函数(传入的回调函数) timer = setTimeout(() => { fn.apply(this, args) timer = null // 执行过函数之后, 将timer重新置null isInvoke = false }, delay); } // 3.给_debounce绑定一个取消的函数 _debounce.cancel = function() { if (timer) clearTimeout(timer) timer = null isInvoke = false } // 返回一个新的函数 return _debounce } </script> <script> // 1.获取input元素 const inputEl = document.querySelector("input") const cancelBtn = document.querySelector(".cancel") // 未进行防抖处理代码 // let counter = 1 // inputEl.oninput = function(event) { // console.log(`发送网络请求${counter++}:`, this, event) // } // 2.underscore防抖处理代码 // let counter = 1 // inputEl.oninput = _.debounce(function() { // console.log(`发送网络请求${counter++}:`, this.value) // }, 1000) // 3.自己实现的防抖 let counter = 1 const debounceFn = hydebounce(function(event) { console.log(`发送网络请求${counter++}:`, this, event) }, 100) inputEl.oninput = debounceFn // 4.实现取消的功能 cancelBtn.onclick = function() { debounceFn.cancel() } </script> </body>
防抖-实现防抖-获取返回值
利用promise来做到获取返回值。
<body> <button>按钮</button> <input type="text"> <button class="cancel">取消</button> <!-- CDN引入: 网络的js文件 --> <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> --> <!-- 本地引入: 下载js文件, 并且本地引入 --> <script src="./js/underscore.js"></script> <script> // 原则: 一个函数进行做一件事情, 一个变量也用于记录一种状态 function hydebounce(fn, delay, immediate = false, resultCallback) { // 1.用于记录上一次事件触发的timer let timer = null let isInvoke = false // 2.触发事件时执行的函数 const _debounce = function(...args) { return new Promise((resolve, reject) => { try { // 2.1.如果有再次触发(更多次触发)事件, 那么取消上一次的事件 if (timer) clearTimeout(timer) // 第一次操作是不需要延迟 let res = undefined if (immediate && !isInvoke) { res = fn.apply(this, args) if (resultCallback) resultCallback(res) resolve(res) isInvoke = true return } // 2.2.延迟去执行对应的fn函数(传入的回调函数) timer = setTimeout(() => { res = fn.apply(this, args) if (resultCallback) resultCallback(res) resolve(res) timer = null // 执行过函数之后, 将timer重新置null isInvoke = false }, delay); } catch (error) { reject(error) } }) } // 3.给_debounce绑定一个取消的函数 _debounce.cancel = function() { if (timer) clearTimeout(timer) timer = null isInvoke = false } // 返回一个新的函数 return _debounce } </script> <script> // 1.获取input元素 const inputEl = document.querySelector("input") const cancelBtn = document.querySelector(".cancel") // 2.手动绑定函数和执行 const myDebounceFn = hydebounce(function(name, age, height) { console.log("----------", name, age, height) return "coderwhy 哈哈哈哈" }, 1000, false) myDebounceFn("why", 18, 1.88).then(res => { console.log("拿到执行结果:", res) }) </script> </body>
防抖-实现防抖-封装独立文件
封装的代码：
// 原则: 一个函数进行做一件事情, 一个变量也用于记录一种状态 function hydebounce(fn, delay, immediate = false, resultCallback) { // 1.用于记录上一次事件触发的timer let timer = null let isInvoke = false // 2.触发事件时执行的函数 const _debounce = function(...args) { return new Promise((resolve, reject) => { try { // 2.1.如果有再次触发(更多次触发)事件, 那么取消上一次的事件 if (timer) clearTimeout(timer) // 第一次操作是不需要延迟 let res = undefined if (immediate && !isInvoke) { res = fn.apply(this, args) if (resultCallback) resultCallback(res) resolve(res) isInvoke = true return } // 2.2.延迟去执行对应的fn函数(传入的回调函数) timer = setTimeout(() => { res = fn.apply(this, args) if (resultCallback) resultCallback(res) resolve(res) timer = null // 执行过函数之后, 将timer重新置null isInvoke = false }, delay); } catch (error) { reject(error) } }) } // 3.给_debounce绑定一个取消的函数 _debounce.cancel = function() { if (timer) clearTimeout(timer) timer = null isInvoke = false } // 返回一个新的函数 return _debounce }执行的代码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>Document</title> </head> <body> <input type="text"> <button class="cancel">取消</button> <script src="./js/hy_debounce.js"></script> <script> const inputEl = document.querySelector("input") const cancelBtn = document.querySelector(".cancel") let counter = 1 const debounceFn = hydebounce(function(event) { console.log(`发送网络请求${counter++}:`, this, event) }, 1000) inputEl.oninput = debounceFn // 4.实现取消的功能 cancelBtn.onclick = function() { debounceFn.cancel() } </script> </body> </html>
节流-认识节流操作
使用第三方库
<body> <button>按钮</button> <input type="text"> <!-- CDN引入: 网络的js文件 --> <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> --> <!-- 本地引入: 下载js文件, 并且本地引入 --> <script src="./js/underscore.js"></script> <script> // 1.获取input元素 const inputEl = document.querySelector("input") // 4.节流处理代码 let counter = 1 inputEl.oninput = _.throttle(function() { console.log(`发送网络请求${counter++}:`, this.value) }, 1000) </script> </body>
节流-实现节流-基本实现(面试)
需要通过一个计算公式来实现节流的效果
const waitTime = interval - (nowTime - startTime)
waitTime用来判断是否执行fn函数
interval是使用者规定的执行间隔时间
nowTime是记录每次执行hythrottle的时间点
startTime是记录每次执行fn的时间点，通过if判断来决定是否执行fn函数。
<body> <button>按钮</button> <input type="text"> <!-- CDN引入: 网络的js文件 --> <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> --> <!-- 本地引入: 下载js文件, 并且本地引入 --> <script src="./js/underscore.js"></script> <script> function hythrottle(fn, interval) { let startTime = 0 const _throttle = function() { const nowTime = new Date().getTime() const waitTime = interval - (nowTime - startTime) if (waitTime <= 0) { fn() startTime = nowTime } } return _throttle } </script> <script> // 1.获取input元素 const inputEl = document.querySelector("input") // 2.underscore节流处理代码 // let counter = 1 // inputEl.oninput = _.throttle(function() { // console.log(`发送网络请求${counter++}:`, this.value) // }, 1000) // 3.自己实现的节流函数 let counter = 1 inputEl.oninput = hythrottle(function() { console.log(`发送网络请求${counter++}:`, this.value) }, 1000) </script> </body>
节流-实现节流-this和参数绑定
实现的原理和之前的防抖一样，都是利用了隐式绑定的方法。fn.apply(this, args)
<body> <button>按钮</button> <input type="text"> <!-- CDN引入: 网络的js文件 --> <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> --> <!-- 本地引入: 下载js文件, 并且本地引入 --> <script src="./js/underscore.js"></script> <script> function hythrottle(fn, interval) { let startTime = 0 const _throttle = function(...args) { const nowTime = new Date().getTime() const waitTime = interval - (nowTime - startTime) if (waitTime <= 0) { fn.apply(this, args) startTime = nowTime } } return _throttle } </script> <script> // 1.获取input元素 const inputEl = document.querySelector("input") // 2.underscore节流处理代码 // let counter = 1 // inputEl.oninput = _.throttle(function() { // console.log(`发送网络请求${counter++}:`, this.value) // }, 1000) // 3.自己实现的节流函数 let counter = 1 inputEl.oninput = hythrottle(function(event) { console.log(`发送网络请求${counter++}:`, this.value, event) }, 1000) </script> </body>
节流-实现节流-立即执行控制
立即执行和最后一次执行是否执行。
<body> <button>按钮</button> <input type="text"> <!-- CDN引入: 网络的js文件 --> <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> --> <!-- 本地引入: 下载js文件, 并且本地引入 --> <script src="./js/underscore.js"></script> <script> function hythrottle(fn, interval, leading = true) { let startTime = 0 const _throttle = function(...args) { // 1.获取当前时间 const nowTime = new Date().getTime() // 对立即执行进行控制 if (!leading && startTime === 0) { startTime = nowTime } // 2.计算需要等待的时间执行函数 const waitTime = interval - (nowTime - startTime) if (waitTime <= 0) { fn.apply(this, args) startTime = nowTime } } return _throttle } </script> <script> // 1.获取input元素 const inputEl = document.querySelector("input") // 2.underscore节流处理代码 // let counter = 1 // inputEl.oninput = _.throttle(function() { // console.log(`发送网络请求${counter++}:`, this.value) // }, 1000) // 3.自己实现的节流函数 let counter = 1 inputEl.oninput = hythrottle(function(event) { console.log(`发送网络请求${counter++}:`, this.value, event) }, 1000) </script> </body>
节流-实现节流-尾部执行控制(了解)
不同于防抖，防抖的最后一次是一定执行的，但是节流的最后一次如果没有达到限制的时间是不会执行的，以下是解决办法。
<body> <button>按钮</button> <input type="text"> <!-- CDN引入: 网络的js文件 --> <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> --> <!-- 本地引入: 下载js文件, 并且本地引入 --> <script src="./js/underscore.js"></script> <script> function hythrottle(fn, interval, { leading = true, trailing = false } = {}) { let startTime = 0 let timer = null const _throttle = function(...args) { // 1.获取当前时间 const nowTime = new Date().getTime() // 对立即执行进行控制 if (!leading && startTime === 0) { startTime = nowTime } // 2.计算需要等待的时间执行函数 const waitTime = interval - (nowTime - startTime) if (waitTime <= 0) { // console.log("执行操作fn") if (timer) clearTimeout(timer) fn.apply(this, args) startTime = nowTime timer = null return } // 3.判断是否需要执行尾部 if (trailing && !timer) { timer = setTimeout(() => { // console.log("执行timer") fn.apply(this, args) startTime = new Date().getTime() timer = null }, waitTime); } } return _throttle } </script> <script> // 1.获取input元素 const inputEl = document.querySelector("input") // 2.underscore节流处理代码 // let counter = 1 // inputEl.oninput = _.throttle(function() { // console.log(`发送网络请求${counter++}:`, this.value) // }, 1000) // 3.自己实现的节流函数 let counter = 1 inputEl.oninput = hythrottle(function(event) { console.log(`发送网络请求${counter++}:`, this.value, event) }, 3000, { trailing: true }) </script> </body>
节流-实现节流-取消功能实现
1
<body> <button>按钮</button> <input type="text"> <button class="cancel">取消</button> <!-- CDN引入: 网络的js文件 --> <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> --> <!-- 本地引入: 下载js文件, 并且本地引入 --> <script src="./js/underscore.js"></script> <script> function hythrottle(fn, interval, { leading = true, trailing = false } = {}) { let startTime = 0 let timer = null const _throttle = function(...args) { // 1.获取当前时间 const nowTime = new Date().getTime() // 对立即执行进行控制 if (!leading && startTime === 0) { startTime = nowTime } // 2.计算需要等待的时间执行函数 const waitTime = interval - (nowTime - startTime) if (waitTime <= 0) { // console.log("执行操作fn") if (timer) clearTimeout(timer) fn.apply(this, args) startTime = nowTime timer = null return } // 3.判断是否需要执行尾部 if (trailing && !timer) { timer = setTimeout(() => { // console.log("执行timer") fn.apply(this, args) startTime = new Date().getTime() timer = null }, waitTime); } } _throttle.cancel = function() { if (timer) clearTimeout(timer) startTime = 0 timer = null } return _throttle } </script> <script> // 1.获取input元素 const inputEl = document.querySelector("input") const cancelBtn = document.querySelector(".cancel") // 2.underscore节流处理代码 // let counter = 1 // inputEl.oninput = _.throttle(function() { // console.log(`发送网络请求${counter++}:`, this.value) // }, 1000) // 3.自己实现的节流函数 let counter = 1 const throttleFn = hythrottle(function(event) { console.log(`发送网络请求${counter++}:`, this.value, event) }, 3000, { trailing: true }) inputEl.oninput = throttleFn cancelBtn.onclick = function() { throttleFn.cancel() } </script> </body>
节流-实现节流-获取返回值
1
<body> <button>按钮</button> <input type="text"> <button class="cancel">取消</button> <!-- CDN引入: 网络的js文件 --> <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> --> <!-- 本地引入: 下载js文件, 并且本地引入 --> <script src="./js/underscore.js"></script> <script> function hythrottle(fn, interval, { leading = true, trailing = false } = {}) { let startTime = 0 let timer = null const _throttle = function(...args) { return new Promise((resolve, reject) => { try { // 1.获取当前时间 const nowTime = new Date().getTime() // 对立即执行进行控制 if (!leading && startTime === 0) { startTime = nowTime } // 2.计算需要等待的时间执行函数 const waitTime = interval - (nowTime - startTime) if (waitTime <= 0) { // console.log("执行操作fn") if (timer) clearTimeout(timer) const res = fn.apply(this, args) resolve(res) startTime = nowTime timer = null return } // 3.判断是否需要执行尾部 if (trailing && !timer) { timer = setTimeout(() => { // console.log("执行timer") const res = fn.apply(this, args) resolve(res) startTime = new Date().getTime() timer = null }, waitTime); } } catch (error) { reject(error) } }) } _throttle.cancel = function() { if (timer) clearTimeout(timer) startTime = 0 timer = null } return _throttle } </script> <script> // 1.获取input元素 const inputEl = document.querySelector("input") const cancelBtn = document.querySelector(".cancel") // 2.underscore节流处理代码 // let counter = 1 // inputEl.oninput = _.throttle(function() { // console.log(`发送网络请求${counter++}:`, this.value) // }, 1000) // 3.自己实现的节流函数 let counter = 1 const throttleFn = hythrottle(function(event) { console.log(`发送网络请求${counter++}:`, this.value, event) return "throttle return value" }, 3000, { trailing: true }) throttleFn("aaaa").then(res => { console.log("res:", res) }) </script> </body>
节流-实现节流-封装独立文件
underscore.js
function hythrottle(fn, interval, { leading = true, trailing = false } = {}) { let startTime = 0 let timer = null const _throttle = function(...args) { return new Promise((resolve, reject) => { try { // 1.获取当前时间 const nowTime = new Date().getTime() // 对立即执行进行控制 if (!leading && startTime === 0) { startTime = nowTime } // 2.计算需要等待的时间执行函数 const waitTime = interval - (nowTime - startTime) if (waitTime <= 0) { // console.log("执行操作fn") if (timer) clearTimeout(timer) const res = fn.apply(this, args) resolve(res) startTime = nowTime timer = null return } // 3.判断是否需要执行尾部 if (trailing && !timer) { timer = setTimeout(() => { // console.log("执行timer") const res = fn.apply(this, args) resolve(res) startTime = new Date().getTime() timer = null }, waitTime); } } catch (error) { reject(error) } }) } _throttle.cancel = function() { if (timer) clearTimeout(timer) startTime = 0 timer = null } return _throttle }<body> <button>按钮</button> <input type="text"> <button class="cancel">取消</button> <!-- CDN引入: 网络的js文件 --> <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script> --> <!-- 本地引入: 下载js文件, 并且本地引入 --> <script src="./js/underscore.js"></script> <script src="./js/hy_throttle.js"></script> <script> // 1.获取input元素 const inputEl = document.querySelector("input") const cancelBtn = document.querySelector(".cancel") // 2.underscore节流处理代码 // let counter = 1 // inputEl.oninput = _.throttle(function() { // console.log(`发送网络请求${counter++}:`, this.value) // }, 1000) // 3.自己实现的节流函数 let counter = 1 const throttleFn = hythrottle(function(event) { console.log(`发送网络请求${counter++}:`, this.value, event) return "throttle return value" }, 3000) inputEl.oninput = throttleFn </script> </body>
深拷贝-和浅拷贝-引入赋值关系
浅拷贝是把一个对象类型的值复制到另外一个对象里面，这两个对象值一样，但是各自修改值的时候不会出现引用赋值那样影响到另外一个对象值，也就是他们两个对象的内存地址不同，是两个不同的对象类型。
深拷贝是在浅拷贝的基础上能在对象里面的对象实现浅拷贝的情况。
深拷贝的第一种方法是利用JSON方法先转成字符串，在转为对象，就能把对象里面的对象转换成深拷贝对象。但是这种有个缺点就是，如果对象里面有函数或者[Symbol()]: "abc"，这种会被忽略掉，没办法获取；循环 的对象也不能用（window.window.window.window）。
console.log(window.window === window) const info = { name: "why", age: 18, friend: { name: "kobe" }, running: function() {}, [Symbol()]: "abc", // obj: info } info.obj = info // 1.操作一: 引用赋值 // const obj1 = info // 2.操作二: 浅拷贝 // const obj2 = { ...info } // // obj2.name = "james" // // obj2.friend.name = "james" // // console.log(info.friend.name) // const obj3 = Object.assign({}, info) // // obj3.name = "curry" // obj3.friend.name = "curry" // console.log(info.friend.name) // 3.操作三: 深拷贝 // 3.1.JSON方法 // const obj4 = JSON.parse(JSON.stringify(info)) // info.friend.name = "curry" // console.log(obj4.friend.name) // console.log(obj4) // 3.2.自己编写一个深拷贝函数(第三方库)
深拷贝-深拷贝函数的基本使用
判断是否是对象类型（这里没算函数和数组类型）的工具is_object.js
// 需求: 判断一个标识符是否是对象类型 function isObject(value) { // null,object,function,array // null -> object // function -> function -> true // object/array -> object -> true const valueType = typeof value return (value !== null) && ( valueType === "object" || valueType === "function" ) } // const name = "why" // const age = 18 // const foo = {} // const bar = function() {} // const arr = [] // console.log(isObject(null)) // false // console.log(isObject(bar)) // true // console.log(isObject(name)) // false // console.log(isObject(foo)) // true // console.log(isObject(arr)) // true深拷贝对类型的核函数
这里拷贝的是对象里面有对象的情况
<script src="./js/is_object.js"></script> <script> // 深拷贝函数 function deepCopy(originValue) { // 1.如果是原始类型, 直接返回 if (!isObject(originValue)) { return originValue } // 2.如果是对象类型, 才需要创建对象 const newObj = {} for (const key in originValue) { newObj[key] = deepCopy(originValue[key]); } return newObj } const info = { name: "why", age: 18, friend: { name: "kobe", address: { name: "洛杉矶", detail: "斯坦普斯中心" } } } const newObj = deepCopy(info) info.friend.address.name = "北京市" console.log(newObj.friend.address.name) </script>
深拷贝-深拷贝函数的数组拷贝
这里拷贝的是数组里面存在对象类型时的情况。
<script src="./js/is_object.js"></script> <script> // 深拷贝函数 function deepCopy(originValue) { // 1.如果是原始类型, 直接返回 if (!isObject(originValue)) { return originValue } // 2.如果是对象类型, 才需要创建对象 const newObj = Array.isArray(originValue) ? []: {} for (const key in originValue) { newObj[key] = deepCopy(originValue[key]); } return newObj } const books = [ { name: "黄金时代", price: 28, desc: { intro: "这本书不错", info: "这本书讲了一个很有意思的故事" } }, { name: "你不知道JavaScript", price: 99 }, ] // const newBooks = [...books] // newBooks[0].price = 88 // console.log(books[0].price) const newBooks = deepCopy(books) console.log(newBooks) </script>
深拷贝-深拷贝函数的其他类型
特殊类型的set、function、symbol类型的情况
<script src="./js/is_object.js"></script> <script> // 深拷贝函数 function deepCopy(originValue) { // 0.如果值是Symbol的类型 if (typeof originValue === "symbol") { return Symbol(originValue.description) } // 1.如果是原始类型, 直接返回 if (!isObject(originValue)) { return originValue } // 2.如果是set类型 if (originValue instanceof Set) { const newSet = new Set() for (const setItem of originValue) { newSet.add(deepCopy(setItem)) } return newSet } // 3.如果是函数function类型, 不需要进行深拷贝 if (typeof originValue === "function") { return originValue } // 2.如果是对象类型, 才需要创建对象 const newObj = Array.isArray(originValue) ? []: {} // 遍历普通的key for (const key in originValue) { newObj[key] = deepCopy(originValue[key]); } // 单独遍历symbol const symbolKeys = Object.getOwnPropertySymbols(originValue) for (const symbolKey of symbolKeys) { newObj[Symbol(symbolKey.description)] = deepCopy(originValue[symbolKey]) } return newObj } const set = new Set(["abc", "cba", "nba"]) const s1 = Symbol("s1") const s2 = Symbol("s2") const info = { name: "why", age: 18, friend: { name: "kobe", address: { name: "洛杉矶", detail: "斯坦普斯中心" } }, // 1.特殊类型: Set set: set, // 2.特性类型: function running: function() { console.log("running~") }, // 3.值的特殊类型: Symbol symbolKey: Symbol("abc"), // 4.key是symbol时 [s1]: "aaaa", [s2]: "bbbb" } // for (let key in info) { // console.log(key) // } // const symbol = Symbol() // console.log(typeof symbol) // console.log(isObject(symbol)) const newObj = deepCopy(info) console.log(newObj) </script>
深拷贝-深拷贝函数的循环引用
如果对象类型里面的变量有对自己的引用，那就回出错，无线循环报错。
<script src="./js/is_object.js"></script> <script> // 深拷贝函数 // let map = new WeakMap() function deepCopy(originValue, map = new WeakMap()) { // const map = new WeakMap() // 0.如果值是Symbol的类型 if (typeof originValue === "symbol") { return Symbol(originValue.description) } // 1.如果是原始类型, 直接返回 if (!isObject(originValue)) { return originValue } // 2.如果是set类型 if (originValue instanceof Set) { const newSet = new Set() for (const setItem of originValue) { newSet.add(deepCopy(setItem)) } return newSet } // 3.如果是函数function类型, 不需要进行深拷贝 if (typeof originValue === "function") { return originValue } // 4.如果是对象类型, 才需要创建对象 if (map.get(originValue)) { return map.get(originValue) } const newObj = Array.isArray(originValue) ? []: {} map.set(originValue, newObj) // 遍历普通的key for (const key in originValue) { newObj[key] = deepCopy(originValue[key], map); } // 单独遍历symbol const symbolKeys = Object.getOwnPropertySymbols(originValue) for (const symbolKey of symbolKeys) { newObj[Symbol(symbolKey.description)] = deepCopy(originValue[symbolKey], map) } return newObj } const info = { name: "why", age: 18, friend: { name: "kobe", address: { name: "洛杉矶", detail: "斯坦普斯中心" } }, // self: info } info.self = info let newObj = deepCopy(info) console.log(newObj) console.log(newObj.self === newObj) // mitt </script>
事件总线-事件总线实现
跨文件、组件组件的通信使用。
<body> <button class="nav-btn">nav button</button> <script> // 类EventBus -> 事件总线对象 class HYEventBus { constructor() { this.eventMap = {} } on(eventName, eventFn) { let eventFns = this.eventMap[eventName] if (!eventFns) { eventFns = [] this.eventMap[eventName] = eventFns } eventFns.push(eventFn) } off(eventName, eventFn) { let eventFns = this.eventMap[eventName] if (!eventFns) return for (let i = 0; i < eventFns.length; i++) { const fn = eventFns[i] if (fn === eventFn) { eventFns.splice(i, 1) break } } // 如果eventFns已经清空了 if (eventFns.length === 0) { delete this.eventMap[eventName] } } emit(eventName, ...args) { let eventFns = this.eventMap[eventName] if (!eventFns) return eventFns.forEach(fn => { fn(...args) }) } } // 使用过程 const eventBus = new HYEventBus() // aside.vue组件中监听事件 eventBus.on("navclick", (name, age, height) => { console.log("navclick listener 01", name, age, height) }) const click = () => { console.log("navclick listener 02") } eventBus.on("navclick", click) setTimeout(() => { eventBus.off("navclick", click) }, 5000); eventBus.on("asideclick", () => { console.log("asideclick listener") }) // nav.vue const navBtnEl = document.querySelector(".nav-btn") navBtnEl.onclick = function() { console.log("自己监听到") eventBus.emit("navclick", "why", 18, 1.88) } </script> </body>
