Angular作用域

在用angular搭建的網(wǎng)頁應(yīng)用中，作用域（scope）這個概念是貫穿其中的。在angular的視圖（view）中的很多指令是會創(chuàng)建一個作用域的，例如 ng-app ， ng-controller 等。這個作用域就是我們在寫控制器構(gòu)造函數(shù)時注入的 $scope （angular1.2之前的版本），他是視圖模型（view model）中的一個概念。我們的數(shù)據(jù)模型（model）就是定義在作用域中的。

Angular作用域的坑

用過angular的人應(yīng)該都會經(jīng)過一個過程，就是剛開始還是小白的時候，剛看見數(shù)據(jù)雙向綁定覺得很牛逼，

Angular中作用域的坑1

管他三七二十一直接開始用，一頓綁定。綁定完之后，如果你運(yùn)氣好（懂得angular作用域原理的老鳥無視），那么雙向綁定就開始如愿工作了，這時候我們也覺得自己好厲害，居然可以這么快就實(shí)現(xiàn)“雙向綁定”這個才聽說不久的新功能了。

那么為什么上面說雙向綁定是因?yàn)檫\(yùn)氣好才能正常工作呢？因?yàn)樾率謩傞_始學(xué)angular的時候，無非就是看教程然后改動其中的代碼實(shí)現(xiàn)自己的業(yè)務(wù)需求，能剛開始就去學(xué)習(xí)官方文檔的選手就算有也是少數(shù)，所以這樣，大多數(shù)剛學(xué)習(xí)angular的朋友實(shí)際上不太了解其中的原理，但是覺得自己已經(jīng)會用了。

好說了這么多，那我們來看看如果一個新手剛開始給作用域中指定數(shù)據(jù)模型并且進(jìn)行雙向綁定時，運(yùn)氣不那么好的情況。這種情況下，就會遇到上面說的坑，先來看看代碼

// html
<div ng-controller="OuterCtrl">
  <span ng-bind="a"></span>
  <div ng-controller="InnerCtrl">
    <span ng-bind="a"></span>
    <button ng-click="a=a+1">遞增</button>
  </div>
</div>

// javascript
function OuterCtrl($scope) {
  $scope.a = 1;
}
function InnerCtrl() {}

上面的代碼就是一個極其簡單的雙向綁定的例子。頁面加載以后，外部 div 和內(nèi)部 div 中都會顯示1。當(dāng)按了遞增按鈕之后，會發(fā)現(xiàn)只有內(nèi)部的1變成了2，繼續(xù)按也是一樣，只有內(nèi)部的數(shù)字會遞增。那么這時候，新手往往就慌了，說好的神奇的雙向綁定呢？

Angular中作用域的坑2

這個時候?qū)殞毦陀悬c(diǎn)小情緒了，stackoverflow走起，官方文檔走起，最后發(fā)現(xiàn)確實(shí)有解決方法，比如說將 a 寫成一個對象的屬性 data.a ：

// html
<div ng-controller="OuterCtrl">
  <span ng-bind="data.a"></span>
  <div ng-controller="InnerCtrl">
    <span ng-bind="data.a"></span>
    <button ng-click="data.a=data.a+1">遞增</button>
  </div>
</div>

// javascript
function OuterCtrl($scope) {
  $scope.data = {
    a: 1
  };
}
function InnerCtrl() {}

然后發(fā)現(xiàn)，居然可以工作了，兩個數(shù)字都跟著遞增了，我是雙向綁定之王……然后就扔一邊也不管具體的原理繼續(xù)學(xué)習(xí)下一部分教程了。這其實(shí)就是我當(dāng)初學(xué)習(xí)angular的心路歷程，實(shí)在慚愧做了應(yīng)用部署到生產(chǎn)環(huán)境之后才想起來去研究研究內(nèi)部的原理。

坑總是要填的

廢話說了那么多，坑也去踩了，下面進(jìn)入填坑階段，也就是這個坑是為什么會出現(xiàn)為什么寫成對象的屬性就能解決。其實(shí)知道了原理之后，是很容易理解的。angular的內(nèi)外層作用域之間是基于javascript的原型鏈來實(shí)現(xiàn)的繼承，并且只使用了原型鏈繼承方法，有點(diǎn)JavaScript基礎(chǔ)的朋友應(yīng)該就能瞬間反應(yīng)過來，子類原型對象中的引用類型值和父類實(shí)例對象中的引用類型值是引用的同一個，而基本類型值則會覆蓋父類對象中的基本類型值，這其實(shí)也是組合繼承存在的原因，因?yàn)楣庥迷玩溊^承會帶來上訴問題，扯得有點(diǎn)遠(yuǎn)

總之這里，我們可以這樣來看待第一個例子：

function OuterCtrl() {
  this.a = 1;
}
function InnerCtrl() {}

var outer = new OuterCtrl();
InnerCtrl.prototype = outer;
var inner = new InnerCtrl();
inner.a = inner.a + 1;

這里，我們將內(nèi)部的控制器的構(gòu)造函數(shù)的原型對象設(shè)置為外部作用域?qū)ο?，這樣產(chǎn)生的內(nèi)部作用域?qū)ο缶屠^承了外部對象 outer 中的屬性 a 。這個屬性是個基本類型值，對內(nèi)部對象的屬性 a 進(jìn)行訪問的時候，由于內(nèi)部對象本身不存在這樣的屬性，就會從它的原型對象中查找，原型對象 outer 中存在這樣的屬性，于是返回值，沒有問題，但是如果我們對內(nèi)部作用域?qū)ο蟮?a 屬性賦值的話，問題就出來了。 inner.a = inner.a + 1; 這個語句實(shí)際上進(jìn)行了前面說的查找 a 屬性值的過程，然后將返回的值賦值給了內(nèi)部作用域?qū)ο蟮?a 屬性，由于 a 屬性是不存在的，因此創(chuàng)建了一個 a 的基本類型值屬性，屏蔽了外層作用域?qū)ο?outer 中的 a 屬性，這個坑就這么出來了。

因此，如果我們將基本類型值屬性換成引用類型值屬性的話，問題就能夠得到解決，因?yàn)樗麄儍蓚€對象對應(yīng)的屬性是引用的同一個引用類型值，不管在哪對它進(jìn)行修改都會反應(yīng)在所有引用他的對象上。

總結(jié)

以上就是關(guān)于Angular中作用域需要注意的坑的全部內(nèi)容，希望本文的內(nèi)容對大家學(xué)習(xí)Angular中的作用域能有所幫助。

最新評論