Javascript pseudo-classes, jQuery event handlers and 'this'

Question

I've got a big Javascript project that I'm trying to refactor into pseudo-classes:

jsFiddle: http://jsfiddle.net/waitinforatrain/7T42w/

var MyNameSpace = {}

MyNameSpace.MyClass = function() {
    this.doSomething = function () {
        return "hello";
    }

    this.doSomething2 = function() {
        var x = this.doSomething() + " world";
        alert(x);
    }

    this.doSomething2(); //Works fine

    $("#mydiv").click ( this.doSomething2 ); //Doesn't work
}

var class = new MyNameSpace.MyClass();

The reason the click event causes an error is that this refers to the #mydiv element.

How am I supposed to design the above so that I can access the element that was clicked but can also call doSomething()?

@Javier JavaScript does not have classes. So it's a pseudo class. — Raynos
– Raynos, Commented Apr 20, 2011 at 21:02
OO, classes and other things are design concepts, not language features — Javier
– Javier, Commented Apr 20, 2011 at 21:44
Sure they're language features, some languages support different types of inheritence etc. — bcoughlan
– bcoughlan, Commented Apr 20, 2011 at 21:53

Eli · Accepted Answer · 2011-04-20 20:37:00Z

6

You need to cache the context reference and wrap the call in a closure:

var MyNameSpace = {}

MyNameSpace.MyClass = function() {
    var context = this;

    context.doSomething = function () {
        return "hello";
    }

    context.doSomething2 = function() {
        var x = context.doSomething() + " world";
        alert(x);
    }

    // You can do this:
    context.doSomething2();

    // Or this:
    $("#mydiv").click(function(e) {
        context.doSomething2();
    });
}

answered Apr 20, 2011 at 20:37

Eli

17.8k4 gold badges40 silver badges49 bronze badges

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

2 Comments

bcoughlan Over a year ago

So obvious now :) Just for the record there's no need to wrap the call in a function, if you pass context.doSomething2 (without brackets) it does the same thing

Eli Over a year ago

I agree, but I like to keep my click event arguments separate from my instance method arguments.

Raynos · Accepted Answer · 2011-04-20 20:37:33Z

2

this.doSomething2 = $.proxy(function() {
    var x = this.doSomething() + " world";
    alert(x);
}, this);

$.proxy binds the this scope to the context variable inside said function.

answered Apr 20, 2011 at 20:37

Raynos

170k57 gold badges359 silver badges399 bronze badges

Comments

Wayne · Accepted Answer · 2011-04-20 20:35:48Z

0

Save a reference to this in the outer scope:

MyNameSpace.MyClass = function() {

    var that = this;

    this.doSomething = function () {
        return "hello";
    }

    this.doSomething2 = function() {
        var x = that.doSomething() + " world";
        alert(x);
    }

    this.doSomething2(); //Works fine

    $("#mydiv").click ( this.doSomething2 ); //Doesn't work
}

The function assigned to doSomething2 is said to "close over" the variables in its lexical scope and so has access to their values even once MyClass has returned. This allows us to access the doSomething method through the reference to the instance we assigned to that.

answered Apr 20, 2011 at 20:35

Wayne

60.5k15 gold badges135 silver badges129 bronze badges

2 Comments

Eli Over a year ago

Yeah, this would work. The only thing I would recommend is that since you are already caching the context, why not use it everywhere instead of one place. Just my 2 cents...

Raynos Over a year ago

@Eli personally I don't like using the cached context everywhere. I prefer to only use that where I can't use this. Better yet bind the method to this.

Collectives™ on Stack Overflow

Javascript pseudo-classes, jQuery event handlers and 'this'

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related