title: Choosing an OOP pattern in javascript
body: <p>I've put these together with the help of others and several resources. I've made a <a href="http://jsfiddle.net/radu/AUmFB/">fiddle of everything</a>, and the stripped down code is posted below.</p>
  
  <p>Basically I've learned how to use each of these patterns but I'm curious about the more fundamental differences between these approaches. Downstream code is practically identical with any of these patterns, but is there a reason why one should use one over another, beyond personal preference? Also though I've tried to gather up the most common patterns, please suggest your own if it's better.</p>
  
  <p>Pattern 1 (Object Based):</p>
  
  <pre><code>var mouseDiff = {
      "startPoint" : {"x" :0, "y" : 0},
      "hypotenuse" : function(a,b) {
          // do something
      },
      "init"       : function(){
          // do something
      }
  }
  
  mouseDiff.init();
  </code></pre>
  
  <p>Pattern 2 (Most traditional as far as I know):</p>
  
  <pre><code>function MouseDiff() {
      this.startPoint = {"x" :0, "y" : 0};
  }
  
  MouseDiff.prototype.hypotenuse = function(a,b) {
      // do something
  }
  
  MouseDiff.prototype.init = function() {
      // do something
  }
  
  var myMouse = new MouseDiff;
  myMouse.init();
  </code></pre>
  
  <p>Pattern 3 (Making use of closure):</p>
  
  <pre><code>var MouseDiff2 = (function() {
      var startPoint = {"x" :0, "y" : 0};
      var hypotenuse = function(a,b) {
          // do something
      };
      return {
          hypotenuse: hypotenuse,
          init : function(){
              // do something
          }
      };
  
  }());
  MouseDiff2.init();
  </code></pre>