传递给回调函数时，此变量未定义

Question

我想通过遵循此方法和mozilla网站上的方法，尝试使用javascript中的OOP方法。 当我使用new关键字实例化函数/类时，图形将正确呈现，但是当将此变量传递给回调函数时，它变为undefined ，我想知道是否有解决方法？

这是我的代码：

function lineBasedCharts (renderTo, chartType, deviceID, metricType, refreshCycle, title, subtitle, yAxis, tooltip) {
    this.mRenderTo = renderTo
    this.mRefreshCycle = refreshCycle
    this.mChartType = chartType
    this.mTitle = title
    this.mSubtitle = subtitle
    this.mYAxis = yAxis
    this.mTooltip = tooltip

    ...

    this.chart = new Highcharts.Chart(options, function (ch) {
        //use a callback function off the end of highcharts, for when the chart has fully loaded.
        AddSeries(ch, deviceID, metricType);

        if (ch.series[0].data.length > 0) {
            setTimeout(requestData, this.mRefreshCycle, ch, ch.series[0].data[ch.series[0].data.length - 1].x, deviceID, metricType, this.mRefreshCycle);
        }
    });
}

这就是我实例化对象的方式

var chart = []
chart.push(new lineBasedCharts('lineChart', 'spline', 49, 'TEMP', 30000, 'temp', 'Temp in degrees', 'Temperature (°C)', '°C'))

在回调函数中使用this.mRefreshCycle似乎变得不确定。

Answer 1

refreshCycle作为参数传递给setTimeout 。 它始终是危险的，使用this ，因为它而改变含义取决于上下文。

Answer 2

this很可能是指您创建的Highcharts.chart对象。 创建一个别名this (_this = this)然后尝试使用_this.mRefreshCycle

function lineBasedCharts (renderTo, chartType, deviceID, metricType, refreshCycle, title, subtitle, yAxis, tooltip) {
    //Add alias for this
    _this = this;
    this.mRenderTo = renderTo
    this.mRefreshCycle = refreshCycle
    this.mChartType = chartType
    this.mTitle = title
    this.mSubtitle = subtitle
    this.mYAxis = yAxis
    this.mTooltip = tooltip

    ...

    this.chart = new Highcharts.Chart(options, function (ch) {
        //use a callback function off the end of highcharts, for when the chart has fully loaded.
        AddSeries(ch, deviceID, metricType);

        if (ch.series[0].data.length > 0) {
            //change how you refer to mRefreshCycle
            setTimeout(requestData, _this.mRefreshCycle, ch, ch.series[0].data[ch.series[0].data.length - 1].x, deviceID, metricType, this.mRefreshCycle);
        }
    });
}

Answer 3

回调函数中'this'的范围可能是“ new Highcharts.Chart”，而不是“ lineBasedChart”函数。 它不知道什么是mRefreshCycle，因为它不存在于新创建对象的范围内。 您也许可以删除“ this”并利用关闭机制。

另外，传递给“新Highcharts.Chart（）”的“选项”是未定义的。

从我的手机发送。 对于缺少减价，我深表歉意。 如果有机会，我将更新答案的格式。

Answer 4

正如其他人所建议的那样，我将删除“ this”标识符并使​​用传递的参数。无论如何，这时它们都是相同的值，只要您以后没有更改mRefreshCycle的值即可。 。 如果您有执行此操作的增变器，则需要对此进行一些微调。

如何使lineBasedChart成为实际对象？

var LineBasedChart = function (renderTo, chartType, deviceID, metricType, refreshCycle, title, subtitle, yAxis, tooltip) {
    var self = this;
    this.mRenderTo = renderTo
    this.mRefreshCycle = refreshCycle
    this.mChartType = chartType
    this.mTitle = title
    this.mSubtitle = subtitle
    this.mYAxis = yAxis
    this.mTooltip = tooltip

    ...

    this.chart = new Highcharts.Chart(options, function (ch) {
        //use a callback function off the end of highcharts, for when the chart has fully loaded.
        AddSeries(ch, deviceID, metricType);

        if (ch.series[0].data.length > 0) {
            setTimeout(requestData, self.mRefreshCycle, ch, ch.series[0].data[ch.series[0].data.length - 1].x, deviceID, metricType, self.mRefreshCycle);
        }
    });

    /*Mutator to update refresh cycle value*/
    this.setRefreshCycle = function(refreshCycle) {
        this.mRefreshCycle = refreshCycle;
    }
}

如果要创建多个对象，这将很有用，例如

var lineBasedChart1 = new LineBasedChart(...)
var lineBasedChart2 = new LineBasedChart(...)

您不一定需要使用增变子，您可以直接调用该属性。

lineBasedChart1.mRefreshCycle = 500;