Javascript 매개변수가 없고 매개변수화된 클래스 상속 문제 솔루션_javascript 기술

Javascript 클래스 상속은 프로토타입 체인과 분리될 수 없어야 하지만, 프로토타입 체인을 통해서만 구현된 상속에는 결함이 많습니다.

매개변수 없는 클래스 상속 문제

먼저 A에서 상속받은 B를 구현하는 샘플 코드를 살펴보겠습니다.

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

함수 A() {
}
A.prototype.a1 = function() { };

함수 B() {
}
B.prototype = new A();
B.prototype.b1 = function() { };

var b = new B();
Alert(b.constructor == A); // true
Alert(b.constructor == B); // false

이 코드의 주요 문제점은 다음과 같습니다.

1. A는 B의 프로토타입으로 인스턴스화되어야 합니다. 이때 A의 생성자가 실행됩니다. 그러나 객체 지향 규칙에 따라 B를 인스턴스화하기 전에 B의 생성자와 해당 상위 클래스 A를 실행하면 안 됩니다.

2. B의 프로토타입을 변경하여 b.constructor가 B가 아닌 A가 되었습니다.

매개변수 클래스 상속에 문제가 있습니다

A와 B에 두 개의 문자열 매개변수 s1과 s2가 있다고 가정합니다. A는 두 문자열의 전체 길이를 계산합니다. B는 s1과 s2를 매개변수로 사용하여 A를 직접 호출합니다.

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

함수 A(s1, s2) {
​this.totalLength = s1.length s2.length;
}
A.prototype.a1 = function() {　
};

함수 B(s1, s2) {
}
B.prototype = new A();
B.prototype.b1 = function() {
};

new B("ab", "123");

보시다시피 이 코드에서는 s1과 s2를 A에 전달할 방법이 없으며 A를 B의 프로토타입으로 인스턴스화할 때 매개 변수가 없기 때문에 예외가 발생합니다.

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

s1은 정의되지 않았습니다

솔루션

s1과 s2의 범위는 B에만 있습니다. A로 전송하려면 B에서만 작동할 수 있습니다. 이는 함수의 적용 방법을 사용하여 수행할 수 있습니다.

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

함수 B(s1, s2) {
A.적용(this, 인수);
경고(this.totalLength);
}

다음 질문은 A의 메소드를 B의 프로토타입에 추가하는 방법입니다. 이것은 어렵지 않습니다. A.prototype을 탐색하고 해당 메서드를 B.prototype에 복사하면 됩니다. 동일한 이름을 가진 메서드의 경우 하위 클래스가 자연스럽게 우선순위를 가지므로(오버로딩) 재정의할 수 없습니다.

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

for (A.prototype의 var m) {
​if (!B.prototype[m]) { // 상위 클래스는 하위 클래스의 메서드를 재정의할 수 없습니다
​B.prototype[m] = A.prototype[m];
}
}

후기

C#, Java 등 고급 언어가 다중 상속을 포기한 점을 고려하여 이 기사에서는 단일 상속에 대해서만 설명합니다. 이 글에서 설명하는 상속 방법 역시 jRaiser의 확장으로 작성되어 추후 공개될 예정입니다.