Detaillierte Erklärung der Verwendung von Polymorphismus in JS

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Verwendung von Polymorphismus in JS geben. Was sind die Vorsichtsmaßnahmen für die Verwendung von Polymorphismus in JS?

Polymorphismus ist in objektorientiertenProgrammiersprachen sehr wichtig. In JAVA wird Polymorphismus durch Vererbung erreicht. Wie folgt:

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)

Die Idee des Polymorphismus besteht tatsächlich darin, „was zu tun ist“ und „wer es tun soll“ zu trennen. Um dies zu erreichen, müssen wir letztendlich zunächst die Kopplungsbeziehung zwischen Typen beseitigen.
In Java kann Polymorphismus durch Aufwärtswandlung erreicht werden. Die Variablen von Javascript sind während der Laufzeit variabel. Ein js-Objekt kann sowohl ein Objekt vom Typ Duck als auch ein Objekt vom Typ Chicken darstellen, was bedeutet, dass JavaScript-ObjektPolymorphismus inhärent ist.

Die grundlegendste Funktion des Polymorphismus besteht darin, prozedurale bedingte Verzweigungsanweisungen zu eliminieren, indem sie in Objektpolymorphismus umgewandelt werden.

Angenommen, wir möchten eine Kartenanwendung schreiben. Es gibt zwei optionale Karten-API-Anbieter, mit denen wir eine Verbindung zu unserer Anwendung herstellen können. Derzeit wählen wir Google Maps. Die Show-Methode wird in der Google Maps-API bereitgestellt, die für die Anzeige der gesamten Karte auf der Seite verantwortlich ist. Der Beispielcode lautet wie folgt:

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

Es ist ersichtlich, dass die RenderMap-Funktion derzeit zwar ein gewisses Maß an Flexibilität beibehält, diese Flexibilität jedoch sehr fragil ist. Sobald sie durch eine Soso-Karte ersetzt werden muss, muss die RenderMap-Funktion zweifellos geändert werden und weiterhin bedingte Verzweigungsanweisungen stapeln hinein.

Lassen Sie uns zunächst denselben Teil des Programms abstrahieren, nämlich die Anzeige einer Karte:

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

Danach haben wir Unterstützung für Tencent Maps hinzugefügt, sodass wir diese Funktion schnell implementieren können, ohne den Originalcode zu ändern:

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

Die polymorphe Technologie ist von entscheidender Bedeutung, und viele Entwurfsmuster werden durch den geschickten Einsatz von Polymorphismus implementiert.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Methode zur Implementierung eines mehrspaltigen Layouts in der Front-End-Entwicklung

Verwendung von JQuery und Ajax für Daten Interaktion

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung der Verwendung von Polymorphismus in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!