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提供者供我們接入自己的應 用。目前我們選擇的是Google地圖，Google地圖的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 ); // 输出：开始渲染腾讯地图

多型技術至關重要，許多設計模式都是巧妙利用多型式來實現。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

前端開發中的多列佈局實作方法

使用jquery與ajax進行資料互動

以上是JS中多型使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！