JS中的多态实例详解


Posted in Javascript onOctober 15, 2017

 多态在面向对象编程语言中是十分重要的。在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中的多态实例,希望对大家有所帮助!

Javascript 相关文章推荐
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
js 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
基于JQuery实现分隔条的功能
Jun 17 Javascript
JQuery学习总结【二】
Dec 01 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
react-native android状态栏的实现
Jun 15 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
js实现弹框效果
Mar 24 Javascript
vue跨域解决方法
Oct 15 #Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 #Javascript
详解 vue.js用法和特性
Oct 15 #Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 #jQuery
JS简单实现数组去重的方法分析
Oct 14 #Javascript
jQuery响应滚动条事件功能示例
Oct 14 #jQuery
JS实现的简单表单验证功能完整实例
Oct 14 #Javascript
You might like
分享一则PHP定义函数代码
2015/02/26 PHP
简单谈谈PHP中strlen 函数
2016/02/27 PHP
php取出数组单个值的方法
2018/03/12 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
javascript 动态生成私有变量访问器
2009/12/06 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
Javascript计算时间差的函数分享
2011/07/04 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
对于Python中线程问题的简单讲解
2015/04/03 Python
Python中字符串的处理技巧分享
2016/09/17 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
PyTorch的torch.cat用法
2020/06/28 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
婚礼新郎父母答谢词
2014/01/16 职场文书
中式婚礼主持词
2014/03/13 职场文书
意向书范本
2014/07/29 职场文书
道德模范事迹材料
2014/12/20 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
2019年妇科护士的自我鉴定(3篇)
2019/09/26 职场文书
Golang流模式之grpc的四种数据流
2022/04/13 Golang