jQuery插件结构：在插件定义内部访问JavaScript类？

Question

I have a question regarding the structure of a jQuery plugin that I found.

For better understanding, here is a simplified example of the plugins structure:

// Regular constructor function
function MyPlugin() {
    this.myValue = "My Value";
}

// Methods on the prototype
MyPlugin.prototype.showValue = function() {
    alert($.myplug.getValue());
}

MyPlugin.prototype.getValue = function() {
    return this.myValue;
}

// jQuery plugin
$.fn.myplug = function() {
    // Why is is possible to access $.myplug here although it's not created yet?    
    return this.each(function() {
        $(this).html($.myplug.getValue());  
    });
};

// Create new MyPlug instance
$.myplug = new MyPlugin();

// Calling the jQuery plugin on a DOM element
$('div').myplug();

For the most part, I get what is happening. The actual plugin logic seems to be written as a normal JavaScript "class".
This is followed by a jQuery plugin definition – I think, actually, some new method is added to jQuery's prototype. This is where things get tricky to me:

How is is possible to access the class instance inside the plugin, although the class is instantiated after the plugin definition? Is there a mechanism at work similar to variable hoisting?

In case you want to try something, here is a Fiddle of the example: http://jsfiddle.net/kq8ykkga/

Answer 1

$(this).html($.myplug.getValue()); isn't evaluated until you call $('selector').myplug() , executing the function body.