如何在函数（）方法中使用类变量？

Question

类变量名称：addPointY

“addPointY” 使用功能：

setInterval(function() { 
    var y = Math.round(Math.random() * 100); 
    series.addPoint(this.addPointY, true, true); 
}, 3000); 

---

我必须找到一种方式来使用它。 这是客户的要求，尚未解决。 请以另一种方式告诉我。

必须在其任何方法中使用类变量。 但我无法获得类变量。

难道你没有一个聪明的开发者解决了同样的问题吗？

---

@Injectable() 
export class HighChartService implements ChartService { 
private addPointY: number = 0; 

shiftAddPoint(data: number) { 
    this.addPointY = data; 
    console.log(this.addPointY); 
} 

/** 
* @see DynamicChart start function 
* @param obj chart Object 
* @param title Top Title 
* @param type ChartType 
* @param yAxisTitle Left Title 
* @param series Chart data 
* @author jskang 
* @since 2017/10/12 
*/ 
dynamicInitOptions(title: string, type: string, yAxisTitle: string, series: Object[]) { 
    if (!type) { type = "line"; } 
    let obj = new Chart({ 
     chart: { 
      type: type, 
      events: { 
       load: function() { 
        // set up the updating of the chart each second 
        var series = this.series[0]; 
        setInterval(function() { 
         var y = Math.round(Math.random() * 100); 
         series.addPoint(this.addPointY, true, true); 
        }, 3000); 
       } 
      } 
     }, 
     title: { text: title }, 
     xAxis: { 
      categories: [0,1,2,3,4,5,6], 
      labels: { 
       formatter: function() { 
        let xAxis = ""; 
        if(this.value % 7 == 0){ xAxis = "일"; } 
        else if(this.value % 7 == 1){ xAxis = "월"; } 
        else if(this.value % 7 == 2){ xAxis = "화"; } 
        else if(this.value % 7 == 3){ xAxis = "수"; } 
        else if(this.value % 7 == 4){ xAxis = "목"; } 
        else if(this.value % 7 == 5){ xAxis = "금"; } 
        else if(this.value % 7 == 6){ xAxis = "토"; } 
        return xAxis; 
       } 
      } 
     }, 
     yAxis: { 
      title: { 
       text: yAxisTitle 
      }, 
      labels: { 
       formatter: function() { 
        return this.value; 
       } 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'middle' 
     }, 
     series: series 
    }); 
    return obj; 
} 

} 

Answer 1

的this内，因为当你使用function() {}语法是基于它是如何被调用创建this自己的绑定为setInterval回调函数不指向当前的类实例。

为了解决这个问题使用arrow functions它保留了背景下，您可以访问回调内部类属性：

load:() => { // Notice arrow function here 
    // set up the updating of the chart each second 
    var series = this.series[0]; 
    setInterval(() => { // Notice arrow function here 
     var y = Math.round(Math.random() * 100); 
     series.addPoint(this.addPointY, true, true); 
    }, 3000); 
} 

---

就可以解决这个问题的另一种方法是，你捕捉使用that模式，将this它指向您的类实例，并在需要引用您的实例的任何地方使用它：

dynamicInitOptions(title: string, type: string, yAxisTitle: string, series: Object[]) { 
    if (!type) { type = "line"; } 
    let that = this; // Capture `this` here 
    let obj = new Chart({ 
     chart: { 
      type: type, 
      events: { 
       load: function() { 
        // set up the updating of the chart each second 
        var series = this.series[0]; 
        setInterval(function() { 
         var y = Math.round(Math.random() * 100); 
         series.addPoint(that.addPointY, true, true); // Use `that` instead of `this here 
        }, 3000); 
       } 
      } 
     } 
     // ... 
    }); 
}