SOURCE

//1拦截器 用拦截器的方法覆盖数组的原生方法 
		const arrayProto = Array.prototype; //数组的原型
		const arrayMethods = Object.create(arrayProto); //数组原型 创建对象A

		['push','pop','shift','unshift','splice','sort','reverse'].forEach(function(method){
			const original = arrayProto[method]; //遍历数组中的方法
			// Object.defineProperty(arrayMethods,method,{ //对象A的属性定义
			// 	value:function mutator(...args){
			// 		//拦截器中的实例
			// 		const ob = this.__ob__;
			// 		return original.apply(this,args)
			// 	},
			// 	enumerable:false,
			// 	writable:true,
			// 	configurable:true
			// })//对象的属性定义
			def(arrayMethods,method,function mutator(...args){
				const result = original.apply(this,args)
				console.log("--2--")
				console.log(this)
				const ob = this.__ob__;
				let inserted
				switch (method){
					case 'push':
					case 'unshift':
						inserted = args
						break
					case 'splice':
						inserted = args.slice(2)
						break
				}
				if(inserted) ob.observerArray(inserted)
				ob.dep.notify()//在拦截器上获取实例 向依赖发送消息
				return result;
			})
		})

		//2 拦截器覆盖原型
		class Observer {
			constructor (value) {
				this.value = value;
				this.dep = new Dep();

				def(value,'__ob__',this)
				if(Array.isArray(value)){//拦截器获取实例 获得dep
					value.__proto__ = arrayMethods;
					this.observerArray(value)
				}
			}

			observerArray(items){
				for (var i = 0; i < items.length; i++) {
					console.log(items[i])
					observer(items[i])
				}
			}
		}
		//3 依赖存放在observer中
		class Dep {
			constructor(){
				this.subs = []
			}
			addSub(sub){
				this.subs.push(sub)
			}
			removeSub(sub){
				remove(this.subs,sub)
			}

			depend(){
				this.addSub(window.target)
			}

			notify(){
				console.log("--依赖派发--")
				// const subs = this.subs.slice()
				// for (var i = 0,l = sub.length; i < l; i++) {
				// 	subs[i].update()
				// }
			};
		}

		function remove(arr,item){
			const index = arr.indexOf(item)

			return arr.splice(index,1)
		}
		//4 如何收集依赖在 defineReactive中收集依赖
		function defineReactive (data,key,val){
			let childOb = observer(val)
			Object.defineProperty(data,key,{//数据的属性定义B
				enumerable:true,
				configurable:true,
				get:function(){
					if(childOb){
						console.log("--收集依赖--")
						// childOb.dep.depend()
					}
					return val
				},
				set:function(){
					console.log("--set--")
				}
			})
		}

		function observer(value){
			console.log("---3---")
			// console.log(value instanceof Object)
			if(!(value instanceof Object)){
				return
			}
			console.log(value)
			ob = new Observer(value)
			return ob;
		}
		//拦截器中获取Observer实例
		function def(obj,key,val,enumerable){
			Object.defineProperty(obj,key,{
				value:val,
				enumerable:!!enumerable,
				writable:true,
				configurable:true
			})
		}

		//依赖
		// class Watcher{
		// 	constructor(vm,cb){
		// 		this.vm = vm;
				
		// 		window.target = this;
		// 		this.cb = cb;
		// 		window.target = null;
		// 	}
		// }
		//运行
		let  arrayList = {
			list:[1,3,5,7]
		}
		defineReactive(arrayList,"list",arrayList.list)
		// console.log(arrayList.list[1])
		arrayList.list.push(9)
		//文档
		/**首先在defineReactive中 调用observer方法 new Observer类获得实例（包含value 和dep）并且将拦截器附上
		定义了arrayList 的get和set方法 在get在通过observer实例中的Dep实例dep 获取依赖
		Dep和Observer在此进行关联
		
		其次当调用push方法时候通过this获取dep进行依赖派发

		**/