title: Difference between this and var in a function
body: <p>I have a javascript class that I'm creating. This class has private and public functions/properties. My understanding of private and public was that <code>this</code> was public  and <code>var</code> was private to that function and its members. However, within the local function <code>buildFramework()</code>, when I call the <code>var settings.currentView</code> I get the error:</p>
  
  <blockquote>
    <p><code>settings.currentView</code> is not defined</p>
  </blockquote>
  
  <p>My question is, what is the difference between <code>this</code> and <code>var</code> in the scope of a function and its members as well as the global scope?</p>
  
  <pre><code>namespace('example');
  example.InstagramViewer = function (options) {
      // this works when called within buildFramework()
      this.settings = $.extend({
          currentView: 'grid'
      }, options);
  
      // this doesn't work when called within buildFramework()
      var settings = $.extend({
          currentView: 'grid'
      }, options);
  
      var viewer;
  
      this.init = function () {
          buildFramework();
      };
  
      var buildFramework = function() {
          viewer = $(viewerWrapper).append('&lt;div id="instagramViewer" class="' + settings.currentView + '"&gt;&lt;/div&gt;'); // this doesn't work
          viewer = $(viewerWrapper).append('&lt;div id="instagramViewer" class="' + this.settings.currentView + '"&gt;&lt;/div&gt;'); // this does work
      };
  }
  </code></pre>
  
  <p>and called like so...</p>
  
  <pre><code>$(function () {
      var viewer = new connectionsAcademy.publicWebsite.web.js.teenWebsite.InstagramViewer();
      viewer.init();
  });
  </code></pre>