상속 메커니즘_javascript 기술의 JavaScript 구현을 기반으로 하는 프로토타입 체이닝에 대한 자세한 설명

프로토타입을 사용하여 이전 예제의 클래스를 재정의하면 다음과 같은 형태가 됩니다.

코드를 복사하세요 코드는 다음과 같습니다.

function ClassA() {
}

ClassA.prototype.color = "blue";
ClassA.prototype.sayColor = 함수() {
Alert(this.color);
};

함수 ClassB() {
}

ClassB.prototype = new ClassA();

프로토타입 접근 방식의 마법은 코드의 마지막 줄에 있습니다. 여기서는 ClassB의 프로토타입 속성을 ClassA의 인스턴스로 설정합니다. 이는 ClassA의 모든 속성과 메서드를 원하지만 ClassB의 프로토타입 속성에 하나씩 추가하고 싶지 않기 때문에 흥미롭습니다. ClassA 인스턴스를 프로토타입 속성에 할당하는 것보다 더 좋은 방법이 있습니까?

참고: 매개변수를 전달하지 않고 ClassA의 생성자를 호출합니다. 이는 프로토타입 체인의 표준 관행입니다. 생성자에 매개변수가 없는지 확인하세요.

객체 가장과 마찬가지로 서브클래스의 모든 속성과 메서드는 프로토타입 속성이 할당된 후에 나타나야 합니다. 이전에 할당된 모든 메서드가 삭제되기 때문입니다. 왜? 프로토타입 속성이 새 객체로 대체되므로 새 메서드가 추가된 원본 객체는 소멸됩니다. 따라서 ClassB 클래스에 name 속성과 sayName() 메소드를 추가하는 코드는 다음과 같습니다.

코드를 복사하세요 코드는 다음과 같습니다:

function ClassB() {
}

ClassB.prototype = 새로운 ClassA();

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

예 다음 예제를 실행하여 이 코드를 테스트합니다.

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

var objA = new ClassA();
var objB = new ClassB();
objA.color = "blue";
objB.color = "red";
objB.name = " John";
objA.sayColor();
objB.sayColor();
objB.sayName();

또한, 프로토타입 체인에서 instanceof 연산자 또한 매우 독특하게 작동합니다. instanceof는 ClassB의 모든 인스턴스에 대해 ClassA와 ClassB 모두에 대해 true를 반환합니다. 예:

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

var objB = new ClassB( );
alert(objB instanceof ClassA); //"true" 출력
alert(objB instanceof ClassB); //"true" 출력

ECMAScript의 약한 유형 , 이것은 매우 유용한 도구이지만 개체 가장을 사용할 때는 사용할 수 없습니다. 그런데 서브클래스의 프로토타입을 직접 재할당하기 때문에 다음과 같은 상황이 발생합니다.

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

console.log(objB.__proto__===objB.constructor.prototype) //false

ClassB 프로토타입 체인의 프로토타입 속성이 객체에 의해 재정의되었기 때문입니다. 다른 수업의 . 출력 결과에는 objB.__proto__가 여전히 objB.constructor.prototype이 아닌 ClassB.prototype을 가리키는 것으로 표시됩니다. Person.prototype에 할당된 것은 객체 리터럴 new ClassA() 인스턴스입니다. 객체 리터럴 메서드를 사용하여 정의된 객체의 생성자(생성자)는 루트 생성자 Object. 빈 객체 {}, {}는 당연히 ClassB.prototype과 다릅니다.