JS의 다형성 사용에 대한 자세한 설명

이번에는 JS에서 다형성을 사용하는 방법에 대해 자세히 설명하겠습니다. JS에서 다형성을 사용할 때 주의사항은 무엇인가요?

다형성은 객체 지향프로그래밍 언어에서 매우 중요합니다. JAVA에서는 상속을 통해 다형성이 달성됩니다. 다음과 같습니다:

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)

다형성의 개념은 실제로 "무엇을 할 것인가"와 "누가 할 것인가"를 분리하는 것입니다. 이를 달성하려면 최종 분석에서 먼저 유형 간의 결합 관계를 제거해야 합니다.
Java에서는 상향 캐스팅을 통해 다형성을 구현할 수 있습니다. javascript의 변수는 런타임 중에 가변적입니다. js 객체는 Duck 유형 객체와 Chicken 유형 객체를 모두 나타낼 수 있습니다. 이는 JavaScript 객체의 다형성이 생물학적인 모든 것과 관련되어 있음을 의미합니다.

다형성의 가장 기본적인 기능은 절차적 조건 분기문을 객체 다형성으로 변환하여 제거하는 것입니다.

지도 애플리케이션을 작성한다고 가정해 보겠습니다. 애플리케이션에 연결할 수 있는 두 가지 선택적 지도 API 제공자가 있습니다. 현재 우리는 Google Maps를 선택했습니다. show 메소드는 페이지에 전체 지도를 표시하는 역할을 하는 Google Maps API에서 제공됩니다. 샘플 코드는 다음과 같습니다.

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

현재 renderMap 함수가 어느 정도의 유연성을 유지하고 있지만 이 유연성은 매우 취약하다는 것을 알 수 있습니다. 일단 Soso 맵으로 교체해야 하면 renderMap 함수는 의심할 여지없이 수정되어야 하며 계속해서 조건부 분기 문을 쌓아야 합니다. 그것에.

지도를 표시하는 프로그램의 동일한 부분을 먼저 추상화해 보겠습니다.

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

그 후 Tencent Maps에 대한 지원을 추가하여 원본 코드를 수정하지 않고도 이 기능을 빠르게 구현할 수 있습니다:

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

다형성 기술은 매우 중요하며 다형성을 영리하게 사용하여 많은 디자인 패턴을 구현합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

프런트 엔드 개발에서 다중 열 레이아웃 구현 방법

데이터 상호 작용을 위해 jquery 및 ajax 사용

위 내용은 JS의 다형성 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!