title: JS: Mix-ins in JavaScript with Caching ? How does this work?
body: <p>So,</p>
  
  <p>I am newbie JS Developer.</p>
  
  <p>Mix-ins:</p>
  
  <p>When i was going through </p>
  
  <p><a href="https://javascriptweblog.wordpress.com/2011/05/31/a-fresh-look-at-javascript-mixins/" rel="nofollow">https://javascriptweblog.wordpress.com/2011/05/31/a-fresh-look-at-javascript-mixins/</a></p>
  
  <p>I could't understand difference between Topic 3 (With Options) and Topic 4 (Add Caching)</p>
  
  <p>Quoting the <strong><em>"So maybe you’re concerned that this approach creates additional performance overhead because we’re redefining the same functions on every call."</em></strong> (first para under Adding Caching)</p>
  
  <pre><code>var asRectangle = (function () {
  
      console.log(this) // global this 
  
      function area() {
          console.log(this); // {length : 1, width: 2}
          return this.length * this.width
      }
  
      function grow() {
          this.length++;
          this.width++;
      }
  
      function shrink() {
          this.length--;
          this.width--;
      }
  
      return function () {
          this.area = area;
          this.grow = grow;
          this.shrink = shrink;
          return this;
      };
  
  })();
  
  
  var React = function (len, wid) {
      this.length = len;
      this.width = wid;
  }
  
  asRectangle.call(React.prototype); // What is the use of this?
  
  var react = new React(1, 2);
  
  react.area();
  </code></pre>
  
  <p>Questions:</p>
  
  <ol>
  <li>As the above quote states, why function gets redefined every time?</li>
  <li>How is caching implemented?</li>
  <li>What asReactangle.Call() doing here?</li>
  <li>How does this improves performance as the blog states?</li>
  </ol>
  
  <p>P.S : I ran the code using Node.js -- So the global (this) printed the Node's global this.</p>