在 JavaScript 开发中用到继承的场景其实并不是很多，很多时候我们都喜欢用 mix-in 的方式 给对象扩展属性。但这不代表继承在 JavaScript 里没有用武之地，虽然没有真正的类和继承机制， 但我们可以通过原型 prototype 来变相地实现继承。

模板方法模式的定义和组成

模板方法模式是一种只需使用继承就可以实现的非常简单的模式。
模板方法模式由两部分结构组成，第一部分是抽象父类，第二部分是具体的实现子类。通常 在抽象父类中封装了子类的算法框架，包括实现一些公共方法以及封装子类中所有方法的执行顺 序。子类通过继承这个抽象类，也继承了整个算法结构，并且可以选择重写父类的方法。
假如我们有一些平行的子类，各个子类之间有一些相同的行为，也有一些不同的行为。如果 相同和不同的行为都混合在各个子类的实现中，说明这些相同的行为会在各个子类中重复出现。 但实际上，相同的行为可以被搬移到另外一个单一的地方，模板方法模式就是为解决这个问题而 生的。在模板方法模式中，子类实现中的相同部分被上移到父类中，而将不同的部分留待子类来 实现。这也很好地体现了泛化的思想。

模板方法模式的使用场景

从大的方面来讲，模板方法模式常被架构师用于搭建项目的框架，架构师定好了框架的骨架， 程序员继承框架的结构之后，负责往里面填空，比如 Java 程序员大多使用过 HttpServlet 技术来 开发项目。
在 Web 开发中也能找到很多模板方法模式的适用场景，比如我们在构建一系列的 UI 组件， 这些组件的构建过程一般如下所示： (1) 初始化一个 div 容器； (2) 通过 ajax 请求拉取相应的数据； (3) 把数据渲染到 div 容器里面，完成组件的构造； (4) 通知用户组件渲染完毕。
我们看到，任何组件的构建都遵循上面的 4 步，其中第(1)步和第(4)步是相同的。第(2)步不 同的地方只是请求 ajax 的远程地址，第(3)步不同的地方是渲染数据的方式。 于是我们可以把这 4 个步骤都抽象到父类的模板方法里面，父类中还可以顺便提供第(1)步和 第(4)步的具体实现。当子类继承这个父类之后，会重写模板方法里面的第(2)步和第(3)步。

钩子方法

通过模板方法模式，我们在父类中封装了子类的算法框架。这些算法框架在正常状态下是适 用于大多数子类的，但如果有一些特别“个性”的子类呢？比如我们在饮料类 Beverage 中封装了 饮料的冲泡顺序： (1) 把水煮沸 (2) 用沸水冲泡饮料 (3) 把饮料倒进杯子 (4) 加调料 这 4 个冲泡饮料的步骤适用于咖啡和茶，在我们的饮料店里，根据这 4 个步骤制作出来的咖 啡和茶，一直顺利地提供给绝大部分客人享用。但有一些客人喝咖啡是不加调料（糖和牛奶）的。 既然 Beverage 作为父类，已经规定好了冲泡饮料的 4 个步骤，那么有什么办法可以让子类不受这 个约束呢？
钩子方法（hook）可以用来解决这个问题，放置钩子是隔离变化的一种常见手段。我们在父 类中容易变化的地方放置钩子，钩子可以有一个默认的实现，究竟要不要“挂钩”，这由子类自 行决定。钩子方法的返回结果决定了模板方法后面部分的执行步骤，也就是程序接下来的走向，这样一来，程序就拥有了变化的可能。
在这个例子里，我们把挂钩的名字定为 customerWantsCondiments，接下来将挂钩放入 Beverage 类，看看我们如何得到一杯不需要糖和牛奶的咖啡，代码如下：

  1. var Beverage = function(){};
  2. Beverage.prototype.boilWater = function(){
  3.  console.log( '把水煮沸' );
  4. };
  5. Beverage.prototype.brew = function(){
  6.  throw new Error( '子类必须重写 brew 方法' );
  7. };
  8. Beverage.prototype.pourInCup = function(){
  9.  throw new Error( '子类必须重写 pourInCup 方法' );
  10. };
  11. Beverage.prototype.addCondiments = function(){
  12.  throw new Error( '子类必须重写 addCondiments 方法' );
  13. };
  14. Beverage.prototype.customerWantsCondiments = function(){
  15.  return true; // 默认需要调料
  16. };
  17. Beverage.prototype.init = function(){
  18.  this.boilWater();
  19.  this.brew();
  20.  this.pourInCup();
  21.  if ( this.customerWantsCondiments() ){ // 如果挂钩返回 true，则需要调料
  22.  this.addCondiments();
  23.  }
  24. };
  25. var CoffeeWithHook = function(){};
  26. CoffeeWithHook.prototype = new Beverage();
  27. CoffeeWithHook.prototype.brew = function(){
  28.  console.log( '用沸水冲泡咖啡' );
  29. };
  30. CoffeeWithHook.prototype.pourInCup = function(){
  31.  console.log( '把咖啡倒进杯子' );
  32. };
  33. CoffeeWithHook.prototype.addCondiments = function(){
  34.  console.log( '加糖和牛奶' );
  35. };
  36. CoffeeWithHook.prototype.customerWantsCondiments = function(){ 
  37.   return window.confirm( '请问需要调料吗？' );
  38. };
  39. var coffeeWithHook = new CoffeeWithHook();
  40. coffeeWithHook.init();

高层组件调用低层组件

模板方法模式是基于继承的一种设计模式，父类封装了子类的算法框架和方法的执行顺序， 子类继承父类之后，父类通知子类执行这些方法，好莱坞原则很好地诠释了这种设计技巧，即高层组件调用底层组件。

  1. var Beverage = function( param ){
  2.  var boilWater = function(){
  3.  console.log( '把水煮沸' );
  4.  };
  5.  var brew = param.brew || function(){
  6.  throw new Error( '必须传递 brew 方法' );
  7.  };
  8.  var pourInCup = param.pourInCup || function(){
  9.  throw new Error( '必须传递 pourInCup 方法' );
  10.  };
  11.  var addCondiments = param.addCondiments || function(){
  12.  throw new Error( '必须传递 addCondiments 方法' );
  13.  };
  14.  var F = function(){};
  15.  F.prototype.init = function(){
  16.  boilWater();
  17.  brew();
  18.  pourInCup();
  19.  addCondiments();
  20.  };
  21.  return F;
  22. };
  23. var Coffee = Beverage({
  24.  brew: function(){
  25.  console.log( '用沸水冲泡咖啡' );
  26.  },
  27.  pourInCup: function(){
  28.  console.log( '把咖啡倒进杯子' );
  29.  },
  30.  addCondiments: function(){
  31.  console.log( '加糖和牛奶' );
  32.  }
  33. }); 
  35. var Tea = Beverage({
  36.  brew: function(){
  37.  console.log( '用沸水浸泡茶叶' );
  38.  },
  39.  pourInCup: function(){
  40.  console.log( '把茶倒进杯子' );
  41.  },
  42.  addCondiments: function(){
  43.  console.log( '加柠檬' );
  44.  }
  45. });
  46. var coffee = new Coffee();
  47. coffee.init();
  48. var tea = new Tea();
  49. tea.init();

在这段代码中，我们把 brew、pourInCup、addCondiments 这些方法依次传入 Beverage 函数， Beverage 函数被调用之后返回构造器 F。F 类中包含了“模板方法”F.prototype.init。跟继承得 到的效果一样，该“模板方法”里依然封装了饮料子类的算法框架。