Explication détaillée des instances polymorphes dans JS-js tutoriel-php.cn

Explication détaillée des instances polymorphes dans JS

韦小宝

Libérer： 2018-01-12 09:52:34

original

1303 Les gens l'ont consulté

Cet article vous présente en détail le polymorphisme dans JS à travers un exemple de code. Les amis intéressés par JS devraient jeter un œil à cet article pour une explication détaillée des exemples de polymorphisme dans JS

Le polymorphisme est dans langage de programmation orienté objet est très important. 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)

Copier après la connexion

L'idée du polymorphisme est en fait de séparer « quoi faire » et « qui faire le ». Pour y parvenir, en dernière analyse, il faut d'abord éliminer le couplage. relation 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( &#39;开始渲染谷歌地图&#39; );
}
};
var renderMap = function(){
googleMap.show();
};
renderMap(); // 输出：开始渲染谷歌地图
var googleMap = {
show: function(){
console.log( &#39;开始渲染谷歌地图&#39; );
}
};
var baiduMap = {
show: function(){
console.log( &#39;开始渲染百度地图&#39; );
}
};
var renderMap = function( type ){
if ( type === &#39;google&#39; ){
googleMap.show();
}else if ( type === &#39;baidu&#39; ){
baiduMap.show();
}
};
renderMap( &#39;google&#39; ); // 输出：开始渲染谷歌地图
renderMap( &#39;baidu&#39; ); // 输出：开始渲染百度地图

Copier après la connexion

Comme vous pouvez le constater, bien que la fonction renderMap conserve actuellement un certain degré de flexibilité, cette flexibilité est très fragile Une fois qu'elle doit être remplacée par une carte Soso, le renderMap doit sans aucun doute être modifié. Fonction, continuez à empiler les instructions de branche conditionnelles à l'intérieur.

Faisons d'abord abstraction de la même partie du programme, c'est-à-dire affichons une certaine carte :

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

Copier après la connexion

Plus tard, nous avons ajouté la prise en charge de Tencent Maps, et nous avons rapidement modifié cette fonction. sans modifier le code original :

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

Copier après la connexion

La technologie polymorphe est cruciale, et de nombreux

modèles de conception sont implémentés grâce à une utilisation intelligente du polymorphisme. Les exemples ci-dessus sont des exemples de polymorphisme en JS introduits par l'éditeur. J'espère que cela vous sera utile !

Recommandations associées :

JS cliquez sur le lien pour basculer vers l'affichage du contenu caché

Plusieurs types de données de base dans le développement JS

JS implémente le changement de cycle de clic pour afficher le contenu

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!