JavaScript装饰器模式 [英] JavaScript Decorator Pattern

问题描述

我正在尝试使装饰器模式能够正常工作

I am trying to get a decorator pattern to work follwing

http://www.joezimjs.com/javascript/javascript-design-patterns-decorator/

我可能已经错过了一点，但是该模式无法按我预期的那样工作。

I might have missed some point but the pattern does not work as i expect.

如果我添加两个装饰器并将它们添加到一个类中，则函数不会像我那样传递思想。只能调用最后一个装饰器的函数，也可以调用基本的装饰器。链接断开。我该如何解决？

If i add two decorators and add them to a class the functions are not passed through as i thought. Only the last decorator's functions can be called or the basic Decorator is called. The chaining is broken. How do i fix this?

我添加了一个小提琴：

http://jsfiddle.net/hbyLW/25/

更新：已更正的版本

http://jsfiddle.net/hbyLW/29 /

和源代码：

// 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);?

推荐答案

您的第一个装饰器返回 device .getID （函数本身），而不是调用它并返回它返回的值。

Your first decorator returns device.getID (the function itself) rather than calling it and returning the value it returns.

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

还请确保大小写一致。

这篇关于JavaScript装饰器模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！