這個變量在傳入回調函數時未定義

Question

我想通過以下this和mozilla website上的一個採用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

正如其他人所說的那樣，我會刪除「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; 

Answer 2

改爲將refreshCycle作爲setTimeout的參數。使用this總是很危險，因爲它會根據上下文改變意義。

Answer 3

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 4

的範圍「這個」內的回調函數是有可能的「新Highcharts.Chart」，而不是「lineBasedChart」功能。它不知道mRefreshCycle是什麼，因爲它不存在於新創建的對象的範圍內。你可能只能刪除'this'並利用閉包機制。

此外，傳遞給「new Highcharts.Chart（）」的「選項」未定義。

從我的手機發送此內容。我爲缺乏降價道歉。當我有機會時，我會更新答案的格式。