现在脏值检测还有什么问题？
目前的脏值检测只能检测基本的值，比如string和Number。看一个测试案例：
it('基于值的检测',function () {
var times = 0;
scope.a = {
name:'wangji',
age:18
}
var watchFn = function(scope){
return scope.a;
}
var listenFn=function(oldvalue,newvalue,scope){
times++;
}
scope.$watch(watchFn,listenFn);
scope.$digest();
scope.a.age=30;
expect(times).toBe(2);//现在是1
})
})
这个案例是通不过的，梳理一下过程，首先，scope.a的watcher里面保存的last值是undefined，因为毕竟一次都没运行过于是运行了一次，times变成1。
之后改变scope.a的值，再运行一次digest，发现还是1。因为此时的oldValue和newValue指向的都是同一个对象，这样对比的话，只能对比对象的内存地址，不能对比对象里面值的变化。所以两个值永远是相等的。想要修正这个问题，其实很简单，用到我上一次写的那个工具方法就可以：
Scope.prototype.$$digestOnce=function(){
var self = this;
var oldValue,newValue,dirty;
for(var i=0;i<this.$$watchers.length;i++){
oldValue = this.$$watchers[i].last;
newValue = this.$$watchers[i].watchFn(self)
if(!equals(oldValue,newValue)){//用之前写的工具函数
this.$$lastDirtyWatch=this.$$watchers[i];
this.$$watchers[i].last = newValue;
this.$$watchers[i].listenFn(newValue,oldValue,self);
dirty=true;
}else{
if(this.$$watchers[i]===this.$$lastDirtyWatch){
return false;
}
}
}
return dirty;
}
发现报错了，还是没有运行第二次，看看哪里出了问题。发现问题了，因为watcher.last保存的是上一次运行的最新值，在这个案例中是一个对象，所以last其实保存的是一个指向这个对象的指针，那么当我后面修改Scope.a的时候，其实last指向的对象里面的值也变了，所以第二次运行对比的时候两个对象还是相等的。
这样显然是不行的，因为我需要每次值变化都能触发listenFn。
现在的解决思路是，把last里面每次都保存一个深度拷贝的对象或者值。
花几分钟写个深度copy函数
function copy(oldObj) {
if (typeof oldObj === 'string' || typeof oldObj ==='number') return oldObj;//如果是普通值就直接返回自己
var newObj = Array.isArray(oldObj) ? [] : {};//判断是拷贝数组还是对象
if (Array.isArray(oldObj)) {
for (var i = 0; i < oldObj.length;i++){
if(typeof oldObj[i]==='object'){
newObj[i]=copy(oldObj[i])
}else{
newObj.push(oldObj[i])
}
}
} else {
for (var key in oldObj) {
if(typeof oldObj[key]==='object'){
newObj[key]=copy(oldObj[key])
}else{
newObj[key]=oldObj[key]
}
}
}
return newObj;
}
然后修改一下现在的digestOnce，把last的值存成一个深度拷贝的对象。
Scope.prototype.$$digestOnce = function () {
var self = this;
var oldValue, newValue, dirty;
for (var i = 0; i < this.$$watchers.length; i++) {
oldValue = this.$$watchers[i].last;
newValue = this.$$watchers[i].watchFn(self)
if (!equals(oldValue, newValue)) {
this.$$lastDirtyWatch = this.$$watchers[i];
this.$$watchers[i].last = copy(newValue); //把这个换了。
this.$$watchers[i].listenFn(newValue, oldValue, self);
dirty = true;
} else {
if (this.$$watchers[i] === this.$$lastDirtyWatch) {
return false;
}
}
}
return dirty;
}
这样一来，测试案例就通过了。
image.png
