How does jQuery work : I get "Cannot set property xxx of undefined" when trying a similar prototype thing?

Question

How does JQuery handle the "Cannot set property xxx of undefined" issue?" If I have:

function Foo() {
   Foo.fn = Foo.prototype;
}

Then I have an extension JavaScript file with this code:

(function(foo) {
   foo.fn.myPlugin = function() {
       //return something here
   };
})(Foo);

I get an error that says "Cannot set property myPlugin of undefined." Funny enough if I just copy the plugin code into FireBug or Chrome and execute it in the console, it works fine and attaches and works as expected like:

foo.myPlugin();

I'm guessing my problem either comes from the timing of the browser loading the document, or the fact that my existing object isn't inside of it's own namespace. I'm wondering if this only works when you define a class using the var syntax??

I don't know...from what I understand...either should work.

Answer 1

function Baz() {
   return this;
}
Baz.prototype.fn = Baz.prototype;
var Foo = new Baz();
Baz = null;
(function(Bar) {
   Bar.fn.myPlugin = function() {
       return "test";
   };
})(Foo);
Foo.myPlugin(); //returns test

This works, and leaves Baz assignable. Not sure if that is how jQuery does it or not.