Addy Osmani的Javascript装饰模式

Question

鉴于这一守则：

// Constructor.
var Interface = function (name, methods) {
        if (arguments.length != 2) {
            throw new Error("Interface constructor called with " + arguments.length + "arguments, but expected exactly 2.");
        }
        this.name = name;
        this.methods = [];
        for (var i = 0, len = methods.length; i < len; i++) {
            if (typeof methods[i] !== 'string') {
                throw new Error("Interface constructor expects method names to be " + "passed in as a string.");
            }
            this.methods.push(methods[i]);
        }
    };


// Static class method.
Interface.ensureImplements = function (object) {
    if (arguments.length < 2) {
        throw new Error("Function Interface.ensureImplements called with " + arguments.length + "arguments, but expected at least 2.");
    }
    for (var i = 1, len = arguments.length; i < len; i++) {
        var interface = arguments[i];
        if (interface.constructor !== Interface) {
            throw new Error("Function Interface.ensureImplements expects arguments" + "two and above to be instances of Interface.");
        }
        for (var j = 0, methodsLen = interface.methods.length; j < methodsLen; j++) {
            var method = interface.methods[j];
            if (!object[method] || typeof object[method] !== 'function') {
                throw new Error("Function Interface.ensureImplements: object " + "does not implement the " + interface.name + " interface. Method " + method + " was not found.");
            }
        }
    }
};


function extend( a, b ){
    for( var key in b )
        if( b.hasOwnProperty(key) )
            a[key] = b[key];
    return a;
}




var Macbook = new Interface( "Macbook",
  ["addEngraving",
  "addParallels",
  "add4GBRam",
  "add8GBRam",
  "addCase"]); /* Returns an object that stores the name of the Interface and the array of methods (pushed) */

// A Macbook Pro might thus be represented as follows:
var MacbookPro = function(){
    // implements Macbook
};

MacbookPro.prototype = {
    addEngraving: function(){
    },
    addParallels: function(){
    },
    add4GBRam: function(){
    },
    add8GBRam:function(){
    },
    addCase: function(){
    },
    getPrice: function(){
      // Base price
      return 900.00;
    }
};


var MacbookDecorator = function( macbook ){

    Interface.ensureImplements( macbook, Macbook );
    this.macbook = macbook;

};

MacbookDecorator.prototype = {
    addEngraving: function(){
        return this.macbook.addEngraving();
    },
    addParallels: function(){
        return this.macbook.addParallels();
    },
    add4GBRam: function(){
        return this.macbook.add4GBRam();
    },
    add8GBRam:function(){
        return this.macbook.add8GBRam();
    },
    addCase: function(){
        return this.macbook.addCase();
    },
    getPrice: function(){
        return this.macbook.getPrice();
    }
};


var CaseDecorator = function( macbook ){
   this.macbook = macbook;
};

// Let's now extend (decorate) the CaseDecorator
// with a MacbookDecorator
extend( CaseDecorator, MacbookDecorator );

CaseDecorator.prototype.addCase = function(){
    return this.macbook.addCase() + "Adding case to macbook";
};

CaseDecorator.prototype.getPrice = function(){
    return this.macbook.getPrice() + 45.00;
};


var myMacbookPro = new MacbookPro();

// Outputs: 900.00
console.log( myMacbookPro.getPrice() );


// Decorate the macbook
var decoratedMacbookPro = new CaseDecorator( myMacbookPro );

// This will return 945.00
console.log( decoratedMacbookPro.getPrice() );

对我来说一见钟情不错。然而，最近我对这段代码进行了更深入的分析，并遇到了一些问题，我今天想和大家分享一下。让我们开始:此代码的当前版本包含以下内容：

MacbookDecorator.prototype = {
    addEngraving: function(){
        return this.macbook.addEngraving();
    },
    addParallels: function(){
        return this.macbook.addParallels();
    },
    add4GBRam: function(){
        return this.macbook.add4GBRam();
    },
    add8GBRam:function(){
        return this.macbook.add8GBRam();
    },
    addCase: function(){
        return this.macbook.addCase();
    },
    getPrice: function(){
        return this.macbook.getPrice();
    }
};

在这一点上，这实际上是没有意义的(如果我错了，就抓住我)，特别是在以给定的方式调用时：

var myMacbookPro = new MacbookPro();

// Outputs: 900.00
console.log( myMacbookPro.getPrice() );


// Decorate the macbook
var decoratedMacbookPro = new CaseDecorator( myMacbookPro );

