设置父类的回调函数

Question

我正在尝试将回调函数（将其作为参数传递）设置给父类，但是在使用它时我得到“this.getYValuesCB 不是函数”我尝试在构造函数中传递它，并尝试绑定到“this”但仍然是同样的问题。

任何指针将不胜感激。

谢谢！

export class D3Chart {
    constructor() {
        this.getYValuesCB = null;   // also tried setting it here
    }
    setYValuesCb(cb) {
        this.getYValuesCB = cb;
    }
    ticks = data => Math.max(...data.map( rec => { this.getBookingSum(rec) }));    // when using  this it says this.getBookingSum is not a function!
}

export default class BookingsChart extends D3Chart {
    constructor(data, svgDevId) {
        super(data, svgDevId, 'booking');
    }
    getBookingSum = room => room.booking.sum;

    plotChart(xLabel, yLabel) {
        this.setYValuesCb(this.getBookingSum.bind(this));
        
        this.plotBarChart(this.data, this.xAxis, this.yAxis, this.x, 
            this.y, xLabel, yLabel, this.ticks, this.margin, this.width, this.height);
    }    
}

Answer 1

您得到this.getYValuesCB is not a function，因为您在class 中将getYValuesCB 定义为property（在您的情况下为空对象）而不是method。

如果你输入：

console.log(typeof bookingsChart.getYValuesCB);

如果bookingsChart 是BookingsChart 的一个实例，您将得到以下结果：

object

这意味着getYValuesCB 是一个属性。

但是，在您的情况下（我希望如此），您将 getYValues 作为方法调用：

 bookingsChart.getYValuesCB();

这将引发此错误：

Uncaught TypeError: bookingsChart.getYValuesCB is not a function

确实，在 Javascript 中：

函数是一种特殊类型的对象，称为函数对象。

您可以通过调用内置函数构造函数来创建函数：

this.getYValuesCB=new Function();

或者通过将函数对象分配给属性（推荐给你）：

this.getYValuesCB = function () {
        // return initial value
    };

在本例中，我们将一个函数对象分配给属性getDetails，然后我们将其作为实例中的方法调用。

class Book {
  constructor(type, author) {
    this.type = type;
    this.author = author;
    this.getDetails = function () {
      return this.type + " written by " + this.author;
    };
  }
}
var book = new Book("Fiction", "Peter King");
alert(book.getDetails()); // => Fiction written by Peter King