欢迎各位小伙伴
作者：lgd8981289
搬运自 https://github.com/lgd8981289/vue-next-mini
那么在上一小节中我们已经知道了如何对vue的源代码进行debugger ,但是如果想要学习或者了解 vue的代码执行，那么光靠 debugger是不够的,除此之外我们还需要掌握另外一个能力,那么如何阅读源代码
很多同学在去阅读源代码的时候,都会面临一个误区,那就是：我需要把源代码中每一行代码都读明
这是一个非常不对的行为，很容易让我们 事倍功半
Proxy与Object.definePropertyProxy
Proxy 将代理一个对象（被代理对象），得到一个新的对象（代理对象），同时拥有被代理对象中所有的属性。handler 的 getter 和 setterObject.defineProperty
Object.defineProperty 为指定对象的指定属性设置属性描述符getter 和 setter有限状态机（英语：finite-state machine，缩写：FSM）又称有限状态自动机（英语：finite-state automaton，缩写：FSA），简称状态机，是表示有限个状态以及在这些状态之间的转移和动作等行为的数学计算模型。
本文转自 typescript 中的 interface 和 type 到底有什么区别
作者：SunshowerC
弱引用：不会影响垃圾回收机制。即： WeakMap 的 key 不再存在任何引用时，会被直接回收。
强引用：会影响垃圾回收机制。存在强应用的对象永远不会被回收。
<script>
let obj1 = {
name: '张三'
}
let obj2 = {
name: '张三'
}
// 强引用
const map = new Map()
// 弱引用
const weakMap = new WeakMap()
map.set(obj1,'value')
weakMap.set(obj2,'value')
obj1 = null
obj2 = null
console.log('map',map) // Map(1) {{…} => 'value'}
console.log('weakMap',weakMap) // WeakMap {} 空
/**
此时 WeakMap 中不存在任何值，即: obj2不存在其他引用时， WeakMap 不会阻止垃圾回收，基于obj2的引用将会被清除。这就证明了 WeakMap 的 弱引用特性。
*/
</script>
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
reduce(callbackFn)
reduce(callbackFn, initialValue)
this对象指向this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局windowapply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入bind是返回绑定this之后的函数，apply、call 则是立即执行 /**
* 在某些场景下，页面的请求数可能会有很多，
* 比如：抓取、分片上传等，如果我们需要等一个请求完成后，
* 再发起下一个请求，是必效率会比较低。
* 为了提升效率，我们可以同时发出多个请求，但数量又不能太多，
* 如若某请求完成，剩余等待的请求继续补位执行，
* 将请求的结果（不论成功或失败），按原有数组的顺序返回。
*/
/**
* 11-并发事件
* @param {string[]} urls 请求地址数组
* @param {number} max 最大并发数
*/
function consurRequest(urls, max) {
return new Promise((resolve,reject) => {
// 判断传入urls长度，为空直接返回[]
if(urls.length === 0){
resolve([])
return
}
const results = []
let count = 0 // 标识请求的完成数量
let index = 0 // 下一个请求
// 发送请求
async function request(){
// 退出逻辑
if(index === urls.length){
return
}
// 存储 index，保持后续请求结果数组与urls数组对应
const i = index
const url = urls[index]
index++
try {
const resp = await fetch(url)
// resp加入到 results中
results[i] = resp
} catch (err) {
// err 加入到results
results[i] = err
console.log('err',err)
} finally {
// 判断是否所以的请求都完成
count++
// if(count === urls.length){
if(count === urls.length){
resolve(results)
return
}
request()
}
}
const times = Math.min(max,urls.length)
let promiseList = []
for(let i = 0; i < times; i++){
promiseList.push(request())
}
Promise.race(promiseList).then(() => {
}).catch((err) => {
reject(err)
})
})
}
Proxy与Object.definePropertyProxy
Proxy 将代理一个对象（被代理对象），得到一个新的对象（代理对象），同时拥有被代理对象中所有的属性。handler 的 getter 和 setterObject.defineProperty
Object.defineProperty 为指定对象的指定属性设置属性描述符getter 和 setter