// This will return 945.00
console.log( decoratedMacbookPro.getPrice() );

在给定的上下文中，MacbookDecorator.prototype不可能有任何意义。有些人可能会说它是链的一部分，因此MacbookDecorator的原型在那里有它的位置。，但不，，这里没有地方叫它有实际用途。为什么？

extend( CaseDecorator, MacbookDecorator );

也许你们中的一些人相信，这就是魔法发生的部分，但让我们记住这一点：

function extend( a, b ){
    for( var key in b )
        if( b.hasOwnProperty(key) )
            a[key] = b[key];
    return a;
}

CaseDecorator没有继承来自MacbookDecorator的继承，实际上，这样的原型被完全忽略，而不是被CaseDecorator继承。此外，扩展函数根本没用，因为它只从对象读取属性，但是所提供的两个参数都是函数，因此，如果函数在传递之前至少没有执行，那么继承就不会发挥作用，这是很棘手的，因为在这一点上甚至没有定义this.macbook。

下面是我的代码版本，实际上是在做同样的事情，忽略了一些不重要的和部分令人恼火的部分：

// Constructor.
var Interface = function (name, methods) {
        if (arguments.length != 2) {
            throw new Error("Interface constructor called with " + arguments.length + "arguments, but expected exactly 2.");
        }
        this.name = name;
        this.methods = [];
        for (var i = 0, len = methods.length; i < len; i++) {
            if (typeof methods[i] !== 'string') {
                throw new Error("Interface constructor expects method names to be " + "passed in as a string.");
            }
            this.methods.push(methods[i]);
        }
    };


// Static class method.
Interface.ensureImplements = function (object) {
    if (arguments.length < 2) {
        throw new Error("Function Interface.ensureImplements called with " + arguments.length + "arguments, but expected at least 2.");
    }
    for (var i = 1, len = arguments.length; i < len; i++) {
        var interface = arguments[i];
        if (interface.constructor !== Interface) {
            throw new Error("Function Interface.ensureImplements expects arguments" + "two and above to be instances of Interface.");
        }
        for (var j = 0, methodsLen = interface.methods.length; j < methodsLen; j++) {
            var method = interface.methods[j];
            if (!object[method] || typeof object[method] !== 'function') {
                throw new Error("Function Interface.ensureImplements: object " + "does not implement the " + interface.name + " interface. Method " + method + " was not found.");
            }
        }
    }
};




var Macbook = new Interface( "Macbook",
  ["addEngraving",
  "addParallels",
  "add4GBRam",
  "add8GBRam",
  "addCase"]); /* Gives back an object that stores the name of the Interface and the array of methods (pushed) */

// A Macbook Pro might thus be represented as follows:
var MacbookPro = function(){};

var decorator = function() {
  return {
    addEngraving: function(){
    },
    addParallels: function(){
    },
    add4GBRam: function(){
    },
    add8GBRam:function(){
    },
    addCase: function(){
    },
    getPrice: function(){
      // Base price
      return 900.00;
    }
  }
} 
MacbookPro.prototype = decorator();
//var MacbookDecorator = function( macbook ){
//    Interface.ensureImplements( macbook, Macbook );
//    this.macbook = macbook;
//}
/*MacbookDecorator.prototype = decorator();*/


var CaseDecorator = function( macbook ){
   this.macbook = macbook;
};


CaseDecorator.prototype.addCase = function(){
    return this.macbook.addCase() + "Adding case to macbook";
};

CaseDecorator.prototype.getPrice = function(){
    return this.macbook.getPrice() + 45.00;
};


// Decorate the macbook
var decoratedMacbookPro = new CaseDecorator( new MacbookPro() );

// This will return 945.00
console.log( decoratedMacbookPro.getPrice() );

，你对此有何看法，作者遗漏了什么，还是说是真的？

Answer 1

扩展( CaseDecorator，MacbookDecorator )； CaseDecorator没有继承来自MacbookDecorator的继承，实际上，这样的原型被完全忽略，而不是被CaseDecorator继承。

你说的完全对。在我看来，这是作者的失误，实际上应该是

extend(CaseDecorator.prototype, MacbookDecorator.prototype);

甚至是完整的原型继承设置。

extend只从对象读取属性，但是提供的两个参数都是函数。

不要忘记函数也是对象，所以如果函数只有自己的属性，那么函数上的extend可以对它们做很多事情。但是您是对的，在这种情况下，它什么也不做，因为典型的函数实例属性(如.prototype或.name )是不可枚举的。