我們經常聽到angular的臟檢查機制和數據的雙向綁定，這兩個詞似乎已經是它的代名詞了。那么從編程層面，這到底是什么鬼？

當$scope的一個屬性被改變時，界面可能會更新。那么為什么angular里面，修改$scope上的一個屬性，可以引起界面的變化呢？這是angular的數據響應機制決定的。在angular里面就是臟檢查機制。而臟檢查，和雙向綁定離不開。

這里插句題外話，JavaScript里面非常有意思的一種接口，當你修改（或新增）一個對象的某個屬性時，會觸發該對象里面的setter。如果你對這塊不是很了解，可以先學一下 Object.defineProperty ，包括這兩年超級火的vuejs也是通過這個接口實現的。它是一個ES5的標準接口。

我們可以設計一種實現，當你修改或賦值$scope的某個屬性時，就觸發了$scope這個js對象的setter，我們可以自定義這個setter，在setter函數內部，調用某些邏輯去更新界面。同時，為了確保新塞進來的對象也可以被監聽到變化，在你賦值時，還要把賦值進來的對象也進行改造，改造為可以被監聽的對象。

雙向綁定顧名思義是兩個過程，一個是將$scope屬性值綁定到HTML結構中，當$scope屬性值發生變化的時候界面也發生變化；另一個是，當用戶在界面上進行操作，例如點擊、輸入、選擇時，自動觸發$scope屬性的變化（界面也可能跟著變）。而臟檢查的作用是“在當$scope屬性值發生變化的時候促使界面發生變化”。

angular的數據響應機制

那么，在代碼層面，angular是怎么做到監聽數據變動然后更新界面的呢？答案是，angular根本不監聽數據的變動，而是在恰當的時機從$rootScope開始遍歷所有$scope，檢查它們上面的屬性值是否有變化，如果有變化，就用一個變量dirty記錄為true，再次進行遍歷，如此往復，直到某一個遍歷完成時，這些$scope的屬性值都沒有變化時，結束遍歷。由于使用了一個dirty變量作為記錄，因此被稱為臟檢查機制。

這里面有三個問題：

1. “恰當的時機”是什么時候？
2. 如何做到知道屬性值是否有變化？
3. 這個遍歷循環是怎么實現的？

要解決這三個問題，我們需要深入了解angular的$watch, $apply, $digest。

$watch綁定要檢查的值

簡單的說，當一個作用域創建的時候，angular會去解析模板中當前作用域下的模板結構，并且自動將那些插值（如{{text}}）或調用（如ng-click="update"）找出來，并利用$watch建立綁定，它的回調函數用于決定如果新值和舊值不同時（或相同時）要干什么事。當然，你也可以手動在腳本里面使用$scope.$watch對某個屬性進行綁定。它的使用方法如下：

$scope.$watch(string|function, listener, objectEquality, prettyPrintExpression)

第一個參數是一個字符串或函數，如果是函數，需要運行后得到一個字符串，這個字符串用于確定將綁定$scope上的哪個屬性。listener則是回調函數，表示當這個屬性的值發生變化時，執行該函數。objectEquality是一個boolean，為true的時候，會對object進行深檢查（懂什么叫深拷貝的話就懂深檢查）。第四個參數是如何解析第一個參數的表達式，使用比較復雜，一般不傳。

$digest遍歷遞歸

當使用$watch綁定了要檢查的屬性之后，當這個屬性發生變化，就會執行回調函數。但是前面已經說過了，angular里面沒有監聽這么一說，那么它怎么會被回調呢？它沒有用object的setter機制，而是臟檢查機制。臟檢查的核心，就是$digest循環。當用戶執行了某些操作之后，angular內部會調用$digest()，最終導致界面重新渲染。那么它究竟是怎么一回事呢？

調用$watch之后，對應的信息被綁定到angular內部的一個$$watchers中，它是一個隊列（數組），而當$digest被觸發時，angular就會去遍歷這個數組，并且用一個dirty變量記錄$$watchers里面記錄的那些$scope屬性是否有變化，當有變化的時候，dirty被設置為true，在$digest執行結束的時候，它會再檢查dirty，如果dirty為true，它會再調用自己，直到dirty為true。但是為了防止死循環，angular規定，當遞歸發生了10次或以上時，直接拋出一個錯誤，并跳出循環。

遞歸流程如下：

1. 判斷dirty是否為true，如果為false，則不進行$digest遞歸。（dirty默認為true）
2. 遍歷$$watchers，取出對應的屬性值的老值和新值
3. 根據objectEquality進行新老值的對比。
4. 如果兩個值不同，則繼續往下執行。如果兩個值相同，則設置dirty為false。
5. 檢查完所有的watcher之后，如果dirty還為true（這一點需要閱讀我下面的偽代碼）
6. 設置dirty為true
7. 用新值代替老值，這樣，在下一輪遞歸的時候，老值就是這一輪的新值
8. 再次調用$digest

當遞歸流程結束之后，$digest還要執行：

