title: Knockout ViewModel computed garbage collection
body: <p>I've been trying to track down any issues with garbage collection within my application code. I've stripped it down to pure knockout code and there seems to be an issue collecting created objects depending on how a computed property is created.</p>
  
  <p>Please see the following JS fiddle:  <a href="http://jsfiddle.net/SGXJG/" rel="noreferrer">http://jsfiddle.net/SGXJG/</a></p>
  
  <ol>
  <li>Open Chrome profiler.</li>
  <li>Take a heap snapshot</li>
  <li>Click Make All</li>
  <li>Take another heap snapshot</li>
  <li>Compare the snapshots</li>
  <li>Test2 &amp; Test3 still remain in memory while Test1 is correctly collected.</li>
  </ol>
  
  <p>Please see the following code for the viewmodel:</p>
  
  <pre><code>function ViewModel() {
      this.test1 = null;
      this.test2 = null;
      this.test3 = null;
  }
  ViewModel.prototype = {
      makeAll: function () {
          this.make1();
          this.make2();
          this.make3();
      },
      make1: function () {
          this.test1 = new Test1();
          this.test1.kill();
          delete this.test1;
      },
      make2: function () {
          this.test2 = new Test2();
          this.test2.kill();
          delete this.test2;
      },
      make3: function () {
          this.test3 = new Test3();
          this.test3.kill();
          delete this.test3;
      },
  };
  ko.applyBindings(new ViewModel());
  </code></pre>
  
  <p>And here are the three tests classes:</p>
  
  <pre><code>function Test1() {
      var one = this.one = ko.observable();
      var two = this.two = ko.observable();
      this.three = ko.computed(function () {
          return one() &amp;&amp; two();
      });
  }
  Test1.prototype = {
      kill: function () {
          this.three.dispose();
      }
  };
  
  function Test2() {
      this.one = ko.observable();
      this.two = ko.observable();
      this.three = ko.computed(function () {
          return this.one() &amp;&amp; this.two();
      }, this);
  }
  Test2.prototype = {
      kill: function () {
          this.three.dispose();
      }
  };
  
  function Test3() {
      var self = this;
      self.one = ko.observable();
      self.two = ko.observable();
      self.three = ko.computed(function () {
          return self.one() &amp;&amp; self.two();
      });
      self.kill = function () {
          self.three.dispose();
      };
  }
  </code></pre>
  
  <p>The difference being that Test1 'three' computed does not use this or self to reference the 'one' &amp; 'two' observable properties. Can someone explain what's happening here? I guess there's something in the way the closures contain the object reference but I don't understand why</p>
  
  <p>Hopefully I've not missed anything. Let me know if I have and many thanks for any responses.</p>