javascript设计模式第一章之多态在面向对象程序设计中的作用（地图）

假设我们要编写一个地图应用，现在有两家可选的地图API 提供商供我们接入自己的应用。目前我们选择的是谷歌地图，谷歌地图的API 中提供了show 方法，负责在页面上展示整个地图。示例代码如下：

var googleMap = {
  show: function(){
  console.log( '开始渲染谷歌地图' );
}
};
var renderMap = function(){
  googleMap.show();
};
renderMap(); // 输出：开始渲染谷歌地图

后来因为某些原因，要把谷歌地图换成百度地图，为了让renderMap 函数保持一定的弹性，我们用一些条件分支来让renderMap 函数同时支持谷歌地图和百度地图：

var googleMap = {
  show: function(){
    console.log( '开始渲染谷歌地图' );
  }
};
var baiduMap = {
  show: function(){
    console.log( '开始渲染百度地图' );
  }
};
var renderMap = function( type ){
  if ( type === 'google' ){
    googleMap.show();
  }else if ( type === 'baidu' ){
    baiduMap.show();
  }
};
renderMap( 'google' ); // 输出：开始渲染谷歌地图
renderMap( 'baidu' ); // 输出：开始渲染百度地图

可以看到，虽然renderMap 函数目前保持了一定的弹性，但这种弹性是很脆弱的，一旦需要
替换成搜搜地图，那无疑必须得改动renderMap 函数，继续往里面堆砌条件分支语句。
我们还是先把程序中相同的部分抽象出来，那就是显示某个地图：

var googleMap = {
  show: function(){
    console.log( '开始渲染谷歌地图' );
  }
};
var baiduMap = {
  show: function(){
    console.log( '开始渲染百度地图' );
  }
};
var renderMap = function( map ){
    if ( map.show instanceof Function ){
        map.show();
    }
};
renderMap( googleMap ); // 输出：开始渲染谷歌地图
renderMap( baiduMap );// 输出：开始渲染百度地图

现在来找找这段代码中的多态性。当我们向谷歌地图对象和百度地图对象分别发出“展示地
图”的消息时，会分别调用它们的show 方法，就会产生各自不同的执行结果。对象的多态性提
示我们，“做什么”和“怎么去做”是可以分开的，即使以后增加了搜搜地图，renderMap 函数仍
然不需要做任何改变，如下所示：

var sosoMap = {
    show: function(){
      console.log( '开始渲染搜搜地图' );
    }
};
renderMap( sosoMap );// 输出：开始渲染搜搜地图