Detailed explanation of polymorphic instances in JS

This article introduces polymorphism in JS to you in detail through example code. Friends who are interested in JS should take a look at this article for a detailed explanation of polymorphism examples in JS

Polymorphism inObject-orientedProgramming language is very important. In JAVA, polymorphism is achieved through inheritance. As follows:

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)

The idea of ​​polymorphism is actually to separate "what to do" and "who to do it". To achieve this, in the final analysis, we must first eliminate the coupling relationship between types.
In Java, polymorphism can be achieved through upward transformation. The javascript variables are variable during runtime. A js object can represent both a Duck type object and a Chicken type object, which means JavaScript Object## The polymorphism of # is inherent.

The most fundamental function of polymorphism is to eliminate procedural conditional branch statements by converting them into object polymorphism.

Suppose we want to write a map application. There are two optional map API providers for us to access our applications. At present, we choose Google Maps. The show method is provided in the Google Maps API, which is responsible for displaying the entire map on the page. The sample code is as follows:

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

It can be seen that although the renderMap function currently maintains a certain degree of flexibility, this flexibility is very fragile. Once it needs to be replaced with a Soso map, the renderMap function must undoubtedly be changed. Continue to pile conditional branch statements inside.

Let’s abstract the same part of the program first, that is, display a certain map:

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

Later we added support for Tencent Maps, and we will soon be able to implement it This function does not require modifying the original code:

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

Polymorphic technology is crucial, and many

design patterns are realized by clever use of polymorphism. The above are examples of polymorphism in JS introduced by the editor. I hope it will be helpful to you!

Related recommendations:

JS Click the link to switch to display hidden content

##Several basic data types in JS development

JS implements click cycle switching to display content

The above is the detailed content of Detailed explanation of polymorphic instances in JS. For more information, please follow other related articles on the PHP Chinese website!