instanceof check for jQuery plugin instances attached to data attribute

Question

I have created a jQuery plugin, that internally uses class instantiation, something along these lines:

;(function ($, window, document, undefined) {
  'use strict';

  function MyPlugin(element, options) {
    this.settings = $.extend({}, options);
    this.$el = $(element);
    this.init();
    return this;
  }

  MyPlugin.prototype = {
    init: function(){},
    method1: function(){},
    method2: function(){}
  }

  $.fn.myplugin = function (options, val) {
        return this.each(function () {
            if(typeof options === 'object'){
                if (undefined == $(this).data('myplugin')) {
                    var plugin = new MyPlugin(this, options);
                    $(this).data('myplugin', plugin);
                }
            }
        });
    }
})(jQuery, window, document);

Now, from external JavaScript code I want to determine if an object available at .data('myplugin') is instance of MyPlugin. Even though console logs out clearly 'MyPlugin' in front of expansion triangle, the following code:

$(el).data('myplugin') instanceof MyPlugin

breaks with error, claiming that MyPlugin is not defined. (most probably due to that the prototype has been defined within encapsulation)

So what would be the right way to check for instanceof?

Answer 1

Comment as answer: You MyPlugin function is hidden by the surrounding anonymous function. Give that a name and treat it like a namespace. I don't claim to be an expert on raw Javascript objects (as I use TypeScript to simplify all that mess):

JSFiddle: http://jsfiddle.net/TrueBlueAussie/o6s4yep4/3/

;var mynamespace = function ($, window, document, undefined) {
    'use strict';

    mynamespace.MyPlugin = function(element, options) {
        this.settings = $.extend({}, options);
        this.$el = $(element);
        this.init();
        return this;
    }

    mynamespace.MyPlugin.prototype = {
        init: function () {},
        method1: function () {},
        method2: function () {}
    }

    $.fn.myplugin = function (options, val) {
        return this.each(function () {
            if (typeof options === 'object') {
                if (undefined == $(this).data('myplugin')) {
                    var plugin = newmynamespace.MyPlugin(this, options);
                    $(this).data('myplugin', plugin);
                }
            }
        });
    }
};

mynamespace(jQuery, window, document);

var $el = $('#el');
$el.click(function () {
    $(el).myplugin();
    debugger;
    alert($(el).data('myplugin') instanceof mynamespace.MyPlugin);
});

note: I am not sure why this results in false when you click the element, but this is at least a good starting point for you.

Answer 2

if i get it right:

var MyPlugin;

;(function ($, window, document, undefined) {
  'use strict';

  MyPlugin = function(element, options) {
    this.settings = $.extend({}, options);
    this.$el = $(element);
    this.init();
    return this;
  }

 // rest of code goes here