function render(){
console.log('视图更新了11')
}
// 对象
var obj = {
name:'haoxiaoxiao',
age:16,
address:{name:'jining'}
}
// 数组
var obj = [1,2,3]
var methods = ['push','pop','shift','unshift']
let arrproto = Array.prototype;
var myproto = Object.create(arrproto)
methods.forEach(method=>{
myproto[method] = function(){
console.log(6666)
render();
arrproto[method].call(this,...arguments)
}
})
function observe(obj){
// 数组劫持
if(Array.isArray(obj)){
obj._proto_ = myproto
return;
}
// 对象劫持
if(typeof obj =='object'){
for(let key in obj){
if(obj.hasOwnProperty(key)){
// set get 响应式方法
defineReacative(obj,key,obj[key])
}
}
}
}
// 响应视图的方法
function defineReacative(obj,key,value){//通过object.defineProperty 这个是针对对象的
observe(value)
Object.defineProperty(obj,key,{
get(){
return value
},
set(newVal){
if(newVal!=value){
render()
value = newVal
}
}
})
}
// 监听对象数据变化
observe(obj)
obj.address.name = 'test'
// 监听数组数据变化
obj.push(123)
console.log(obj)