JavaScript装饰器模式

我正试图得到一个装饰图案，以工作如下

我可能错过了一些要点，但模式并不像我预期的那样有效

如果我添加两个decorator并将它们添加到一个类中，那么函数就不会像我所想的那样被传递。只能调用最后一个decorator的函数或调用基本decorator。链子断了。我该如何解决这个问题

我加了一把小提琴：

更新：更正版本

和源代码：

// A basic device class
var device = function(options) {
    this.brightness = options.brightness;
    this.Id = options.Id;
    this.motion = options.motion;
};

// Adding some functions to the class
device.prototype = {

    getID: function() {
        console.log("This ID:" + this.device.Id);
        return this.Id;
    },
    getBrightness: function() {
        console.log("This Brightness: " + this.brightness);
        return this.brightness;
    },
    getMotion: function() {
        console.log("This Motion: " + this.motion);
        return this.motion;
    }
};

// A device Decorator 
var deviceDecorator = function(device) {
    this.device = device;
};

// Adding pass through functions to the Decorator
deviceDecorator.prototype = {
    getId: function() {
        console.log("Old Id");
        return this.device.getId;
    },
    getBrightness: function() {
        console.log("Old Brightness");
        return this.device.getBrightness;
    },
    getMotion: function() {
        console.log("Old Motion");
        return this.device.getMotion;
    }
};

// A Decorator that adds some functionality to the getBrightness function
var brightnessDecorator = function(device) {
    deviceDecorator.call(this, device);
};

brightnessDecorator.prototype = new deviceDecorator();

brightnessDecorator.prototype.getBrightness = function() {
    this.device.getBrightness();
    console.log("Changed Brightness");
};

var motionDecorator = function(device) {
    deviceDecorator.call(this, device);
};

// A Decorator that adds some functionality to the getMotion function
motionDecorator.prototype = new deviceDecorator();

motionDecorator.prototype.getMotion = function() {
    this.device.getMotion();
    console.log("changed Motion");
};

// Some options for a device
var options = {
    Id: "Identifier",
    brightness: true,
    motion: false
};

// Create a new device
var Lamp = new device(options);
// Add the decorators to the device
Lamp = new brightnessDecorator(Lamp);
Lamp = new motionDecorator(Lamp);

// Executing the functions
Lamp.getId();
Lamp.getMotion();
Lamp.getBrightness();
console.log(Lamp);?

---

您的第一个decorator返回

device.getID

（函数本身），而不是调用它并返回它返回的值

deviceDecorator.prototype = {
  getID: function() {
    console.log("Old Id");
    return this.device.getID(); // <= call function instead of returning it
  },
  ...
}

deviceDecorator.prototype={
getID:function（）{
控制台日志（“旧Id”）；
返回this.device.getID（）；//在设备原型函数中，它应该是
this.brightness
，而不是
this.device.brightness
其他函数也是如此。只有一件事：可以使用Object.create（deviceDecorator.prototype）而不是新的deviceDecodrator。这只进行链接，并避免实际运行构造函数。（旧浏览器可能没有此功能。在这种情况下，这是一个非常容易制作的垫片，可能也应该在许多图书馆中提供）谢谢你的回答。我还有第二个小问题：我有一个设备属性的设置器，比如亮度。我能以某种方式访问原始设备吗？因为如果已经没有传递，如果我想在原始设备上操作，那么以后定义功能是不可能的。我想出了另一种方法来完成装饰器p我认为这样更好：