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 相关文章推荐
JS方法调用括号的问题探讨
Jan 24 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
AngularJS Module方法详解
Dec 08 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
vue.js todolist实现代码
Oct 29 Javascript
详解angularjs 学习之 scope作用域
Jan 15 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
发布一款npm包帮助理解npm的使用
Jan 03 Javascript
Vue-CLI 项目在pycharm中配置方法
Aug 30 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 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
Oracle 常见问题解答
2006/10/09 PHP
用PHP产生动态的影像图
2006/10/09 PHP
PHP中一个控制字符串输出的函数
2006/10/09 PHP
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
PHP遍历数组的几种方法
2012/03/22 PHP
PHP定时任务延缓执行的实现
2014/10/08 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
python分析apache访问日志脚本分享
2015/02/26 Python
在Python中移动目录结构的方法
2016/01/31 Python
利用Python开发实现简单的记事本
2016/11/15 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
python实现按长宽比缩放图片
2018/06/07 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
我爱我家教学反思
2014/05/01 职场文书
副处级干部考察材料
2014/05/17 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
辩论会主持词
2015/07/03 职场文书
大学同学聚会感言
2015/07/30 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers