"this" keyword in event methods when using JavaScript prototype object

Question

I'm trying to access the member variables of a prototype class in JavaScript in an event handler -- something I'd typically use the "this" keyword for (or "that" [copy of this] in the case of event handlers). Needless to say, I'm running into some trouble.

Take, for example, this HTML snippet:

<a id="myLink" href="#">My Link</a>

And this JavaScript code:

function MyClass()
{
  this.field = "value"
  this.link = document.getElementById("myLink");
  this.link.onclick = this.EventMethod;
}

MyClass.prototype.NormalMethod = function()
{
  alert(this.field);
}

MyClass.prototype.EventMethod = function(e)
{
  alert(this.field);
}

Instantiating a MyClass object and calling NormalMethod works exactly like I expect it to (alert saying "value"), but clicking the link results in an undefined value because the "this" keyword now references the event target (the anchor () HTML element).

I'm new to the prototype JavaScript style, but in the past, with closures, I've simply made a copy of "this" in the constructor:

var that = this;

And then I could access members variables in event methods via the "that" object. That doesn't seem to work with prototype code. Is there another way to achieve this?

Thanks.

Are you referring to the Prototype library or rather straight JavaScript prototypical classes? — Crescent Fresh
– Crescent Fresh, Commented Sep 2, 2009 at 17:24
Responding three years late :) But for posterity: I was referring to straight JavaScript prototypical classes. — Michael
– Michael, Commented May 30, 2012 at 17:25
Possible duplicate of How to access the correct this / context inside a callback?? — Bergi
– Bergi, Commented Sep 9, 2014 at 20:43
@Bergi: For the record, I asked this question in 2009. The question you linked was asked in 2013. — Michael
– Michael, Commented Sep 10, 2014 at 12:40
@Michael: Yeah, but that doesn't matter. Dupes are closed by quality of answers, not by date; the one I linked is the canonical question on loosing this. I wasn't sure whether it's an "exact" duplicate, that's why I haven't just closed it but only commented. The link is definitely helpful to everyone who visits this question. — Bergi
– Bergi, Commented Sep 10, 2014 at 12:57

ijw · Accepted Answer · 2009-09-02 17:20:12Z

13

You need:

this.link.onclick = this.EventMethod.bind(this);

...'bind' is part of Prototype, and returns a function which calls your method with 'this' set correctly.

answered Sep 2, 2009 at 17:20

ijw

4,5464 gold badges27 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Karl Over a year ago

How does onclick get access to the event interface?

apsillers Over a year ago

@Karl By "access to the event interface" do you mean "receive the event object as an argument"? The bind method returns a function (with a fixed this), so onclick = this.EventMethod is basically the same as onclick = this.EventMethod.bind(this). In both cases, you store a function in the onclick property; they're identical in terms of how their arguments are handled. If your question is more generally about how arguments are passed to listener functions, that's quite a different question than what's being asked here, and you should ask a new question.

Crescent Fresh · Accepted Answer · 2009-12-01 17:54:35Z

9

Your "that=this" closure idiom is still applicable:

function MyClass()
{
    ...

    var that = this;
    this.link.onclick = function() {
        return that.EventMethod.apply(that, arguments);

        // that.EventMethod() works too here, however
        // the above ensures that the function closure
        // operates exactly as EventMethod itself does.

    };
}

edited Dec 1, 2009 at 17:54

answered Sep 2, 2009 at 17:18

Crescent Fresh

117k27 gold badges157 silver badges140 bronze badges

Comments

alex.zherdev · Accepted Answer · 2009-09-02 17:19:55Z

5

You should try

this.link.onclick = this.EventMethod.bind(this);

answered Sep 2, 2009 at 17:19

alex.zherdev

24.2k8 gold badges65 silver badges56 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:25:37Z

0

As stated above, using bind which is a part of the Prototype library is a clean way to solve this problem. This question is a duplicate of another SO question which is answered here with implementation of the bind method without including the whole prototype library :

https://stackoverflow.com/a/2025839/1180286

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Oct 25, 2013 at 13:33

st0ne

1261 silver badge12 bronze badges

1 Comment

Anthony Rutledge Over a year ago

That question uses JQuery. I'd much rather see a pure JavaScript question / answer be the standard.

Collectives™ on Stack Overflow

"this" keyword in event methods when using JavaScript prototype object

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related