访问模块中的对象属性时出错

Question

我目前正在使用 JavaScript 模块运行一些测试，不幸的是，在尝试设置 mychart 对象的属性 setOption 时出现 Uncaught TypeError 错误。这作为参数传递给另一个模块中的类。当前代码如下所示：

App.js

import {   echart,   theme,   option } from './module-chart';

import {   ChartController } from './module-chart-controller';

let mychart = echart.init(document.getElementById('main'), theme); 
mychart.setOption(option);

let chartController = new ChartController(mychart); 
chartController.animateChart();

模块图表控制器.js

class ChartController{

  constructor(chart){
    this.mychart = chart;
  }

  animateChart() {
    let intervalo = setInterval(function() {
      concentrationOfAandB = getObjectConcentrationOfAandB();
      dataA.push(concentrationOfAandB.concentrationOfA);
      dataB.push(concentrationOfAandB.concentrationOfB);
      this.mychart.setOption({
        series: [{
            data: dataA,
            animationDuration: 1000
          },
          {
            data: dataB,
            animationDuration: 1000
          }
        ]
      });
    }, 1900);
    setTimeout(function() {
      clearInterval(intervalo);
    }, 40000);
  }
}
export {ChartController};

当我在App.js文件中传递module-chart-controller.js代码时，没有出现错误。

控制台显示如下错误信息：Uncaught TypeError: Can not read property 'setOption' of undefined. 指责module-chart-controller.js文件出错

提前感谢您的关注！

Answer 1

您需要bind 请求分配给this 的属性的方法，以便该方法可以访问它们。同样你需要做setInterval函数，它需要访问this，所以你也需要bind它。

constructor(chart){
    this.mychart = chart;
    this.animateChart = this.animateChart.bind(this);
}

animateChart() {
    let intervalo = setInterval(function() {
       concentrationOfAandB = getObjectConcentrationOfAandB();
       dataA.push(concentrationOfAandB.concentrationOfA);
       dataB.push(concentrationOfAandB.concentrationOfB);
       this.mychart.setOption({
           series: [{
               data: dataA,
               animationDuration: 1000
           },
           {
               data: dataB,
               animationDuration: 1000
           }]
       });
    }.bind(this), 1900);

    setTimeout(function() {
        clearInterval(intervalo);
    }, 40000);
}