现在脏值检测还有什么问题？

目前的脏值检测只能检测基本的值，比如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