Detailed explanation of the use of polymorphism in JS

This time I will bring you a detailed explanation of the use of polymorphism in JS. What are the precautions for the use of polymorphism in JS. The following is a practical case, let's take a look.

Polymorphism is very important in Object-orientedprogramming languages. 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" from "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 connect to our application. 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 will undoubtedly have to be modified and continue to pile conditional branch statements into it.

Let’s abstract the same part of the program first, which is to display a 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 this function without 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.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Multi-column layout implementation method in front-end development

Using jquery and ajax for data interaction

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