function（）メソッドでクラス変数を使用するにはどうすればよいですか？

Question

クラス変数名：addPointY

機能を使用する "addPointY"：

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

---

私はそれを使用する方法を見つける必要があります。 これは顧客の要件であり、解決されていません。 別の方法を教えてください。

クラス変数は、そのメソッドのいずれかで使用する必要があります。 しかし、クラス変数を取得できませんでした。

同じ問題を解決したスマートな開発者はいませんか？あなたがfunction() {}構文を使用する場合、それが呼び出された方法に基づいてthisための独自のバインディングを作成するためsetIntervalため

---

@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コールバック関数内では、現在のクラスのインスタンスを指していません。

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パターンを使用することです：コンテキストを保持し、あなたがコールバックの内側にあなたのクラスのプロパティにアクセスすることができ、この使用arrow functionsを解決するために

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); 
       } 
      } 
     } 
     // ... 
    }); 
}