0

I'm trying to create a custom module. I'm using prototype to add additional methods. The module will have an event, in which I will have to access a method from the module with this. The problem is, when I use this from the events function, this is something else. It isn't the module.

How can I access the modules methods in the events function? (Or if there's a better way to do what I'm trying to do, then please let me know.)

JSFiddle

function MyPlugin() {
  this.hello = 'hello'
  document.addEventListener('click', this.clicked);
}

MyPlugin.prototype.clicked = function(e) {
  console.log(this.hello);
}

MyPlugin.prototype.someMethod = function() {
  console.log(this.hello + ' someMethod');
};

var plugin1 = new MyPlugin();
Jessica
  • 9,379
  • 14
  • 65
  • 136
  • this in each of those is the function. What are you expecting this to represent? – Liam Jul 14 '16 at 15:13
  • 1
    `.addEventListener(.., this.clicked.bind(this))` – deceze Jul 14 '16 at 15:14
  • Closing this as a duplicate of that question seems a bit glib?! – Liam Jul 14 '16 at 15:14
  • 1
    @Liam It's a simple matter of understanding how `this` works. This has been explained over and over. For a specific fix for this particular situation, see my above comment. – deceze Jul 14 '16 at 15:15
  • 1
    @Liam What do u mean, "seems a bit glib"? – Jessica Jul 14 '16 at 15:16
  • 1
    "a bit glib" synonyms "showing little thought". Basically I don't think this is that bad a question and I think that marking it as a duplicate using a gold is a bit fast. Ultimately that question probably answers your issue if you can decifer it but I don't see any harm in an explanation that addresses your immdiate issue – Liam Jul 14 '16 at 15:39
  • 2
    @Liam The duplicate has many answers, short and long, explaining the topic from every possible angle. There's something for everybody at any skill level. I'd rather show a woman how to fish than to quick fix her problem. Learning how `this` works is essential if you're writing Javascript, might as well point her to most complete resource we have here on the topic. – deceze Jul 14 '16 at 15:54
  • I'm not getting on my high horse about it. If you feel it's still a dupe, that's fine by me :) – Liam Jul 14 '16 at 16:10
  • @deceze Thanks for the code above! I never completely understood why one would need to use `bind` (and the likes). I knew the basic functionality, i.e. it binds `this` to the called function. I never knew why anyone would actually need it. Thanks! – Jessica Jul 14 '16 at 16:17
  • @deceze Just one question. When I remove an event (which the function was added using `bind`), do I have to call `bind` on the event I'm removing? Like this: `document.removeEventListener('click', this.clicked.bind(this)` – Jessica Jul 14 '16 at 19:09
  • 1
    You'll have to assign the *bound* version of the function to a variable and remove that. Binding it again creates a different function and won't remove the previous one. – deceze Jul 14 '16 at 19:27

0 Answers0