在上一篇文章里，我们已经实现了对object值得监听，但是却有一个很严重得问题，就是如果我们给他添加一个新的key，新的key却没有被监听，加下来的这篇我们就来解决下这个问题。
大家有没有注意到第一篇文章里的WatchObject函数，每次如果值是object对象，都会调用此方法来给遍历子值
在WatchObject函数的内部，我们初始化了一个对象，我们就可以给WatchObject添加一个prorotype方法，来进行添加新值得操作。
const WatchObject = (data, path, event) => {
function WatchObject(){
for(var key in data){
//调用原型链上的set来实现数据监听
this.set(key, data[key])
}
}
//为object添加一个set方法
WatchObject.prototype.set = function(key,val){
//调用之前创建的函数，格式化val
data[key] = createNewWatch(val, path, key, event)
//创建对数据key的监听
defineProperty(this, key, data[key], path.concat(key), event)
}
return new WatchObject()
}
然后我们测试一下代码
const b = WatchObject(data,[],{
set(path,val){
console.log(path,val)
}
})
//调用set添加一个key和value
b.set("ss",22)
//然后我们修改添加得这个key
b.ss = 33;
//这时候你会发现，WatchObject里传入的set也调用了，这说明也被监听到了
如果我们监听的是数组，那么set方法显然不够有好了，而数组的pust，unshift等根本就无法监听数据的变化，因此我们就需要重写数组的那些方法了
接下来我们创建一个数组对象，来实现方法的重写
const WatchArray = (data, path, event) => {
function WatchArray(){
data.forEach(v => this.push(v))
}
//让函数拥有array的方法
WatchArray.prototype = []
//将函数的constructor指向Array
WatchArray.prototype.constructor = Array;
//重写函数的push方法
WatchArray.prototype.push = function(val){
//读取当前得到长度
const key = this.length
//调用之前创建的函数，格式化val
val = createNewWatch(val, path, key, event)
//将值添加进数组中
Array.prototype.push.call(this,val)
//创建对数据key的监听
defineProperty(this, key, val, path.concat(key), event)
}
return WatchArray();
}
这个数组对象暂时实现了push方法，让我们将其加入到之前写的val格式化的函数中去
const createNewWatch = (val, path, parentKey, event) => {
//如果值不是object类型，那么直接返回此值
if(typeof val != 'object') return val;
//反之如果是object类型，那么调用WatchObject，在进行子元素的遍历及监听
//WatchObject会在下面的代码中进行创建
if(val instanceof Array){
//是个是数组的话就走刚才创建的数组对象
return WatchArray(val,path.concat(parentKey), event)
}
return WatchObject(val,path.concat(parentKey), event)
}
让我们来进行一下测试
//调用push填充一个值看看
b.school.push('ddd')
//然后修改填充的下标
b.school[2]=44
//这时候你会发现，WatchObject里传入的set也调用了，这说明也被监听到了
//😊完美
然后捏，再添加一个unshift方法
//unshift和push类似
//都是先获取到现有数组的长度，然后格式化val值，调用Array的unshift将值添加进数组中
//不过需要注意的是，因为咱们咱们是在数组的首位添加了值，然后咱们监听时候就需要监听数组最后一个值的下标，并传入最后一个值的val
WatchArray.prototype.unshift = function(val){
const key = this.length
val = createNewWatch(val, path, key, event)
Array.prototype.unshift.call(this,val)
defineProperty(this, key, this[key], path.concat(key), event)
}
现在数组的push，unshift，的数组追加功能也都实现了，大家可以放到浏览器里试试了，
如果此时你进行for遍历就会发现，我们添加到prototype的方法也被遍历出来了，这肯定是不对的，这是我就需要在调用defineProperty在进行以下方法的处理
//添加进WatchObject的函数内
Object.defineProperty(WatchObject.prototype,'set',{ enumerable: false })
//添加进WatchArray的函数内
Object.defineProperty(WatchArray.prototype,'push',{ enumerable: false })
Object.defineProperty(WatchArray.prototype,'unshift',{ enumerable: false })
Object.defineProperty(WatchArray.prototype,'constructor',{ enumerable: false })
WatchArray也同样加到指定位置中
const WatchObject = (data, path, event) => {
function WatchObject(){
for(var key in data){
this.set(key, data[key])
}
}
WatchObject.prototype.set = function(key,val){
//调用之前创建的函数，格式化val
data[key] = createNewWatch(val, path, key, event)
//创建对数据key的监听
defineProperty(this, key, data[key], path.concat(key), event)
}
Object.defineProperty(WatchObject.prototype,'set',{ enumerable: false })
return new WatchObject()
}
发一个传送门，一个完整的dome--(˙<>˙)/--
然后大功告成
image.png
