是不是类

Question

我上小班的工作来处理谷歌图中的功能和一些奇怪的原因，我不断收到

googleChart.js:86 Uncaught TypeError: this.swapChart is not a function 

在网页上我有ID为“btnSwitch”的按钮，点击其上触发图表从图表视图切换到表格视图，反之亦然。这是内this.addChartSwitchListener定义（），并称为内this.init_chart（）

我init（）方法中调用this.swapChart（），所以我必须承担这个问题是：

_button.addEventListener('click', this.switchChart, false); 

这里下面是我的代码：

google.load('visualization', '1.0', {'packages': ['charteditor', 'controls']}); 
//google.setOnLoadCallback(drawDashboard); 
var GChart = GChart || (function() { 
    var _graphType; 
    var _minTime; 
    var _maxTime; 
    var _hAxisTitle; 
    var _vAxisTitle; 
    var _tableData; 
    var _data; 
    var _dashboard; 
    var _lineChart; 
    var _button; 
    var _showChart; 

    return { 
     init: function (tableData, graphType, minTime, maxTime, hAxisTitle, vAxisTitle) { 
      // google charts 
      //_google = google; 
      _tableData = tableData; 

      // load chart params 
      _graphType = graphType; 
      _minTime = minTime; 
      _maxTime = maxTime; 
      _hAxisTitle = hAxisTitle; 
      _vAxisTitle = vAxisTitle; 

      // some other initialising 
      this.build_googlechart(); 
     }, 
     build_googlechart: function() 
     { 
      this.init_chart(); 

      // also tried this - with the same result. 
      // google.load('visualization', '1.0', {'packages':['corechart'], 'callback': this.drawChart}); 
     }, 
     init_chart: function() 
     { 
      // var data = new google.visualization.DataTable(); 
      _data = new google.visualization.DataTable(_tableData); 

      // Create a dashboard. 
      _dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')); 

      if (_graphType === 'LineChart') { 
       this.lineChart(); 
      } else { 
       this.columnChart(); 
      } 

      this.addChartSwitchListener(); 
     }, 
     addChartSwitchListener: function() 
     { 
      _button = document.getElementById('btnSwitch'); 
      _button.addEventListener('click', this.switchChart, false); 
      _showChart = "Chart"; 
// Wait for the chart to finish drawing before calling the getImageURI() method. 
      google.visualization.events.addListener(_lineChart, 'ready', function() { 
       if (_showChart !== 'Table') { 
        $('.save_chart').show(); 
        $('.save_chart').removeClass('disabled'); 
        $('.save_chart').attr('href', _lineChart.getChart().getImageURI()); 
        $('#filter_div').show(); 
       } else { 
        $('.save_chart').hide(); 
        $('#filter_div').hide(); 
       } 
      }); 
     }, 
     swapChart: function() 
     { 
      var chart = "Table"; 
      if (_showChart === "Chart") { 
       chart = _graphType; 
      } 

      _lineChart.setChartType(chart); 
      _lineChart.setOptions(this.getOptions(_showChart)); 
      _lineChart.draw(); 
     }, 
     switchChart: function() 
     { 
      _showChart = _button.value; 
      this.swapChart(); 

      _showChart = (_showChart === 'Table') ? 'Chart' : 'Table'; 
      _button.value = _showChart; 
     }, 
     getOptions: function (chartType) 
     { 
      var options; 
      switch (chartType) { 
       case 'Chart': 
        options = { 
         backgroundColor: { 
          fill: 'transparent' 
         }, 
         legend: 'right', 
         pointSize: 5, 
         crosshair: { 
          trigger: 'both' 
         }, 
         hAxis: { 
         }, 
         vAxis: { 
         } 
        }; 
        break; 
       case 'Table': 
        options = { 
         showRowNumber: true, 
         width: '100%', 
         height: '100%' 
        }; 
        break; 
       default: 
        options = {}; 
      } 

      return options; 
     }, 
     lineChart: function() 
     { 
      var lineChartRangeFilter = new google.visualization.ControlWrapper({ 
       'controlType': 'ChartRangeFilter', 
       'containerId': 'filter_div', 
       'options': { 
        filterColumnIndex: 0, 
        ui: { 
         chartType: 'LineChart', 
         chartOptions: { 
          backgroundColor: {fill: 'transparent'}, 
          height: '50', 
          chartArea: { 
           width: '90%' 
          } 
         } 
        } 
       } 
      }); 


      // Create a pie chart, passing some options 
      _lineChart = new google.visualization.ChartWrapper({ 
       'chartType': "LineChart", 
       'containerId': 'chart_div', 
       'options': { 
        backgroundColor: {fill: 'transparent'}, 
        'legend': 'right', 
        'pointSize': 5, 
        crosshair: {trigger: 'both'}, // Display crosshairs on focus and selection. 
        hAxis: { 
         title: _hAxisTitle, 
         viewWindow: { 
          min: _minTime, 
          max: _maxTime 
         }, 
        }, 
        vAxis: { 
         title: _vAxisTitle 
        } 
       } 
      }); 
      // Establish dependencies, declaring that 'filter' drives 'pieChart', 
      // so that the pie chart will only display entries that are let through 
      // given the chosen slider range. 
      _dashboard.bind(lineChartRangeFilter, _lineChart); 
      // Draw the dashboard. 
      _dashboard.draw(_data); 
     }, 
     columnChart: function() { 
      _lineChart = new google.visualization.ChartWrapper({ 
       'chartType': "ColumnChart", 
       'containerId': 'chart_div', 
       'dataTable': _data, 
       'options': {backgroundColor: {fill: 'transparent'}, 
        'legend': 'right', 
        'pointSize': 5, 
        crosshair: {trigger: 'both'}, // Display crosshairs on focus and selection. 
        hAxis: { 
         title: _hAxisTitle, 
        }, 
        vAxis: { 
         title: _vAxisTitle, 
        } 
       } 
      }); 
      _lineChart.draw(); 
     } 
    }; 
}()); 

Answer 1

这是因为你传递一个参照该方法addEventListener，稍后将与window对象上下文中被调用，而不是你的this对象。

否决此行为，您可以使用多种解决方案，但这里是一个与bind()：

_button.addEventListener('click', this.switchChart.bind(this), false);