javascript - 两个类之间的回调如何工作？

Question

我正在学习一门类(class)，并试图了解两个类之间的回调如何工作。我准备了这个例子:

    function Car() {

        this.offer = {};

        this.OfferUpdate = () => {
            this.callback(this.offer)
        }

        this.callback = function(){};

        this.Listener = (callback) => {
            this.callback = callback;
        }
    }

    var car = new Car();
    car.offer = {
        model: ['A4', 'A5', 'A6'],
        engine: ['TDI', 'TFSI']
    }

    class Car_showroom {

        constructor() {
            this.model = ['A4'];
            this.engine = ['TDI'];
 
            car.Listener((newItems) => {
                this.model = newItems.model
                this.engine = newItems.engine
            })
        }
    }

let car_showroom = new Car_showroom();
    
let p = document.createElement("p")
let p2 = document.createElement("p")
let text = document.createTextNode("car.offer: " + JSON.stringify(car.offer));
let text2 = document.createTextNode("car_showroom: " + JSON.stringify(car_showroom))
p.appendChild(text);
document.body.appendChild(p);
p2.appendChild(text2);
document.body.appendChild(p2);

car.OfferUpdate(); //run callback

let p3 = document.createElement("p")
let text3 = document.createTextNode("car_showroom after  car.OfferUpdate(): " + JSON.stringify(car_showroom))
p3.appendChild(text3);
document.body.appendChild(p3);
    

当启动 car.OfferUpdate() 调用时，会启动此方法中的回调，从而启动 listner() 方法，但我不明白如何.

调用 this.callback(this.offer) 如何触发 listner() 方法？

Answer 1

How does calling this.callback(this.offer) trigger the listner() method?

这段代码调用car.Listener，向其中传递一个函数:

car.Listener((newItems) => {
    this.model = newItems.model
    this.engine = newItems.engine
})

car.Listener 执行以下操作:

this.callback = callback;

...将该函数引用保存在其callback 属性中。这意味着该汽车的回调现在是对传递给 car.Listener 的函数的引用(上面的箭头函数设置了 model 和 引擎)。因此稍后，this.callback(...) 调用该箭头函数(而不是 Listener)。

这可能有助于更清楚地区分我们传入的函数和对 car.Listener 的调用。这段代码:

car.Listener((newItems) => {
    this.model = newItems.model
    this.engine = newItems.engine
})

可以这样重写以使区别更清晰:

// Create a callback we can give to `car`
const ourCallback = (newItems) => {
    this.model = newItems.model
    this.engine = newItems.engine
};
// Give that callback to `car`
car.Listener(ourCallback)