<div ng-controller="OuterCtrl"> <span>{{a}}</span> <div ng-controller="InnerCtrl"> <span>{{a}}</span> </div> </div> <script> function OuterCtrl($scope) { $scope.a = 1; } function InnerCtrl($scope) { } </script>
我们可以看到界面显示了两个1，而我们只在OuterCtrl的作用域里定义了a变量，但界面给我们的结果是，两个a都有值,现在自控制器里的a是从父控制器里继承过来的
我们可以父子级的作用域看成两个原型对象，其中一个原型对象继承另一个原型对象的实例
function Outer() { this.a = 1; } function Inner() { } var outer = new Outer(); Inner.prototype=new Outer(); var inner = new Inner(); console.log(outer.a) console.log(inner.a)
Angular的实现机制其实也就是把这两个控制器中的$scope作了关联，外层的作用域实例成为了内层作用域的原型。
既然作用域是通过原型来继承的，自然也就可以推论出一些特征来。比如说这段代码，点击按钮的结果是什么？
<div ng-controller="OuterCtrl"> <span>{{a}}</span> <div ng-controller="InnerCtrl"> <span>{{a}}</span> <button ng-click="a=a+1">a++</button> </div> </div> <script> function OuterCtrl($scope) { $scope.a = 1; } function InnerCtrl($scope) { } </script>
点了按钮之后，两个a不一致了，里面的变了，外面的没变，这是为什么？
function Outer() { this.a = 1; } function Inner() { } var outer = new Outer(); Inner.prototype=new Outer(); var inner = new Inner(); inner.a = inner.a + 1; console.log(outer.a) console.log(inner.a)
因为在原型链中，访问一个实例属性时，会在实例本身查找，如果找不到，则搜索实例的原型，如果再搜索不到，则继续沿着原型链往上查找。找到之后则会赋给该实例，所以inner上面就被赋值了一个新的a，outer里面的仍然保持原样，这也就导致了刚才看到的结果。
上下级共享变量
比如说，我们就是想上下级共享变量，不创建新的，该怎么办呢？
function Outer() { this.data = { a: 1 }; } function Inner() { } var outer = new Outer(); Inner.prototype = outer; var inner = new Inner(); console.log(outer.data.a); console.log(inner.data.a); inner.data.a += 1; console.log(outer.data.a); console.log(inner.data.a);
我们可以把a写在一个对象里，当inner找到对象data并赋值到自己身上时，其实是复制了对象的指针（参考高程第4章复制引用类型和基本类型的区别），我们对对象里的属性的改动都会反映到所有引用该对象的元素上。
反映到AngularJs,我们可以这么写
<div ng-controller="OuterCtrl"> <span>{{data.a}}</span> <div ng-controller="InnerCtrl"> <span>{{data.a}}</span> <button ng-click="data.a=data.a+1">increase a</button> </div> </div> <script> function OuterCtrl($scope) { $scope.data = { a: 1 }; } function InnerCtrl($scope) { } </script>
这样点击按钮两个控制器的a都会+1
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题：《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》