Question

我正在尝试按照this和mozilla website上的那个方法在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'并利用闭包机制。

此外，传递给“new Highcharts.Chart（）”的“选项”未定义。

从手机发送此信息。我为没有降价而道歉。我有机会时会更新答案的格式。

Answer 4

正如其他人所建议的那样，我会删除“this”标识符并使用传入的参数。无论如何，只要你没有改变mRefreshCycle的值，它们在这一点上都是相同的值。以后的时间。如果你有一个执行此操作的mutator，那么你需要稍微调整一下。

如何将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(...)

您不一定需要使用可以直接调用该属性的mutator。

lineBasedChart1.mRefreshCycle = 500;

传递给回调函数

4 个答案: