웹 프론트엔드 JS 튜토리얼 JavaScript 고급 프로그래밍 읽기 노트 (14) js 상속 메커니즘 구현_javascript 기술

JavaScript 고급 프로그래밍 읽기 노트 (14) js 상속 메커니즘 구현_javascript 기술

May 16, 2016 pm 05:51 PM
상속 메커니즘

상속

상속은 객체 지향 언어의 필수 기능입니다. 즉, 한 클래스가 다른 클래스의 메서드와 속성을 재사용할 수 있습니다. JavaScript에서 상속을 구현하는 방법에는 객체 가장, call(), apply(), 프로토타입 체인, 하이브리드 메서드 등 5가지 주요 방법이 있습니다.

아래에 소개합니다.

객체 가장

원리: 생성자는 this 키워드를 사용하여 모든 속성과 메서드에 값을 할당합니다. 생성자는 단지 함수이기 때문에 ClassA의 생성자를 ClassB의 메서드로 만든 다음 호출할 수 있습니다. ClassB는 ClassA의 생성자에 정의된 속성과 메서드를 받습니다.

예:
코드 복사 코드는 다음과 같습니다.

함수 ClassA(sColor ){
this.color=sColor;
this.sayColor=function(){
alert(this.color)
}
}

함수 ClassB(sColor ,sName){
this.newMethod=ClassA;
this.newMethod(sColor);
delete this.newMethod;

this.name=sName; .sayName= function(){
alert(this.name);
}
}

전화:

코드 복사 코드는 다음과 같습니다.
var objb=new ClassB("blue","Test")
objb.sayColor() ;//
blueobjb.sayName(); // Test 


참고: ClassA에 대한 참조는 여기서 삭제해야 합니다. 그렇지 않으면 나중에 정의된 새 메서드와 속성이 관련 속성을 덮어씁니다. 그리고 슈퍼클래스의 메소드. 이런 방식으로 다중 상속이 가능합니다.


call() 메소드
객체 가장 메소드의 인기로 인해 3판에서는 두 가지 새로운 메소드 call() 및 apply(가 Function 객체에 추가되었습니다. ECMAScript) 메소드를 사용하여 유사한 기능을 수행합니다.

call() 메소드의 첫 번째 매개변수는 this의 객체로 사용되며, 다른 매개변수는 함수 자체에 직접 전달됩니다. 예:

코드 복사 코드는 다음과 같습니다.
function sayColor(sPrefix,sSuffix) {
alert(sPrefix this.color sSuffix)

var obj=new Object()
obj.color="red"// 출력 색상은 빨간색입니다. 정말 좋은 색상입니다.
sayColor.call(obj,"The color is ",", 정말 멋진 색상입니다.")


이 방법을 사용하세요. 상속을 구현하려면 처음 세 줄의 할당, 호출 및 삭제 코드를 바꾸십시오.



코드 복사
코드는 다음과 같습니다. 다음과 같습니다: function ClassB(sColor,sName){ //this.newMethod=ClassA
//this.newMethod(sColor)
//delete this .newMethod;
ClassA.call(this,sColor);

this.name=sName;
this.sayName=function(){
alert(this.name); >}
}




apply() 메서드

apply() 메서드는 call() 메서드와 유사하지만 다음 점만 다릅니다. 두 번째 매개 변수는 apply() 메서드에 있으며 배열이 전달됩니다.


코드 복사
코드는 다음과 같습니다. function sayColor(sPrefix,sSuffix){ alert (sPrefix this.color sSuffix)
var obj=new Object()
obj.color="red"; 색상은 빨간색입니다. 정말 좋은 색상입니다.
sayColor.apply(obj,new Array("색상은 ",", 정말 좋은 색상입니다."))


사용하세요. 상속을 구현하려면 처음 세 줄의 할당, 호출 및 삭제 코드만 바꾸면 됩니다.




코드 복사

코드는 다음과 같습니다.
this.sayName=function() >경고(이.이름);
}
}


call()과의 한 가지 차이점은 슈퍼 클래스의 매개변수 순서가 하위 클래스의 매개변수 순서와 정확히 동일한 경우 인수를 두 번째 매개변수로 사용할 수 있다는 것입니다.

프로토타입 체인

이러한 형태의 상속은 원래 ECMAScript의 프로토타입 체인에 사용되었습니다. Prototype 객체의 모든 속성과 메서드는 해당 클래스의 모든 인스턴스에 전달됩니다. 프로토타입 체인은 이 기능을 활용하여 상속 메커니즘을 구현합니다.

프로토타입 체인을 사용하여 상속을 구현하는 예:
코드 복사 코드는 다음과 같습니다.

function ClassA(){
}

ClassA.prototype.color="red";
ClassA.prototype.sayColor=function(){
alert(this .color);
};

function ClassB(){
}

ClassB.prototype=new ClassA(); ClassA 생성자를 호출하면 매개변수가 전달되지 않습니다. 생성자에 매개변수가 없는지 확인하는 것이 프로토타입 체인의 표준 관행입니다.

하이브리드 방식

이 방식은 객체 가장과 프로토타입 체이닝 방식을 혼합한 방식입니다. 예:


코드 복사 코드는 다음과 같습니다. function ClassA(sColor){
this .color=sColor
}
ClassA.prototype.sayColor(){
alert(this.color)
}

function ClassB(sColor, sName){
ClassA.call(this,sColor);
this.name=sName;
}

ClassB.prototype=new ClassA(); sayName=function (){
alert(this.name);
}


호출 예시:



코드 복사
코드는 다음과 같습니다. var objb=new ClassB("red","test") objb.sayColor();// 출력 red
objb.sayName();// 출력 테스트


저자: Artwl
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

JavaScript로 문자열 문자를 교체하십시오 JavaScript로 문자열 문자를 교체하십시오 Mar 11, 2025 am 12:07 AM

JavaScript로 문자열 문자를 교체하십시오

사용자 정의 Google 검색 API 설정 자습서 사용자 정의 Google 검색 API 설정 자습서 Mar 04, 2025 am 01:06 AM

사용자 정의 Google 검색 API 설정 자습서

예제 색상 JSON 파일 예제 색상 JSON 파일 Mar 03, 2025 am 12:35 AM

예제 색상 JSON 파일

10 JQuery Syntax Highlighter 10 JQuery Syntax Highlighter Mar 02, 2025 am 12:32 AM

10 JQuery Syntax Highlighter

8 멋진 jQuery 페이지 레이아웃 플러그인 8 멋진 jQuery 페이지 레이아웃 플러그인 Mar 06, 2025 am 12:48 AM

8 멋진 jQuery 페이지 레이아웃 플러그인

자신의 Ajax 웹 응용 프로그램을 구축하십시오 자신의 Ajax 웹 응용 프로그램을 구축하십시오 Mar 09, 2025 am 12:11 AM

자신의 Ajax 웹 응용 프로그램을 구축하십시오

' this ' 자바 스크립트로? ' this ' 자바 스크립트로? Mar 04, 2025 am 01:15 AM

' this ' 자바 스크립트로?

10 JavaScript & JQuery MVC 자습서 10 JavaScript & JQuery MVC 자습서 Mar 02, 2025 am 01:16 AM

10 JavaScript & JQuery MVC 자습서

See all articles