JavaScript 프로토타입 체인 프로토타입 속성 및 메소드 인스턴스에 대한 자세한 설명

프로토타입 객체의 모든 속성과 메서드는 해당 클래스의 모든 인스턴스에 전달됩니다. 프로토타입 체인은 이 기능을 사용하여 상속 메커니즘을 구현합니다. 이전 예제의 클래스를 프로토타입 메서드를 사용하여 재정의하면 다음과 같은 형식이 됩니다.

function ClassA() {
}
ClassA.prototype.color = "blue";
ClassA.prototype.sayColor = function () {
    alert(this.color);
};
function ClassB() {
}
ClassB.prototype = new ClassA();

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

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

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

function ClassB() {
}
ClassB.prototype = new 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.prototype입니다. 빈 객체 {}, {}는 당연히 ClassB.prototype과 다릅니다.

위 내용은 JavaScript 프로토타입 체인 프로토타입 속성 및 메소드 인스턴스에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!