將變化后的$scope重新渲染到界面

當一個作用域創建完之后，$scope.$digest會被運行一次。dirty的默認值被設定為true，因此，如果你在controller里面使用了$watch，并且進行了屬性賦值，往往刷新頁面就可以看到$watch的回調函數被執行了。但是，現在問題來了，上面說的“angular內部會調用$digest()”，這個內部是怎么實現的？

$apply觸發$digest

在我們自己編程時，并不直接使用$digest，而是調用$scope.$apply()，$apply內部會觸發$digest遞歸遍歷。同時，你可以給$apply傳一個參數，是個函數，這個函數會在$digest開始之前執行。現在回到上面的問題，angular內部怎么觸發$digest？實際上，angular里面要求你通過ng-click, ng-modal, ng-keyup等來進行數據的雙向綁定，為什么，因為這些angular的內部指令封裝了$apply，比如ng-click，它其實包含了document.addEventListener('click')和$scope.$apply()。

當用戶在模板里面使用ng-click時，如下：

<div ng-click="update()">change</div>

$scope.update = function() { $scope.name = 'tom'}

實際上，當用戶點擊之后，angular內部還會執行$scope.$apply()，從而觸發$digest遍歷遞歸，最終觸發界面重繪。

手動調用$apply

但是有些情況下，我們不可能直接使用angular內部指令，有兩種情況我們需要手動調用$apply，一種是調用angular內置的語法糖，比如$http, $timeout，另一種是我們沒有使用angular內部機制去更新了$scope，比如我們用$element.on('click', () => $scope.name = 'lucy')。也就是說“異步”和“機制外”修改$scope屬性值之后，我們都要手動調用$apply，雖然我們在調用$timeout的時候，沒有手寫$apply，但實際上它內部確實調用了$apply:

function($timeout) { // 當我們通過on('click')的方式觸發某些更新的時候，可以這樣做 $timeout(() => {  $scope.name = 'lily' }) // 也可以這樣做 $element.on('click', () => {  $scope.name = 'david'  $scope.$apply() })}

但是，一定要注意，在遞歸過程中，絕對不能手動調用$apply，比如在ng-click的函數中，比如在$watch的回調函數中。

偽代碼實現

通過上面的講解，你可能已經對angular里面的臟檢查已經了解了，但是我們還是希望更深入，用代碼來把事情說清楚。我這里不去抄寫angular的源碼，而是自己寫一段偽代碼，這樣更有助于理解整個機制。

import { isEqual } from 'lodash'class Scope { constructor() {  this.$$dirty = true  this.$$count = 0  this.$$watchers = [] } $watch(property, listener, deepEqual) {  let watcher = {   property,   listener,   deepEqual,  }  this.$$watchers.push(watcher) } $digest() {  if (this.$$count >= 10) {   throw new Error('$digest超過10次')  }  this.$$watchers.forEach(watcher => {   let newValue = eval('return this.' + watcher.property)   let oldValue = watcher.oldValue   if (watcher.deepEqual && isEqual(newValue, oldValue)) {    watcher.dirty = false   }    else if (newValue === oldValue) {    watcher.dirty = false   }   else {    watcher.dirty = true    eval('this.' + watcher.property + ' = ' newValue)    watcher.listener(newValue, oldValue) // 注意，listener是在newValue賦值給$scope之后執行的    watcher.oldValue = newValue   }   // 這里的實現和angular邏輯里面有一點不同，angular里面，當newValue和oldValue都為undefined時，listener會被調用，可能是angular里面在$watch的時候，會自動給$scope加上原本沒有的屬性，因此認為是一次變動  })    this.$$count ++  this.$$dirty = false  for (let watcher of this.$$watchers) {   if (watcher.dirty) {    this.$$dirty = true    break   }  }  if (this.$$dirty) {   this.$digest()  }  else {    this.$patch()    this.$$dirty = true    this.$$count = 0  } } $apply() {  if (this.$$count) {   return // 當$digest執行的過程中，不能觸發$apply  }  this.$$dirty = true  this.$$count = 0  this.$digest() } $patch() {  // 重繪界面 }}

function ControllerRegister(controllerTemplate, controllerFunction) { let $scope = new Scope() $paser(controllerTemplate, $scope) // 解析controller的模板，把模板中的屬性全部都解析出來，并且把這些屬性賦值給$scope controllerFunction($scope) // 在controllerFunction內部可能又給$scope添加了一些屬性，注意，不能在運行controllerFunction的時候調用$scope.$apply() let properties = Object.keys($scope) // 找出$scope上的所有屬性 // 要把$scope上的一些內置屬性排除掉  properties = properties.filter(item => item.indexOf('$') !== 0) // 當然，這種排除方法只能保證在用戶不使用$作為屬性開頭的時候有用 properties.forEach(property => {  $scope.$watch(property, () => {}, true) }) $scope.$digest()}

上面就是用偽代碼實現了angular內部的機制，不能作為真實的引擎去使用，但是體現了整個臟檢查的實現思路。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。