当前位置:首页 > 日记 > 正文

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 ); // 输出:开始渲染腾讯地图

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

总结

以上所述是小编给大家介绍的JS中的多态实例,希望对大家有所帮助!

相关文章

怎么制作飞机飞入云层的PPT动画

怎么制作飞机飞入云层的PPT动画

动画,云层,飞机,电脑软件,PPT,  要制作一个飞机飞入云层的PPT动画,其实也不是很难。你需要收集素材,图片、音频等。图片素材尽量选择PNG格式的图片,PNG格式支持透明的背景图像。以下是小编为您带来的关于制作飞机飞入云层的PPT动画,希望对您…

如何让word自动编号

如何让word自动编号

自动编号,电脑软件,word,  当文档内容很多,章节也很多的时候,逐个标题手动编号,就非常的麻烦,而且,一旦修改其中的编号,其他的编号也需要手动修改,这样,就增加了很多工作量。如何解决这个问题呢?那么下面就由小编给大家分享下让word自动编号的技…

COM组件中调用JavaScript函数详解

COM组件中调用JavaScript函数详解

函数,调用,组件,详解,实例,COM组件中调用JavaScript函数详解及实例要求是很简单的,即有COM组件A在IE中运行,使用JavaScript(JS)调用A的方法longCalc(),该方法是一个耗时的操作,要求通知IE当前的进度。这就要求使用回调函数,设其名称为scriptCallba…

在ppt中旋转的方法步骤

在ppt中旋转的方法步骤

步骤,方法,图片,电脑软件,ppt,  有时光放一个图片上去,很单调,旋转之后更有意味。那么要怎么做呢?下面小编来告诉你在ppt中旋转图片的方法吧,希望对你有帮助!在ppt中旋转图片的步骤新建一个ppt演示文稿,键入几行字点击插入,联机图片输入夜晚,选…

JavaScript实现类似淘宝的购物车效

JavaScript实现类似淘宝的购物车效

淘宝,购物车,类似,效果,电脑软件,前言相信大家都很熟悉商品购物车这一功能,每当我们在某宝某东上购买商品的时候,看中了哪件商品,就会加入购物车中,最后结算。购物车这一功能,方便消费者对商品进行管理,可以添加商品,删除商品,选中购物车中的某一项…

ps如何将文字进行栅格化

ps如何将文字进行栅格化

栅格,文字,方法,如何将,电脑软件,  栅格化其实很好用的,对一些图片或者文字要处理就可以栅格化。很多刚学习的新手小伙伴可能还不知道,下面是小编带来关于ps如何将文字进行栅格化的内容,希望可以让大家有所收获!ps将文字进行栅格化的方法打…

怎么把wps文字变成格式把wps文字变

怎么把wps文字变成格式把wps文字变

文字,步骤,方法,图片格式,格式,  如果对wps不太熟练的同学,可能在听到这个要把wps文字变图片的操作,可能都会问一句可能吗,其实是完全可能的,而且还很简单。下面小编教你怎么把wps文字变成图片格式,希望对你有帮助!wps文字变成图片格式的方法步…

canvas绘图不清晰的解决方案

canvas绘图不清晰的解决方案

绘图,解决方案,清晰,电脑软件,canvas,现象描述  同样大小的图片(60x60px)用canvas和DOM绘制,结果发现canvas的画面质量要差很多。结果如下图所示。上图中,左侧红框中的金币采用DOM绘制,右侧和下方的金币和文字等使用canvas绘制,结果canvas绘制…

单页PPT演示制作长文本的方法是什

单页PPT演示制作长文本的方法是什

文本,方法,演示,电脑软件,PPT,  通过对PPT控件工具箱中的文本框控件的设置,可以制作出带滚动条的文本框,能够将大段内容收录其中。以下是小编为您带来的关于单页PPT演示长文本,希望对您有所帮助。单页PPT演示长文本插入文本框控件这个过程主…

怎么在PPT2013中制作数学立方体

怎么在PPT2013中制作数学立方体

立方体,数学,电脑软件,  在用PPT2013制作数学图形时,例如立体矩形,立方体就不好直接用插入形状的方法绘制。难道就没有办法了么?以下是小编为您带来的关于PPT2013中制作数学立方体,希望对您有所帮助。PPT2013中制作数学立方体1 启动PowerPoi…

wps表格中如何快速复制相同内容wps

wps表格中如何快速复制相同内容wps

方法,表格,快速,内容,电脑软件,  表格的编制是办公室里几乎每天都在使用的,同一表格中相同内容的文字要出现在不同行列中,也许你习惯于采用复制、粘贴的方式也处理,但其实在wps表格中有一种很快捷的方式。下面小编告诉是什么吧。wps表格快速…

PPT2010如何制作多媒体相册

PPT2010如何制作多媒体相册

多媒体,电脑软件,  PPT演示文稿是指用PPT软件制作的一系列幻灯片,通过将思维视觉化的方式,用文字、图表、图像和音频视频等载体按照逻辑顺序展示相互关联的思想观点。PPT里面有新建相册的功能,你有没有尝试过呢。将自己的相片整理成一个有序…