javascript中的模板方法答案

【问题标题】：Template method in javascriptjavascript中的模板方法
【发布时间】：2010-10-08 15:08:38
【问题描述】：

我想在 javascript 中实现模板方法模式。

我有一个带有一些子类的 PropertyDecorator：OpenButtonDecorator、SeeButtonDecorator 等等。我想在属性装饰器中有下一个功能：

var build = function(){
   decorate(); //Abstract in PropertyDecorator, defined in subclasses
   return le.build();
}

我怎样才能让这个场景发挥作用？也许我实现了错误的继承：S（也有帮助:)）

提前谢谢你。

【问题讨论】：

标签： javascript inheritance template-method-pattern

【解决方案1】：

Javascript 是一种动态类型、基于原型的语言。模板方法是一种设计模式，因此与语言无关，但其实现可能因语言而异。

在 javascript 以及其他动态类型语言（如 ruby）中，抽象类和接口没有多大意义，因为动态链接是通过委托进行的。（方法调用会传播到继承树中的更高级别，直到原型可以处理请求）。这与鸭子类型相结合，这意味着可以在任何实例上潜在地调用任何方法，避免了显式契约的需要，在基于类的语言中，它是由在特定类型上可见的那些声明的方法定义的。

因此，为了实现该模式，只需在父原型构建方法上调用一个不存在的方法（该方法将是模板）并在子类上简单地实现该方法：

function PropertyDecorator()
{
   this.build = function()
   {
      var decoration=this.decorate();
      return "The decoration I did: "+decoration;
   };
}

//we set the parent (those prototype that instances of this class will delegate calls to) 
OpenButtonDecorator.prototype = new PropertyDecorator();
function OpenButtonDecorator()
{
   this.decorate = function()
   {
     return "open button";
   };
}


SeeButtonDecorator.prototype = new PropertyDecorator();
function SeeButtonDecorator()
{
   this.decorate = function()
   {
      return "see button";
   };
}



var decorators=Array(new SeeButtonDecorator(),new OpenButtonDecorator());
for (var decorator in decorators){
    document.writeln(decorators[decorator].build());
}

方法分派以这种方式发生：

实例是否调用了方法？
- 否 -> 将调用委托给父级（它是原型）并重复。
- 是-> 在隐式对象的上下文中执行方法体（开始时接收调用的对象）。

所以，在调用 new SeeButtonDecorator().build() 时，首先会尝试在实例上执行 build 方法。由于它没有在实例中定义，方法调用将委托给实例父级，在这种情况下，SeeButtonDecorator 原型，这个，也没有方法，所以它将调用委托给它的父级（PropertyDecorator）。 PropertyDecorator，有build()方法。

function PropertyDecorator()
{
   this.build = function()
   {
      var decoration=this.decorate();
      return "The decoration I did: "+decoration;
   };
}

在执行它时，build 方法的主体将在新的 SeeButtonDecorator() 的上下文中进行评估。实例本身没有decorate() 方法，因为它在 SeeButtonDecorator() 函数（它的原型）中定义。好吧，这次调用将委托给实例原型，最终将得到一个 decorate() 方法：

function SeeButtonDecorator()
{
   this.decorate = function()
   {
      return "see button";
   };
}

方法会在实例的上下文中再次执行，并且会返回字符串，回退到调用栈中直到返回

The decoration I did: see button

【讨论】：