> 웹 프론트엔드 > JS 튜토리얼 > JS의 다형성 인스턴스에 대한 자세한 설명

JS의 다형성 인스턴스에 대한 자세한 설명

韦小宝
풀어 주다: 2018-01-12 09:52:34
원래의
1311명이 탐색했습니다.

이 기사에서는 예제 코드를 통해 JS의 다형성을 자세히 소개합니다. JS에 관심이 있는 친구들은 이 기사에서 JS의 다형성 예제에 대한 자세한 설명을 살펴보시기 바랍니다.

다형성 in객체 지향프로그래밍 언어 매우 중요합니다. 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 ); // 输出:开始渲染腾讯地图
로그인 후 복사

Polymorphic 기술은 다음과 같습니다. 매우 중요하며 많은 디자인 패턴이 다형성을 영리하게 사용하여 구현됩니다. 위 내용은 편집자가 소개한 JS의 다형성 예시입니다. 도움이 되셨으면 좋겠습니다!

관련 권장 사항:

JS는 링크를 클릭하여 숨겨진 콘텐츠 표시로 전환합니다

JS 개발의 여러 기본 데이터 유형

JS는 클릭 주기 전환을 구현하여 콘텐츠 표시

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