let fakeArr = {
    0: 'a',
    1: 'b',
    2: 'c',
    99: 'zzz',
    length: 3,

}

Object.prototype[Symbol.iterator] = function* () {
    // for (i in range(0, this.length)) {
    //     yield this[i]
    // }

    let keys = Object.keys(this);
    let regExpNum = new RegExp(/[0-9]+/)
    for (let key of keys) {
        if (regExpNum.test(key))
            yield this[key]
    }
}

for (let item of fakeArr) {
    console.log(item); //TypeError: fakeArr is not iterable
}

function deepClone(obj) {
    if (!obj) return obj
    let clone;
    if (typeof obj !== 'object') return obj
    //是数组
    if (Array.isArray(obj)) clone = []
    else clone = {}
    for (let key in obj) {
        if (obj.hasOwnProperty(key) && (typeof obj[key] === 'object')) {
            clone[key] = deepClone(obj[key])
        } else {
            clone[key] = obj[key]
        }
    }
    return clone
}

function deepClone(obj) {
    return new Promise(resolve => {
        const { port1, port2 } = new MessageChannel()
        port1.postMessage(obj)
        port2.onmessage = e => {
            resolve(e.data)
        }
    })
}

//测试
const obj = { a: "", c: undefined, e: 0, f: [], g: NaN, h: null,I:new Set([1,2]), 
J: new Map([['a',1]]) }
obj.b  = obj//循环引用
deepClone(obj).then(res=> {
    console.log(res);
})

function deepClone(obj) {
    return structuredClone(obj)
}

import { cloneDeep } from 'loadsh' 

let newObj = JSON.parse(JSON.stringify(obj))

function deepClone(obj, hash = new WeakMap()) {
    if (!obj) return obj
    let clone;

    if(hash.has(obj)){
        // 如果在的话
        return hash.get(obj)
    }

    if (obj instanceof Set) {
        return new Set([...obj]) //缺陷--解构是浅拷贝
    } else if (obj instanceof Map) {
        return new Map([...obj])
    } else if (obj instanceof WeakMap) {
        throw 'weakmap类型未作处理'
    } else if (typeof obj === 'function') {
        //方法不用克隆，直接返回
        return obj
    } else if (obj instanceof Array) { //obj 是数组
        clone = [];
        hash.set(obj, clone)
        obj.forEach(item => {
            clone.push(deepClone(item, hash))
        })
    } else if (typeof obj !== 'object') { //原始值类型
        return obj
    }
    else { //obj 是Object对象
        clone = {};
        hash.set(obj, clone)
        //键是字符
        Object.getOwnPropertyNames(obj).forEach(propNames => {
            clone[propNames] = deepClone(obj[propNames],hash)
        })
        //键是Symbol
        Object.getOwnPropertySymbols(obj).forEach(syb => {
            clone[Symbol(syb.description)] = deepClone(obj[syb],hash)
        })
    }
    return clone
}

function deepClone(){

}

/**
 * 1. 
 * effect 函数
 * @param fn 执行方法
 * @returns 以 ReactiveEffect 实例为 this 的执行函数
 */
function effect(fn) {
    const _effect = new ReactiveEffect(fn)
    _effect.run()
}
/**
 * 2. 
 * 响应性触发依赖时的执行类
 */
let activeEffect //当前副作用
class ReactiveEffect {
    constructor(fn){
        this.fn = fn
    }
    run() {
        //告诉全局当前执行的 ReactiveEffect 的实例
        activeEffect = this
        return this.fn()
    }
}

const fullName = computed(()=> firstName.value + lastName.value)
//计算属性创建了一个Ref，并且这个Ref的getter会调用此函数。
//内部有一个dirty代表值是不是脏的，初始为true。用作缓存功能。
//本质上调用了
effect(()=>firstName.value + lastName.value)
//此时读取了firstName和lastName，触发了依赖收集。且此时activeEffect指向此箭头函数
//此函数作为依赖被收集进了set里，每当firstName或lastName改变，就会触发trigger重新调用此箭头函数，并把dirty=true
//如果下一次读取计算属性，且dirty==true，那么会重新调用此函数，如果false则使用缓存。但是对于在模板里使用的计算属性则会响应式的更新而不是等待下一次读取。

function reactive(obj){
    return new Proxy(obj, {
        get(target, key, recv){
            const res = Reflect.get(...arguments)
            //收集依赖
            track(target, key)
            return res
        }
        set(target, key, newValue, recv){
            const res = Reflect.set(...arguments)
            //触发依赖
            trigger(target, key)
            return res
        }
    })
}

let obj = {
    a: 'a',
    b: 'b',
    get c(){
        return this.a+this.b;
    }
}

const proxy = new Proxy(obj, {
    get(target, key, receiver) {
        console.log('读：', target[key]);
        return target[key]
    }
})
proxy.c; //只输出， 读：'ab'

const proxy = new Proxy(obj, {
    get(target, key, receiver) {
        console.log('读：', target[key]);
        return Reflect.get(...arguments);
    }
})
proxy.c; 
//读：'ab'
//读：'a'
//读：'b'

// 测试一下！
let myname = ref('blank')
effect(() => {
    console.log('响应式：',myname.value)
})
setTimeout(()=>{
    myname.value = 'lzy'
    console.log('修改完毕...')
},1000)
/*
响应式： blank
响应式： lzy
修改完毕...  
/*

//前者是一组旧DOM的key数组 后者是更新后新DOM的key数组
oldChildren= [0,1,2,3,4]
newChildren= [0,1,2,5,6,3,4]
/*
1-经过阶段1： 
(0,1,2,) 3,4
(0,1,2,)5,9,3,4
此时 i = 3 代表下标，oldChildrenEnd = 4, newChildrenEnd = 6

2- 经过阶段2：
(0,1,2,) (3,4)
(0,1,2,)5,6,(3,4)
此时 i = 3 , oldChildrenEnd = 2, newChildrenEnd = 4

3- if (i > oldChildrenEnd) 进入阶段3:
while(i<=newChildrenEnd){
    patch(normalize(newChildren[i]))    //1. VNode挂载到DOM 2. 根据新旧VNode跟新DOM
    i++
}
此时 i = 5, newChildrenEnd = 4

4- else if (i > newChildrenEnd) 
不进入阶段4

5- else 
不进入阶段5

oldChildren= [a, b, c, d, e, f, g]
newChildren= [a, b, e, d, c, h, f, g]
...
/*
a b [c d e] f g
a b [e d c h] f g
5- 进入阶段5
根据newChildren 生成一个map （key, index） ,如下
map {<e, 2>, <d, 3>, <c, 4>,<h, 5>}
旧节点可能在newChildren里也可能不在，
    如果不在就卸载
    如果在 就根据map得到newIndex
        再对比newIndex和oldIndex 决定要不要移动
            如果要移动会生成一个最长递增子序列，便于移动
*/