title: jQuery structure and understanding this
body: <p>I'm going through some pseudo-jquery code—and though I understand <code>this</code> for the most part, some of the implementations are confusing. I ran into this pseudocode, which is meant to explain how jQuery  works: </p>
  
  <pre><code>(function() {
    var foo = function(arg) { // core constructor
      // ensure to use the `new` operator
      if (!(this instanceof foo))
        return new foo(arg);
      // store an argument for this example
      this.myArg = arg;
      //..
    };
  
    // create `fn` alias to `prototype` property
    foo.fn = foo.prototype = {
      init: function () {/*...*/}
      //...
    };
  
    // expose the library
    window.foo = foo;
  })();
  
  // Extension:
  
  foo.fn.myPlugin = function () {
    alert(this.myArg);
    return this; // return `this` for chainability
  };
  
  foo("bar").myPlugin(); // alerts "bar"
  </code></pre>
  
  <p>It isn't instantly obvious to me what <code>this</code> in <code>(!(this instance of foo))</code> or <code>this.myArg = arg;</code> is. </p>
  
  <p>My initial impression is that this code is referenced every time an instance of <code>foo</code> is ran, i.e. <code>foo("bar").myPlugin();</code>. </p>
  
  <p>Going off that assumption, <code>this</code> commonly refers to the object that owns the method, but in this case, if <code>foo</code> owns <code>this</code> (understanding that <code>foo</code> is pseudo for <code>jQuery</code>), <code>jQuery.myArg = arg</code> doesn't really make much sense. That would mean every time you invoke <code>foo</code> i.e. <code>foo("bar").myPlugin();</code> it instantiates <code>foo.bar</code> and to further the example at the bottom, <code>foo.bar.myPlugin</code> is an actual property instantiated from <code>foo</code>?</p>
  
  <p>Simultaneously, <code>this instanceof foo</code>, ie. <code>jQuery instanceof jQuery</code> seems redundant. </p>
  
  <p>What am I missing here? Appreciate any help/direction. </p>