JS中的多態(tài)實(shí)例詳解
多態(tài)在面向?qū)ο缶幊陶Z言中是十分重要的。在JAVA中是通過繼承來得到多態(tài)的效果。如下:
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)
多態(tài)的思想實(shí)際上是把“做什么”和“誰去做”分離開來,要實(shí)現(xiàn)這一點(diǎn),歸根結(jié)底先要消除類型之間的耦合關(guān)系。
在Java中,可以通過向上轉(zhuǎn)型來實(shí)現(xiàn)多態(tài)。而javascript的變量在運(yùn)行期是可變的,一個(gè)js對(duì)象既可以表示既可以表示Duck類型的對(duì)象,又可以表示Chicken類型的對(duì)象,這意味著JavaScript對(duì)象的多態(tài)性是與生俱來的。
多態(tài)最根本的作用就是通過把過程化的條件分支語句轉(zhuǎn)化為對(duì)象的多態(tài)性, 從而消除這些條件分支語句。
假設(shè)我們要編寫一個(gè)地圖應(yīng)用,現(xiàn)在有兩家可選的地圖API提供商供我們接入自己的應(yīng) 用。目前我們選擇的是谷歌地圖,谷歌地圖的API中提供了show方法,負(fù)責(zé)在頁面上展 示整個(gè)地圖。示例代碼如下:
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函數(shù)目前保持了一定的彈性,但這種彈性是很脆弱的,一旦需要替換成搜搜地圖,那無疑必須得改動(dòng)renderMap函數(shù),繼續(xù)往里面堆砌條件分支語句。
我們還是先把程序中相同的部分抽象出來,那就是顯示某個(gè)地圖:
var renderMap = function( map ){ if ( map.show instanceof Function ){ map.show(); } }; renderMap( googleMap ); // 輸出:開始渲染谷歌地圖 renderMap( baiduMap ); // 輸出:開始渲染百度地圖
之后我們又新增了騰訊地圖的支持,那我們很快變可以實(shí)現(xiàn)這個(gè)功能,而且不必修改原代碼:
var TencentMap = { show: function(){ console.log( '開始渲染騰訊地圖' ); } } renderMap( sosoMap ); // 輸出:開始渲染騰訊地圖
多態(tài)技術(shù)至關(guān)重要,很多設(shè)計(jì)模式都是巧妙利用多態(tài)來實(shí)現(xiàn)。
總結(jié)
以上所述是小編給大家介紹的JS中的多態(tài)實(shí)例,希望對(duì)大家有所幫助!
相關(guān)文章
JS利用Canvas實(shí)現(xiàn)文字水印和圖片水印合成
這篇文章主要為大家詳細(xì)介紹了JavaScript如何利用Canvas實(shí)現(xiàn)文字水印和圖片水印合成的效果,文中的示例代碼講解詳細(xì),需要的小伙伴可以參考一下2022-11-11Bootstrap 網(wǎng)站實(shí)例之單頁營銷網(wǎng)站
這篇文章主要介紹了Bootstrap 網(wǎng)站實(shí)例之單頁營銷網(wǎng)站的相關(guān)資料,本文給大家介紹的非常詳細(xì)具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10JS隨拖拽速度設(shè)置傾斜角度的實(shí)現(xiàn)代碼
這篇文章主要給大家介紹了JS如何隨拖拽速度設(shè)置傾斜角度,文中有詳細(xì)的代碼講解,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,感興趣的小伙伴可以自己動(dòng)手嘗試一下2023-09-09bootstrap時(shí)間控件daterangepicker使用方法及各種小bug修復(fù)
這篇文章主要介紹了bootstrap時(shí)間控件daterangepicker使用方法,及各種小bug修復(fù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10JavaScript給url網(wǎng)址進(jìn)行encode編碼的方法
這篇文章主要介紹了JavaScript給url網(wǎng)址進(jìn)行encode編碼的方法,實(shí)例分析了javascript中encodeURIComponent函數(shù)的使用技巧,需要的朋友可以參考下2015-03-03使用javascript實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡切換
本文主要介紹了使用javascript實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡切換的效果,代碼非常的簡(jiǎn)單,兼容性十分棒,這里推薦給小伙伴們。2015-01-01layui加載數(shù)據(jù)顯示loading加載完成loading消失的實(shí)例代碼
今天小編就為大家分享一篇layui加載數(shù)據(jù)顯示loading加載完成loading消失的實(shí)例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09