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

登录后复制

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

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

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

使用jquery与ajax进行数据交互

以上就是JS中多态使用详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2771367.html

(0)
上一篇 2025年3月8日 12:55:01
下一篇 2025年3月8日 12:55:26

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vue.js渐进式框架使用详解

    这次给大家带来vue.js渐进式框架使用详解,vue.js渐进式框架使用详解的注意事项有哪些,下面就是实战案例,一起来看一下。 Vue.js是一套构建用户界面(user interface)的渐进式框架。与其他重量级框架不同的是,Vue 从…

    编程技术 2025年3月8日
    200
  • JS使用indexOf()方法实现数组去重

    这次给大家带来js使用indexof()方法实现数组去重,js使用indexof()方法实现数组去重的注意事项有哪些,下面就是实战案例,一起来看一下。 var arr = [‘abc’,’abcd’,’sss’,’2′,’d’,’t’,’2…

    编程技术 2025年3月8日
    200
  • 使用JS实现表单验证(附代码)

    这次给大家带来使用JS实现表单验证(附代码),使用JS实现表单验证的注意事项有哪些,下面就是实战案例,一起来看一下。 表单验证 function checkusername() { var myform = document.getElem…

    编程技术 2025年3月8日
    200
  • vue-router的使用详解

    这次给大家带来vue-router的使用详解,vue-router使用的注意事项有哪些,下面就是实战案例,一起来看一下。 vue route demo Hello App! <!– 默认会被渲染成一个 “ 标签 –> Go…

    编程技术 2025年3月8日
    200
  • 用JS的定时器实现进度条

    这次给大家带来用JS的定时器实现进度条,用JS的定时器实现进度条的注意事项有哪些,下面就是实战案例,一起来看一下。 Javascript 中的定时器 window度一线下面的方法 window.setInterval() 启动定时器 1.s…

    编程技术 2025年3月8日
    200
  • JS上传文件时显示进度条

    这次给大家带来js上传文件时显示进度条,js上传文件时显示进度条的注意事项有哪些,下面就是实战案例,一起来看一下。 在php.ini修改需要的大小: upload_max_filesize = 8M    post_max_size = 1…

    编程技术 2025年3月8日
    200
  • JS实现去重的随机数生成

    这次给大家带来JS实现去重的随机数生成,JS实现去重随机数生成的注意事项有哪些,下面就是实战案例,一起来看一下。 1.实验前准备: Math函数的理解 数组方法的理解 2.实验操作: 随机数生成 body{font-size: 20px;}…

    编程技术 2025年3月8日
    200
  • 用AngualrJs使用定时器

    这次给大家带来用AngualrJs使用定时器,用AngualrJs使用定时器的注意事项有哪些,下面就是实战案例,一起来看一下。 angualrJs清除定时器爬坑之路: 今天发现一个奇怪问题,放在自定义指令里边的定时器竟然在页面跳转之后,在另…

    编程技术 2025年3月8日
    200
  • TabBarIOS使用详解

    这次给大家带来TabBarIOS使用详解,TabBarIOS使用的注意事项有哪些,下面就是实战案例,一起来看一下。 import React, { Component } from ‘react’;import { StyleSheet, …

    编程技术 2025年3月8日
    200
  • ReactJS操作表单选择

    这次给大家带来ReactJS操作表单选择,ReactJS操作表单选择的注意事项有哪些,下面就是实战案例,一起来看一下。 需求是对列表实现单选,反选和多选,全部清除的操作 …… this.state = { //初始化空数组,表示已经…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论