《AngularJS深度剖析與最佳實踐》一2.3 作用域

本節書摘來自華章出版社《angularjs深度剖析與最佳實踐》一書中的第2章，第2.3節，作者 雪狼 破狼 彭洪偉，更多章節内容可以通路雲栖社群“華章計算機”公衆号檢視

如果你曾經用jquery寫過傳統的非mvc前端程式，那麼在第1章“從實戰開始”中看到的這些代碼可能會讓你感到驚訝—不再有連篇累牍的dom操作，不再有混合了業務邏輯和視圖邏輯的臃腫代碼，不再一聽到寫測試就閃過“不可能”三個字……

“光榮屬于mvc！”我們說angular是個mvw（model-view-whatever）風格的架構，而在angular中扮演model角色的概念，就是作用域（scope）。

在angular中，scope通過原型繼承的方式被組織成了一棵樹，它的根節點就是$rootscope，這是angular在啟動時自動建立的，它通常對應于ng-app指令，并且關聯到ng-app所在的節點。

接下來，angular會解析ng-app包含的html，其中的一些指令，如ng-view、ng-if、ng-repeat等也會建立自己的scope，這些scope都是從$rootscope及其子scope建立出來的，它們的嵌套關系也和這些指令的嵌套關系一緻。

由于它們使用了原型繼承的方式，是以，凡是上級scope擁有的屬性，都可以從下級scope中讀取，但是當需要對這些繼承下來的屬性進行寫入的時候，問題就來了：寫入會導緻在下級scope上建立一個同名屬性，而不會修改上級scope上的屬性。這不是bug，而是“原型繼承”的固有語義，這是用慣了“類繼承”的後端程式員需要特别注意的。更詳細的分析和解決方式請參見4.9節“使用controller as vm方式”。

這種scope樹很好的展現了model之間的嵌套關系，對業務資料的結構是一個很恰當的抽象。

scope之是以如此重要，是因為它事實上是angular解耦業務邏輯層和視圖層的關鍵：controller操作scope，view則展現scope的内容，傳統前端程式中大量複雜的dom操縱邏輯都被轉變成對scope的操作。

這種樹形結構不但展現在資料的繼承關系上，而且展現在消息的冒泡機制上。有dom基礎的同學可以拿它和dom的消息冒泡機制做類比，在後面的2.11節“消息”中我也會專門對此進行講解。