Explication détaillée de l'utilisation du polymorphisme en JS

Cette fois, je vais vous apporter une explication détaillée de l'utilisation du polymorphisme en JS. Quelles sont les précautions pour utiliser le polymorphisme en JS. Voici des cas pratiques, jetons un coup d'oeil.

Le polymorphisme est très important dans les orientés objetlangages de programmation. En JAVA, le polymorphisme est obtenu par héritage. Comme suit :

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)

L'idée du polymorphisme est en fait de séparer « quoi faire » de « qui faire ». Pour y parvenir, en dernière analyse, il faut d'abord éliminer la relation de couplage entre les types.
En Java, le polymorphisme peut être obtenu grâce à un casting ascendant. Les variables de javascript sont variables lors de l'exécution. Un objet js peut représenter à la fois un objet de type Duck et un objet de type Chicken, ce qui signifie que Objet JavaScriptLe polymorphisme est inhérent.

La fonction la plus fondamentale du polymorphisme est d'éliminer les instructions de branchement conditionnel procédural en les convertissant en polymorphisme objet.

Supposons que nous souhaitions écrire une application cartographique. Il existe deux fournisseurs d'API cartographiques facultatifs permettant de nous connecter à notre application. Actuellement, nous choisissons Google Maps. La méthode show est fournie dans l'API Google Maps, qui se charge d'afficher l'intégralité de la carte sur la page. L'exemple de code est le suivant :

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' ); // 输出：开始渲染百度地图

On voit que même si la fonction renderMap conserve actuellement un certain degré de flexibilité, cette flexibilité est très fragile. Une fois qu'elle devra être remplacée par une carte Soso, la fonction renderMap devra sans doute être modifiée et continuer à empiler des instructions de branchement conditionnelles. dedans.

Faisons d'abord abstraction de la même partie du programme, qui consiste à afficher une carte :

var renderMap = function( map ){
if ( map.show instanceof Function ){
map.show();
}
};
renderMap( googleMap ); // 输出：开始渲染谷歌地图
renderMap( baiduMap ); // 输出：开始渲染百度地图

Après cela, nous avons ajouté la prise en charge de Tencent Maps, afin que nous puissions rapidement implémenter cette fonction sans modifier le code d'origine :

var TencentMap = {
  show: function(){
console.log( '开始渲染腾讯地图' );
}
}
renderMap( sosoMap ); // 输出：开始渲染腾讯地图

La technologie polymorphe est cruciale, et de nombreux modèles de conception sont mis en œuvre grâce à une utilisation intelligente du polymorphisme.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Méthode d'implémentation de mise en page multi-colonnes dans le développement front-end

Utilisation de jquery et ajax pour les données interaction

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!