Detailed explanation of the use of polymorphism in JS-JS Tutorial-php.cn

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

Polymorphism is very important inObject-oriented programming 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)

Copy after login

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. Thejavascriptvariables are variable during runtime. A js object can represent both a Duck type object and a Chicken type object, which meansJavaScript 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' ); // 输出：开始渲染百度地图

Copy after login

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

Copy after login

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

Copy after login

Polymorphic technology is crucial, and many

design patternsare 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!