详解angular脏检查原理及伪代码实现

我们经常听到angular的脏检查机制和数据的双向绑定，这两个词似乎已经是它的代名词了。那么从编程层面，这到底是什么鬼？

当$scope的一个属性被改变时，界面可能会更新。那么为什么angular里面，修改$scope上的一个属性，可以引起界面的变化呢？这是angular的数据响应机制决定的。在angular里面就是脏检查机制。而脏检查，和双向绑定离不开。

这里插句题外话，JavaScript里面非常有意思的一种接口，当你修改（或新增）一个对象的某个属性时，会触发该对象里面的setter。如果你对这块不是很了解，可以先学一下 Object.defineProperty ，包括这两年超级火的vuejs也是通过这个接口实现的。它是一个ES5的标准接口。

我们可以设计一种实现，当你修改或赋值$scope的某个属性时，就触发了$scope这个js对象的setter，我们可以自定义这个setter，在setter函数内部，调用某些逻辑去更新界面。同时，为了确保新塞进来的对象也可以被监听到变化，在你赋值时，还要把赋值进来的对象也进行改造，改造为可以被监听的对象。

双向绑定顾名思义是两个过程，一个是将$scope属性值绑定到HTML结构中，当$scope属性值发生变化的时候界面也发生变化；另一个是，当用户在界面上进行操作，例如点击、输入、选择时，自动触发$scope属性的变化（界面也可能跟着变）。而脏检查的作用是“在当$scope属性值发生变化的时候促使界面发生变化”。

angular的数据响应机制

那么，在代码层面，angular是怎么做到监听数据变动然后更新界面的呢？答案是，angular根本不监听数据的变动，而是在恰当的时机从$rootScope开始遍历所有$scope，检查它们上面的属性值是否有变化，如果有变化，就用一个变量dirty记录为true，再次进行遍历，如此往复，直到某一个遍历完成时，这些$scope的属性值都没有变化时，结束遍历。由于使用了一个dirty变量作为记录，因此被称为脏检查机制。

这里面有三个问题：

“恰当的时机”是什么时候？ 如何做到知道属性值是否有变化？ 这个遍历循环是怎么实现的？

要解决这三个问题，我们需要深入了解angular的$watch, $apply, $digest。

$watch绑定要检查的值

简单的说，当一个作用域创建的时候，angular会去解析模板中当前作用域下的模板结构，并且自动将那些插值（如{{text}}）或调用（如ng-click="update"）找出来，并利用$watch建立绑定，它的回调函数用于决定如果新值和旧值不同时（或相同时）要干什么事。当然，你也可以手动在脚本里面使用$scope.$watch对某个属性进行绑定。它的使用方法如下：

$scope.$watch(string|function, listener, objectEquality, prettyPrintExpression)