JavaScript 기반의 상속 메커니즘 생성자 및 프로토타입 체인 하이브리드 method_javascript 기술 사용에 대한 자세한 설명-JS 튜토리얼-php.cn

JavaScript 기반의 상속 메커니즘 생성자 및 프로토타입 체인 하이브리드 method_javascript 기술 사용에 대한 자세한 설명

WBOY

풀어 주다： 2016-05-16 17:34:37

원래의

1075명이 탐색했습니다.

생성자 및 프로토타입 구현 상속의 결함

먼저 생성자 및 프로토타입 체인 상속 방법의 단점을 분석해 보겠습니다.

생성자(객체 가장)의 주요 문제점은 생성자 메서드를 사용해야 하며 프로토타입을 통해 정의된 메서드를 상속할 수 없다는 점입니다. 이는 최선의 선택이 아닙니다. 그러나 프로토타입 체인을 사용하는 경우 매개변수화된 생성자를 사용할 수 없습니다. 개발자는 어떻게 선택하나요? 대답은 간단합니다. 둘 다 사용하세요.

생성자 프로토타입 혼합 방법

이 상속 방법은 프로토타입을 사용하는 대신 생성자를 사용하여 클래스를 정의합니다. 클래스를 만드는 가장 좋은 방법은 생성자를 사용하여 속성을 정의하고 프로토타입을 사용하여 메서드를 정의하는 것입니다. 이 방법은 객체를 사용하여 생성자의 속성을 상속하는 척하고 프로토타입 체인을 사용하여 프로토타입 객체의 메서드를 상속하는 상속 메커니즘에도 적용됩니다. 이 두 가지 방법을 사용하여 이전 예제를 다시 작성합니다. 코드는 다음과 같습니다.

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

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

ClassA.prototype.sayColor = 함수() {
경고(this.color);
};

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

ClassB.prototype = 새로운 ClassA();

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

이 예에서는 상속 메커니즘이 두 줄로 강조 표시됩니다. 코드 파란색 구현. 강조 표시된 첫 번째 코드 줄에서는 ClassB 생성자에서 개체가 ClassA 클래스의 sColor 속성을 상속하는 척하는 데 사용됩니다. 강조 표시된 두 번째 코드 줄에서는 ClassA 클래스의 메서드가 프로토타입 체인을 사용하여 상속됩니다. 이 하이브리드 접근 방식은 프로토타입 체인을 사용하기 때문에 instanceof 연산자는 여전히 올바르게 작동합니다.

다음 예에서는 이 코드를 테스트합니다.

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

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