如何在function()方法中使用类变量?

时间:2017-10-12 06:26:46

标签: function typescript

类变量名称: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;
}

}

1 个答案:

答案 0 :(得分:1)

this的回调函数中的setInterval未指向当前的类实例,因为当您使用function () {}语法时,它会基于this创建自己的绑定如何被称为。

要修复此用法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);
                }
            }
        }
        // ...
    });
}