Angularjs Scope 原型链

咱们知道scope是能够继承的.scope的继承和js原型链是同一个概念。

    <div ng-controller="parentCtrl">
        {{name}}
       <div ng-controller="childCtrl">
           {{name}}
       </div>
    </div>

在angular中,ng-controller指令会帮咱们建立一个scope并继承它的父亲scope . 

parentCtrl scope继承自 $rootScope , childCtrl scope 继承自parent scope.

app.controller("parentCtrl", function ($scope,$rootScope) {           
    $scope.name = "keatkeat";
});
app.controller("childCtrl", function ($scope) {
  
});

因此即便咱们在childCtrl没有给 name 赋值，模板依然能够从parentCtrl 读取到"keatkeat".

继承对于子层读取父亲属性值很是良好和简单。可是在写就不那么方便了！

好比 

app.controller("childCtrl", function ($scope) {
    $scope.name = "xinyao";
});

当咱们在子层填"xinyao"时，你会发现这个值确实在子层的模板出现了，而父亲模板依旧是原来的"keatkeat"

孩子能够覆盖父亲，这也许是咱们想要的。

但也有这种状况 

app.controller("parentCtrl", function ($scope,$rootScope) {           
    $scope.name = {
        first: "keat",
        last: "keat"
    }
});
app.controller("childCtrl", function ($scope) {
    $scope.name.first = "xin";
    $scope.name.last = "yao";                   
});

当父亲的值是个对象时，就要特别当心了。$scope.name.first = "xin"; 会修改掉父亲的值！

因此对于原型链来讲，孩子是有"机会"修改掉父亲的值的。

若是你不熟悉js 可能会不太能理解，其实原理是很简单的 

你能够把 $scope.name.first = "xin"; 当作这样

var obj = $scope.name; //读取name属性,在子层没有，因此会去父层找，而且找到了一个对象 

obj.first = "xin";  //你写入的天然是父层的对象咯，因此也就覆盖了父亲啦 . 

这其实也挺好的！善加利用的话，孩子能够修改父亲的值也很方便。

那么是否是只有对象才可能这样呢。

若是只是 $scope.name = "keatkeat"; 就不可能被子层修改了吗？

大部分状况是！可是也有例外！

好比

app.controller("parentCtrl", function ($scope, $rootScope) {
    var _name = "keatkeat";
    Object.defineProperty($scope, "name", {
        get: function () { return _name },
        set: function (newValue) { _name = newValue }
    });
});
app.controller("childCtrl", function ($scope) {
    $scope.name = "xinyao";
});

父亲的name是加了setter的属性, object.defineProperty是ECMA5 的新功能。

一但这样，孩子就没法在添加本身的name属性了，它会直接调用父亲的name作读写！

善加利用的话仍是不错的！ 

总结 : angularjs的scope是单纯的js对象，继承也是单纯的js继承(原型链)，因此呢不要感受它很神奇很神秘，你要去了解它才能把它发挥出来 ^^