Javascript: Object has no method when using prototypes

Question

Why do I have to call new Chart() to fire a method from the same class(per say)? Is this the correct way to do this? Thanks.

 function Chart(location, startDateString, endDateString) { 
 this.location = location;
 this.startDateString = startDateString;
 this.endDateString = endDateString;
}
Chart.prototype.fnDrawStaticChart = function(chartUrl, chartData) {
 $.get(chartUrl, function() { 
 $('#'+chartData.wrapSpecId).attr('src', chartUrl); 
 }); 
}
Chart.prototype.fnDraw = function(fnStaticChartJSON, fnStaticChartImage) { 
 $.getJSON(fnStaticChartJSON, function(data) { 
 if (data.chartData.length > 0) { 
 $('#chartDiv').append($('#template').jqote(data, '@')); 
 $.each(data.chartData, function(index, chartData) { 
 var pkgLineId = chartData.wrapSpec2.pkgLineId.pkgLineId; 
 var wrapSpecId = chartData.wrapSpecId;
 var startDate = data.startDate;
 var endDate = data.endDate;
 var chartUrl = fnStaticChartImage({
 pkg_line_id: pkgLineId, 
 wrap_spec_id: wrapSpecId, 
 start_date: startDate, 
 end_date: endDate
 });
 this.fnDrawStaticChart(chartUrl, chartData); //can't do this. 
 new Chart().fnDrawStaticChart(chartUrl, chartData); CAN do this.
 }); 
 }); 
}

Answer 1

It's a simple scoping issue. this points to the function you passed to $.each. You have to store the old this reference in another variable:

Chart.prototype.fnDraw = function(fnStaticChartJSON, fnStaticChartImage) { 
 var self = this;
 $.getJSON(fnStaticChartJSON, function(data) { 
 if (data.chartData.length > 0) { 
 $('#chartDiv').append($('#template').jqote(data, '@')); 
 $.each(data.chartData, function(index, chartData) { 
 var pkgLineId = chartData.wrapSpec2.pkgLineId.pkgLineId; 
 var wrapSpecId = chartData.wrapSpecId;
 var startDate = data.startDate;
 var endDate = data.endDate;
 var chartUrl = fnStaticChartImage({
 pkg_line_id: pkgLineId, 
 wrap_spec_id: wrapSpecId, 
 start_date: startDate, 
 end_date: endDate
 });
 self.fnDrawStaticChart(chartUrl, chartData);
 new Chart().fnDrawStaticChart(chartUrl, chartData);
 }); 
 }); 
}

• Drew H: Ok cool. So why can't I just call it like this.fnDrawStaticChart() ? Does "this" refer to something in $.getJSON?
• Daff: No, this always refers to the current scope of the function you are in, in your case the function(index, chartData) you passed to $.each().