Calling class functions from class functions in Javascript

Question

I hate that I'm doing this but I've just started working with Javascript classes and I can't figure out how to call member functions from member functions. Below is the class I have and when I run this I get the following error in Firefox:

this.addCol is not a function

I've also tried calling the function like this:

Table.prototype.addCol(this,key,value);

but that also didn't work. :-)

Table.prototype.addCol = function(key, values){
    this.jquery.children('.columns').append('<li>' + key + '</li>');
}

Table.prototype.setData = function(data){
    // store the data for this table
    this.data = data;

    $.each(data.columns, function(key, value){
        this.addCol(key, value);
    });
}

function Table (name){
    this.name = name;

    this.jquery = $('<div class="dbtable"><h3>' + this.name + '</h3></div>');
}

Your problem is that this doesn't refer to your Table object inside of that anonymous function. Use a normal for-loop and it will work. — Bergi
– Bergi, Commented Jan 26, 2012 at 1:36

SeanCannon · Accepted Answer · 2012-01-26 01:58:21Z

5

JavaScript has prototypal inheritance, not classical inheritance. There are no "classes" in JS. Using the "new Foo()" syntax in JS just sucks. It wasn't built to support that style of coding well.

That being said, there is a major design flaw in which a nested function inside an object will rebind this to the global object. In this case, this gets re-bound to the item in the $.each iteration.

There is a common workaround:

Table.prototype.setData = function(data){
    var that = this;
    // store the data for this table
    this.data = data;

    $.each(data.columns, function(key, value){
        that.addCol(key, value);
    });
}

edited Jan 26, 2012 at 1:58

answered Jan 26, 2012 at 1:31

SeanCannon

78.1k17 gold badges126 silver badges145 bronze badges

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

7 Comments

Adam Mihalcin Over a year ago

Modifications to addCol? This change wouldn't fix the error message this.addCol is not a function

outis Over a year ago

It's not a design flaw, that's how free functions work. In this case, it's also not JS that's setting the binding, it's $.each, which binds this to the elements of the collection being traversed (after wrapping primitive types in Objects). In any case, this solution is the simplest.

uadnal Over a year ago

This is more of a problem of functional scope. :P

SeanCannon Over a year ago

Douglas Crockford would disagree with you about the design flaw part, though he is a pretty harsh critic ;)

Scott Keck-Warren Over a year ago

@AlienWebguy This works but I don't understand why (and I hate saying that). Can you point my in the direction of something that would explain this (I would even be willing to pay for a physical book :-)).

|

Adam Mihalcin · Accepted Answer · 2012-01-26 01:27:28Z

0

Why not define the class as

function Table (name){
    this.name = name;

    this.jquery = $('<div class="dbtable"><h3>' + this.name + '</h3></div>');

    this.addCol = function(key, values){
        this.jquery.children('.columns').append('<li>' + key + '</li>');
    }

    this.setData = function(data){
        // store the data for this table
        this.data = data;

        $.each(data.columns, function(key, value){
            this.addCol(key, value);
        });
    }
}

in the first place?

answered Jan 26, 2012 at 1:27

Adam Mihalcin

14.5k4 gold badges39 silver badges53 bronze badges

3 Comments

alex Over a year ago

For one reason, it's more memory intensive to instantiate new objects from this constructor.

Adam Mihalcin Over a year ago

I would argue that getting the application to work should be priority #1, and then optimization can come second.

alex Over a year ago

@AdamMihalcin True, but he has already written it that way, plus the problem is this pointing to the global object, not what you have described.

Collectives™ on Stack Overflow

Calling class functions from class functions in Javascript

2 Answers 2

7 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related