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 );
// 输出：开始渲染百度地图【javascript设计模式第一章之多态在面向对象程序设计中的作用（地图）】现在来找找这段代码中的多态性。当我们向谷歌地图对象和百度地图对象分别发出“展示地
图”的消息时，会分别调用它们的show 方法，就会产生各自不同的执行结果。对象的多态性提
示我们，“做什么”和“怎么去做”是可以分开的，即使以后增加了搜搜地图，renderMap 函数仍
然不需要做任何改变，如下所示：
var sosoMap = {
show: function(){
console.log( '开始渲染搜搜地图' );
}
};
renderMap( sosoMap );
// 输出：开始渲染搜搜地图
推荐阅读
- 事件代理
- 喵喵
- 数组常用方法一
- 设计模式-代理模式-Proxy
- 《吃掉那只青蛙》第一章
- [无戒学堂]读《百岁人生》第一章随记
- 自我修养--基础知识
- 论语学而篇第一章
- 赢者之心
- JavaScript|vue 基于axios封装request接口请求——request.js文件