传入回调函数时此变量未定义

Question

我正在尝试通过遵循 this and the one on the mozilla website 在 javascript 中采用 OOP 方法。当我用 new 关键字实例化我的 function/class 时，图形正确呈现，但是当 this 变量传递到回调函数时它变成 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在回调函数中使用时好像变成了undefined

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()" 的 "options" 未定义。

从我的 phone 发送这个。我为缺乏降价而道歉。有机会我会更新答案的格式。

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;

传入回调函数时此变量未定义

this variable undefined when passed into callback function

javascript

oop

this