scope揭秘
你已經(jīng)從書(shū)中開(kāi)始的部分看到了關(guān)于scope作用域的內(nèi)容〈镜兀現(xiàn)在我們要去揭秘AngularJS作用域躯畴。
基本上民鼓，一個(gè)scope作用域就是一個(gè)純粹的Angularjs對(duì)象。
var myObject={name:'AngularJS',creator:'Misko'}
一個(gè)scope作用域就像其他的對(duì)象一樣蓬抄，能夠?qū)ζ涓郊訉傩院头椒ǚ峒巍Ｎㄒ坏膮^(qū)別就是我們不通常手動(dòng)構(gòu)建一個(gè)scope作用域。然而嚷缭，AngularJS自動(dòng)創(chuàng)建和注入一個(gè)scope作用域饮亏。
在AngularJS的世界里，一個(gè)scope對(duì)象被用來(lái)存儲(chǔ)視圖層提供的模型的值阅爽。在先前的例子中路幸，在控制器中的scope作用域上附加屬性：（$scope.greeting='hello'）;我們這樣做以便這個(gè)附加的屬性能夠通過(guò)表達(dá)式{{greeting}}呈現(xiàn)在視圖層中。每一個(gè)AngularJS應(yīng)用都至少有一個(gè)scope作用域叫做根作用域$rootscope付翁。這是作為任何HTML元素附加ng-app指令的結(jié)果創(chuàng)建的简肴。換句話說(shuō)，當(dāng)AngularJS應(yīng)用啟動(dòng)百侧，就會(huì)創(chuàng)建一個(gè)$rootscope砰识。接下來(lái)，當(dāng)你對(duì)任何元素附加ng-controller指令的時(shí)候佣渴，它就會(huì)創(chuàng)建一個(gè)繼承$rooptscope的新的scope作用域辫狼。進(jìn)一步說(shuō)，你可以嵌套scope作用域通過(guò)把一個(gè)ng-controller指令放在另一個(gè)ng-controller指令中辛润。請(qǐng)看下面的片段：
<div ng-app> <!-- creates a $rootScope -->
<div ng-controller="OuterController"> <!--creates a scope(call it scope 1) that inherits from $rootScope-->
<div ng-controller="InnerController"> <!-- Creates a childscope (call it scope 2) that inherits from scope 1
</div>
</div>
</div>
$rootscope是所有scope作用域的父及膨处。結(jié)果是，所有附加在$rootscope上的屬性能夠被scope隱式的獲取砂竖。
如果你仔細(xì)觀察上面的代碼真椿，你會(huì)發(fā)現(xiàn)scpe作用域以一種作用域和DOM元素相關(guān)聯(lián)的形式混合嵌套在一起的形式。最重要的是AngularJS的scope作用域繼承是繼承兩者之間的原型乎澄。Javascript不像其他的編程語(yǔ)言一樣瀑粥，例如Java、C++三圆、c#狞换，不支持傳統(tǒng)的繼承。Javascipt用不同的方法來(lái)實(shí)現(xiàn)舟肉，并且簡(jiǎn)單和易于使用修噪。每一個(gè)javascript構(gòu)造函數(shù)都有一個(gè)pototype屬性，直接指向?qū)ο舐访摹．?dāng)你獲取一個(gè)對(duì)象上的屬性(someObject.somePrototype)黄琼，javascript會(huì)在這個(gè)對(duì)象上搜尋這個(gè)屬性。這個(gè)prototype原型屬性就是一個(gè)對(duì)象。如果在原型prototype上找到就會(huì)返回脏款。如果沒(méi)有找到围苫，這個(gè)搜尋就會(huì)沿著原型鏈往上尋找，知道這個(gè)屬性被找到或者Object.prototype被找到撤师。下面這個(gè)例子會(huì)給出原型繼承的一個(gè)了解剂府。
function Car (color,steering){
this.color=color;
this.steering=steering;
}
Car.prototype.year=2012;
var car=new Car('red',left);
console.log(car.color) //print the color form car
console.log(car.year) //print the year form Car.prototype
console.log(car.hasOwnPrototype(year)) //return false
正如你看到的，這個(gè)color屬性在car的對(duì)象上被找到并且返回了剃盾。但是car對(duì)象上沒(méi)有year的屬性腺占。所以Javascipt會(huì)在Car的原型上搜索，找到后并返回痒谴。所以無(wú)論你在構(gòu)造函數(shù)上設(shè)置什么屬性衰伯，將會(huì)通過(guò)實(shí)例來(lái)獲取他。
