> 웹 프론트엔드 > JS 튜토리얼 > 상속 메커니즘의 JavaScript 구현을 기반으로 하는 생성자 메소드 객체 가장의 사용에 대한 자세한 설명_기본 지식

상속 메커니즘의 JavaScript 구현을 기반으로 하는 생성자 메소드 객체 가장의 사용에 대한 자세한 설명_기본 지식

WBOY
풀어 주다: 2016-05-16 17:34:20
원래의
1084명이 탐색했습니다.

상속 방법

ECMAScript에는 상속을 구현하는 방법이 여러 가지 있습니다. JavaScript의 상속 메커니즘은 명시적으로 지정되지 않고 모방을 통해 구현되기 때문입니다. 이는 모든 상속 세부 사항이 인터프리터에 의해 완전히 처리되지는 않는다는 것을 의미합니다. 개발자는 자신에게 가장 적합한 상속 방법을 결정할 권리가 있습니다. 가장 원시적인 상속 구현 방법은 객체 가장(Object Impersonation)입니다.

객체 가장

상속을 구현하기 위한 객체 가장의 핵심은 실제로 함수 환경에서 this 키워드를 사용하는 데 달려 있습니다. 원칙은 다음과 같습니다. 생성자는 this 키워드를 사용하여 모든 속성과 메서드에 값을 할당합니다(즉, 클래스 선언의 생성자 메서드 사용). 생성자는 단지 함수이기 때문에 ClassA 생성자를 ClassB의 메서드로 만든 다음 호출할 수 있습니다. ClassB는 ClassA의 생성자에 정의된 속성과 메서드를 받습니다. 예를 들어 ClassA와 ClassB를 다음과 같은 방법으로 정의합니다.

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

function ClassA(sColor) {
this.color = sColor;
this.sayColor = function () {
Alert(this.color);
};
}

function ClassB(sColor) {
}


이 키워드는 생성자가 현재 생성한 객체를 참조합니다. 하지만 이 방법에서는 this가 자신이 속한 개체를 가리킵니다. 원칙은 ClassA를 생성자가 아닌 상속 메커니즘을 설정하는 일반 함수로 사용하는 것입니다. 상속 메커니즘은 다음과 같이 생성자 ClassB를 사용하여 구현할 수 있습니다.
코드 복사 코드는 다음과 같습니다.

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

이 코드에서 ClassA에는 newMethod 메서드가 할당됩니다(함수 이름은 이에 대한 포인터일 뿐임을 기억하세요). 그런 다음 메서드가 호출되어 ClassB 생성자의 sColor 매개 변수를 전달합니다. 코드의 마지막 줄은 ClassA에 대한 참조를 제거하여 나중에 더 이상 호출할 수 없도록 합니다.

모든 새 속성과 새 메서드는 새 메서드에 대한 코드 줄을 제거한 후에 정의해야 합니다. 그렇지 않으면 슈퍼 클래스의 관련 속성과 메서드가 재정의될 수 있습니다.

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

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

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


이전 코드가 유효한지 확인하려면 다음 예제를 실행하면 됩니다.
코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor(); //"blue" 출력
objB.sayColor(); //"red" 출력
objB.sayName(); //"John" 출력

객체 가장 다중 상속 가능

흥미롭게도 개체 가장은 다중 상속을 지원할 수 있습니다. 예를 들어 ClassX와 ClassY라는 두 클래스가 있고 ClassZ가 이 두 클래스를 상속하려는 경우 다음 코드를 사용할 수 있습니다.
코드 복사 코드는 다음과 같습니다.

function ClassZ() {
this.newMethod = ClassX;
this.newMethod();
delete this.newMethod;

this.newMethod = ClassY;
this.newMethod();
delete this.newMethod;
}


두 개의 클래스가 있는 경우 여기에 단점이 있습니다. ClassX ClassY와 이름이 같은 속성이나 메서드의 경우 ClassY의 우선 순위가 높습니다. 이후 클래스에서 상속되기 때문입니다. 이 사소한 문제 외에도 개체 가장을 사용하여 다중 상속 메커니즘을 구현하는 것은 쉽습니다.

이 상속 메서드의 인기로 인해 ECMAScript의 세 번째 버전에서는 Function 개체에 call() 및 apply()라는 두 가지 메서드를 추가했습니다. 나중에 상속을 구현하기 위해 파생된 많은 메서드가 실제로 call() 및 apply()를 기반으로 구현되었습니다.

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