在前面一篇文章中，谈到了Angular中Digest过程。当调用scope.$apply方法时，实际上是从root scope开始，按照scope的层次结构，调用每个scope的$digest方法。这就是为什么在Scope的构造函数中会设置$root属性：
function Scope() { this.$parent = null;//... this.$root = this; this.$$destroyed = false; this.$$listeners = {}; //... }
对于一般child scope，$root会通过原型继承得到，在root scope构造以后，后续的scope都可以访问$root对象，即是root scope对象。对于isolated scope，由于是通过Scope构造函数创建（非原型继承），$root被child scope覆盖，需要将$root属性设置为parent的$root属性，如前面$new的实现。这就保证了在任何一个scope中始终能拿到root scope的实例，也就可以完成自上而下的Digest过程，在$apply等方法的实现中，使用$rootScope代替$root，二者相同：
$apply: function(expr) { beginPhase('$apply'); try { return this.$eval(expr); } finally { clearPhase(); } finally { $rootScope.$digest(); } },//...
$rootScope是$RootScopeProvider提供的Scope类型实例，是最先初始化的scope对象。在开发中，我们可以这样使用child scope：
.controller('smallCatCtrl', [ '$scope', function($scope){ var child = $scope.$new(); child.text = 'cat'; var child1 = $scope.$new(true); child1.value = 0; var child2 = $scope.$new(true, child); child2.value = 1; child2.$watch('value', function(oldValue, newValue){ console.log('child2.value changed'); }); child1.$watch('value', function(oldValue, newValue){ console.log('child1.value changed'); }) child.$watch('text', function(oldValue, newValue){ console.log('child.text changed'); }); console.log(child2.text); }]);
在这段代码中，首先创建$scope的一个子scope----child，没有给$new指定参数，意味着child原型继承于$scope。同时定义了child的属性text。接下来创建$scope的第二个子scope----child1，传入$new的参数要求child1是isolated scope，并且在层次结构上是$scope的后代。同时定义了其value属性。最后创建scope child2，它也是一个isolated scope，不同的是它以child为层次结构上的parent scope。
这段代码的输出如下：
首先，child2只是在层次结构上继承于child，因此没有把child实例作为原型，也就没有text属性，第一行输出undefined。
由于Digest过程按scope层次结构自上而下进行，类似于树的深度遍历过程。在该例中scope的顺序为$scope->child->child2->child1，因此三个watch listener函数的输出也按照上面的顺序。
本文参考资料：
1. AngularJS 官方文档
2. AngularJS 源代码
3. JavaScript 高级程序设计（第3版）
4. Build Your Own AngularJS
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: