Question

我有两个JavaScript类¹

之间的继承关系

RealTimeChart = function(chartAttributes) {

    var chart = new FusionCharts(chartAttributes);

    this.appendData = function(data) {
        chart.feedData(data);
    }
};

RealTimeGauge = function(chartAttributes) {
    chartAttributes.type = 'AngularGauge';

    // call parent constructor
    RealTimeChart.call(this, chartAttributes);
};

// inherit from RealTimeChart
RealTimeGauge.prototype = Object.create(RealTimeChart.prototype);

在RealTimeGauge中，我想覆盖appendData()。 RealTimeGauge中此函数的实现需要调用父实现，这可能吗？

如果我将appendData更改为原型函数，则执行此操作相对简单，例如

// parent class
RealTimeChart.prototype.appendData = function(data) {
    this.chart.feedData(data);
};

// child class
RealTimeGauge.prototype.appendData = function(data) {

    console.log("doing custom stuff...");

    // call the parent function to add the data to the chart
    RealTimeChart.prototype.appendData.call(this, data);
};

但是，如果我使appendData成为原型函数而不是特权函数，我还必须使chart成为公共财产，而我却不愿意这样做。如果它是特权函数，是否可以调用appendData形式RealTimeGauge的父实现？

我知道他们并不是真正的课程，但我不知道他们有更好的名字

Answer 1

在子构造函数中，在调用超级构造函数之后，this将特权函数保存为自己的属性。

您可以将其重新分配给临时变量并创建将取代超级实现的包装函数：

Parent = function() {
    var x = 1;

    this.work = function(y) {
        console.log(x + y);
    }
};

Child = function() {
    Parent.call(this);

    var super_work = this.work

    this.work = function(y) {
        super_work(y + 10); 
    }
};

Child.prototype = Object.create(Parent.prototype);

让我们试一试：

p = new Parent()
p.work(1) # prints 2

c = new Child()
c.work(1) # prints 12

Answer 2

要完全避免这个问题，你可以放弃继承，然后去创作。

RealTimeChart = function(chartAttributes) {
    var chart = new FusionCharts(chartAttributes);
    this.appendData = function(data) {
        chart.feedData(data);
    };
};

RealTimeGauge = function (realTimeChart) {
    this.appendData = function (data) {
        console.log("doing custom stuff...");
        realTimeChart.appendData(data);
    };
};

new RealTimeGauge(new RealTimeChart({}));

Using composition results in simpler, more modular code。正如您在上面的代码中看到的那样，RealTimeGauge仅取决于RealTimeChart的界面，而不是RealTimeChart本身的界面，就像您的原始代码一样。这意味着您可以替换具有相同界面的任何内容。 2＆＃39;班级＆＃39;现在脱钩了。什么价格？更少的代码更具可读性。您可以更进一步，以同样的方式将RealTimeChart与FusionCharts分离。

调用特权函数的父实现

2 个答案: