Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to call a member function from another member function in Javascript

Tags:

javascript

Say I have some code like this

function Chart(start, end, controller, method, chart)
{
    console.log('Chart constructor called');
    this.start = start;
    this.end = end;
    this.controller = controller;
    this.method = method;
    this.chart = chart;
    this.options = {};
}

Chart.prototype.update = function()
{
    console.log('update ' + new Date().getTime());
    $.getJSON('index.php', {
        controller: this.controller,
        method: this.method,
        START: this.start,
        END: this.end },
        function(json) { this.draw(json); }); //<-- Problem right here!
}              

Chart.prototype.draw = function(json)
{
    //lots of code here
}

I'm getting the error Uncaught TypeError: Object #<an Object> has no method 'draw'. Now, I'm the first to admit that I'm pretty new to Javascript. Am I supposed to call member functions in another way? Or am I supposed to do something different altogether?

edit: Here is how I'm creating my object:

chartObj = new Chart(start, end, 'OBF.RootCauses', 'ajaxRootCauses', chart);

like image 333
2-bits Avatar asked Feb 15 '11 14:02

2-bits


People also ask

What is Call () in JavaScript?

The call() method is a predefined JavaScript method. It can be used to invoke (call) a method with an owner object as an argument (parameter). With call() , an object can use a method belonging to another object.

How do you call a member function from another member function in C++?

just make simple call like below................ class abc{ member_func1(); member_func2(); }; abc::member_func1(){ //..........................

How do you call a function stored in a variable in JavaScript?

There are two methods to call a function from string stored in a variable. The first one is by using the window object method and the second one is by using eval() method.


2 Answers

The problem here is that this is changed because you are defining a new function - so this refers to the function you are in.

There are other ways how to get around this, but the simplest way would be to save this to a variable and call the function on that variable, something like this:

Chart.prototype.update = function()
{
    console.log('update ' + new Date().getTime());
    var self = this;
    $.getJSON('index.php', {
        controller: this.controller,
        method: this.method,
        START: this.start,
        END: this.end },
        function(json) { self.draw(json); });
} 

See Chris's answer for a different approach for solving the same problem.

like image 124
Jakub Hampl Avatar answered Oct 12 '22 12:10

Jakub Hampl


Since you're already using jQuery, you can change this line

function( json ) { this.draw( json ); });

to this:

$.proxy( this.draw, this ) );

That will preserve the context where the function was called (i.e., the this variable).

like image 25
Chris Hogan Avatar answered Oct 12 '22 10:10

Chris Hogan