Heim > Web-Frontend > js-Tutorial > Detaillierte Erklärung polymorpher Instanzen in JS

Detaillierte Erklärung polymorpher Instanzen in JS

韦小宝
Freigeben: 2018-01-12 09:52:34
Original
1302 Leute haben es durchsucht

Dieser Artikel stellt Ihnen den Polymorphismus in JS ausführlich anhand von Beispielcode vor. Freunde, die sich für JS interessieren, sollten sich diesen Artikel ansehen, um eine detaillierte Erklärung der Polymorphismusbeispiele in JS zu erhalten.

Polymorphismus ist in ObjektorientierteProgrammiersprache ist 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)
Nach dem Login kopieren

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 Kopplung beseitigen Beziehung zwischen Typen.
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' ); // 输出:开始渲染百度地图
Nach dem Login kopieren

Wie Sie sehen können, behält die RenderMap-Funktion derzeit ein gewisses Maß an Flexibilität bei, diese Flexibilität ist jedoch sehr fragil. Sobald sie durch eine Soso-Karte ersetzt werden muss, Die RenderMap-Funktion muss zweifellos geändert werden. Fügen Sie weiterhin bedingte Verzweigungsanweisungen hinzu.

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 ); // 输出:开始渲染百度地图
Nach dem Login kopieren

Später haben wir die Unterstützung für Tencent Maps hinzugefügt und diese Funktion schnell geändert Ändern des Originalcodes:

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

Polymorphe Technologie ist von entscheidender Bedeutung, und viele Entwurfsmuster werden durch geschickten Einsatz von Polymorphismus implementiert. Das Obige sind Beispiele für Polymorphismus in JS, die der Herausgeber vorgestellt hat. Ich hoffe, es wird Ihnen hilfreich sein!

Verwandte Empfehlungen:

JS klicken Sie auf den Link, um zur Anzeige versteckter Inhalte zu wechseln

Mehrere grundlegende Datentypen in der JS-Entwicklung

JS implementiert die Klickzyklusumschaltung, um Inhalte anzuzeigen

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage