//響應(yīng)式處理
function observe(obj) {
	if (typeof obj !== 'object' || obj == null) {
		return  
	}  
	// 增加數(shù)組類(lèi)型判斷，若是數(shù)組則覆蓋其原型  
	if (Array.isArray(obj)) {
		Object.setPrototypeOf(obj, arrayProto)  
	} else {
		//對(duì)象遍歷處理
		const keys = Object.keys(obj)
		for (let i = 0; i < keys.length; i++) {
			const key = keys[i]defineReactive(obj, key, obj[key])   
		}  
	} 
}
/*數(shù)組處理*/
const originalProto = Array.prototype
//拷貝一份數(shù)組原型方法
const arrayProto = Object.create(originalProto);
//這七個(gè)方法會(huì)讓數(shù)組的長(zhǎng)度或順序發(fā)生變化，需要單獨(dú)處理
['push', 'pop', 'shift','unshift','splice','reverse','sort'].forEach(
method => {
	//方法重寫(xiě)
	arrayProto[method] = function() {
		originalProto[method].apply(this, arguments)
		//處理項(xiàng)進(jìn)行響應(yīng)式化
		observe(inserted)
		//派發(fā)更新
		dep.notify() 
	}  
})
/*對(duì)象處理*/
function defineReactive(obj, key, val) {  
	observe(val) // 解決嵌套對(duì)象問(wèn)題  
	Object.defineProperty(obj, key, {
		get() {
			//依賴(lài)收集
			dep.depend()
			return val   
		},
		set(newVal) {
			if (newVal !== val) {
				observe(newVal) // 新值是對(duì)象的情況
				val = newVal 
				//派發(fā)更新
				dep.notify() 
			}    
		} 
	})
}

const isObject = val => typeof val === 'object' && val !== null
//緩存已處理的對(duì)象，避免重復(fù)代理
//WeakMap 對(duì)象是一組鍵/值對(duì)的集合，其中鍵是弱引用的，必須是對(duì)象，而值可以是任意的。
const toProxy = new WeakMap() //形如obj:observed
const toRaw = new WeakMap() //形如observed:obj
function reactive(obj){
	if(!isObject(obj)){
		return obj
	}
	//查找緩存，避免重復(fù)代理
	if(toProxy.has(obj)){
		return toProxy.get(obj)
	}
	if(toRaw.has(obj)){
		return obj
	}
	/*
	Proxy兩個(gè)參數(shù)
	target:要使用 Proxy 包裝的目標(biāo)對(duì)象（可以是任何類(lèi)型的對(duì)象，包括原生數(shù)組，函數(shù)，甚至另一個(gè)代理）。
	handler:一個(gè)通常以函數(shù)作為屬性的對(duì)象，各屬性中的函數(shù)分別定義了在執(zhí)行各種操作時(shí)代理 p 的行為。 
	*/
	const observed = new Proxy(obj,{
		//Reflect 是一個(gè)內(nèi)置的對(duì)象，它提供攔截 JavaScript 操作的方法。這些方法與proxy handlers的方法相同
		get(target,key,receiver){
			const res = Reflect.get(target,key,receiver)
			//依賴(lài)收集
			track(target,key)
			//遞歸處理嵌套對(duì)象
			return isObject(res)?reactive(res):res
		},
		set(target,key,value,receiver){
			const res = Reflect.set(target,key,value,receiver)
			//觸發(fā)響應(yīng)函數(shù)
			trigger(target,key)
			return res
		},
		deleteProperty(target,key){
			const res = Reflect.deleteProperty(target,key)
			return res
		}
	})
	//緩存代理結(jié)果
	toProxy.set(obj,observed)
	toRaw.set(observed,obj)
	return observed
}
//保存當(dāng)前活動(dòng)響應(yīng)函數(shù)作為getter和effect之間的橋梁
const effectStack = []
//設(shè)置響應(yīng)函數(shù)，創(chuàng)建effect函數(shù)，執(zhí)行fn并將其入棧
function effect(fn){
	const rxEffect = function(){
		//捕獲可能的異常
		try{
			//入棧，用于后續(xù)依賴(lài)收集
			effectStack.push(rxEffect)
			//運(yùn)行fn，觸發(fā)依賴(lài)收集
			return fn()
		}finally{
			//執(zhí)行結(jié)束，出棧
			effectStack.pop()
		}
	}
	//默認(rèn)執(zhí)行一次響應(yīng)函數(shù)
	rxEffect()
	//返回響應(yīng)函數(shù)
	return rxEffect
}
//映射關(guān)系表
//{target:{key:[fn1,fn2]}}
let targetMap = new WeakMap()
function track(target,key){
	//從棧中取出響應(yīng)式函數(shù)
	const effect = effectStack[effectStack.length - 1]
	if(effect){
		let depsMap = targetMap.get(target)
		if(!depsMap){
			depsMap = new Map()
			targetMap.set(target,depsMap)
		}
		//獲取key對(duì)應(yīng)的響應(yīng)函數(shù)集
		let deps = depsMap.get(key)
		if(!deps){
			deps = new Set()
			depsMap.set(key,deps)
		}
		//將響應(yīng)函數(shù)加入到對(duì)應(yīng)集合
		deps.add(effect)
	}
}
//觸發(fā)target，key對(duì)應(yīng)響應(yīng)函數(shù)
function trigger(target,key){
	//獲取依賴(lài)表
	const depsMap = targetMap.get(target)
	if(depsMap){
		//獲取響應(yīng)函數(shù)集合
		const deps = depsMap.get(key)
		console.log(deps)
		if(deps){
			//執(zhí)行所有響應(yīng)函數(shù)
			deps.forEach(effect=>{
				effect()
			})
		}
	}
}
//使用
//設(shè)置響應(yīng)函數(shù)
const state = reactive({
	foo:"aaa"
})
effect(()=>{
	console.log(state.foo)//aaa   bbb
})
state.foo
state.foo = "bbb"