JavaScript 中的模板方法

Question

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

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

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

如何让这个场景工作？也许我实现了错误的继承：S（也有帮助:)）

提前谢谢你。

Answer 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