title: javascript: extensive use of 'this' in reusable d3js charts
body: <p>In the source code for a reusable d3 library (code found here: <a href="https://github.com/bugzu/reD3/blob/master/src/area.js" rel="nofollow">https://github.com/bugzu/reD3/blob/master/src/area.js</a> ) nearly every line contains a reference to <code>this</code>.  Website homepage: <a href="http://bugzu.github.io/reD3/#/" rel="nofollow">http://bugzu.github.io/reD3/#/</a></p>
  
  <p>Example: </p>
  
  <pre><code>(function(global) {
  
      global.reD3 = global.reD3 || {};
  
      function Area(element, options) {
          this.element = element;
          this.options = options;
          this.init();
      }
  
      Area.prototype = {
  
          init: function() {
              var options = this.options,
              width = options.width || 960,
              height = options.height || 500,
              oMargin = options.margin;
  
              var margin = {
                  top: 20,
                  right: 30,
                  bottom: 30,
                  left: 40
              },
  
              margin = reD3.util.mixin(margin, oMargin);
  
              width = this.width = width - margin.left - margin.right;
              height = this.height = height - margin.top - margin.bottom;
              var xValue = this.xValue = options.xValue || 'date';
              var yValue = this.yValue = options.yValue || 'value';
  </code></pre>
  
  <p>What is the purpose of this being used so frequently?  What are the advantages/disadv of a technique like this for reusable (chart) components? </p>