JS中多态使用详解

这次给大家带来JS中多态使用详解，JS中多态使用的注意事项有哪些，下面就是实战案例，一起来看一下。

多态在面向对象编程语言中是十分重要的。在JAVA中是通过继承来得到多态的效果。如下：

public abstract class Animal {
abstract void makeSound(); // 抽象方法
}
public class Chicken extends Animal{
public void makeSound(){
System.out.println( "咯咯咯" );
}
}
public class Duck extends Animal{
public void makeSound(){
System.out.println( "嘎嘎嘎" );
}
}
Animal duck = new Duck(); // (1)
Animal chicken = new Chicken(); // (2)

多态的思想实际上是把“做什么”和“谁去做”分离开来，要实现这一点，归根结底先要消除类型之间的耦合关系。
在Java中，可以通过向上转型来实现多态。而javascript的变量在运行期是可变的，一个js对象既可以表示既可以表示Duck类型的对象，又可以表示Chicken类型的对象，这意味着JavaScript对象的多态性是与生俱来的。

多态最根本的作用就是通过把过程化的条件分支语句转化为对象的多态性， 从而消除这些条件分支语句。

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

var googleMap = {
show: function(){
console.log( '开始渲染谷歌地图' );
}
};
var renderMap = function(){
googleMap.show();
};
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 renderMap = function( map ){
if ( map.show instanceof Function ){
map.show();
}
};
renderMap( googleMap ); // 

输出：开始渲染谷歌地图 renderMap( baiduMap ); // 输出：开始渲染百度地图

之后我们又新增了腾讯地图的支持，那我们很快变可以实现这个功能，而且不必修改原代码：

var TencentMap = {
  show: function(){
console.log( '开始渲染腾讯地图' );
}
}
renderMap( sosoMap ); // 

输出：开始渲染腾讯地图

多态技术至关重要，很多设计模式都是巧妙利用多态来实现。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

前端开发中的多列布局实现方法

使用jquery与ajax进行数据交互

以上就是JS中多态使用详解的详细内容，更多请关注Gxl网其它相关文章！