JavaScript 프로토타입 체인 추가 방법 및 발생하는 문제 분석 예시

프로토타입 체인 상속의 기본 아이디어는 프로토타입 객체가 다른 유형의 인스턴스를 가리키도록 하는 것입니다.

function SuperType() { 
 this.property = true 
} 
SuperType.prototype.getSuperValue = function () { 
 return this.property 
} 
function SubType() { 
 this.subproperty = false 
} 
SubType.prototype = new SuperType() 
SubType.prototype.getSubValue = function () { 
 return this.subproperty 
} 
var instance = new SubType() 
console.log(instance.getSuperValue()) // true

코드는 SuperType과 SubType이라는 두 가지 유형을 정의합니다. SuperType 및 상속 이는 SuperType의 인스턴스를 생성하고 해당 인스턴스를 SubType.prototype에 할당함으로써 달성됩니다.

구현의 핵심은 프로토타입 객체를 다시 작성하고 이를 새로운 유형의 인스턴스로 바꾸는 것입니다. 그러면 SuperType 인스턴스에 존재하는 모든 속성과 메서드가 이제 SubType.prototype에도 존재합니다.

인스턴스를 생성할 때 인스턴스 객체에 인스턴스를 생성한 프로토타입을 가리키는 내부 포인터가 있고 여기서 SubType.prototype = new SuperType() 코드도 인스턴스를 생성한다는 것을 알고 있습니다. SubType.prototype에서 SubType.prototype을 SuperType과 연결하는 내부 포인터입니다.

그래서 인스턴스는 SubType의 프로토타입을 가리키고 SubType의 프로토타입은 SuperType의 프로토타입을 가리킵니다. 그런 다음 인스턴스가 getSuperValue() 메서드를 호출하면 이 체인을 따라 계속 검색됩니다.

메서드 추가

SubType 프로토타입에 메서드를 추가할 때 상위 클래스도 동일한 이름을 갖는 경우 SubType은 재생성 목적을 달성하기 위해 이 메서드를 재정의합니다. 하지만 이 메서드는 여전히 상위 클래스에 존재합니다.

위에서 언급한 것처럼 인스턴스를 통한 상속은 본질적으로 다시 리터럴 형식으로 추가할 수 없으므로 리터럴 형식으로 추가할 수 없다는 점을 기억하세요. 상위 클래스이므로 프로토타입 체인이 잘립니다.

function SuperType() { 
 this.property = true 
} 
SuperType.prototype.getSuperValue = function () { 
 return this.property 
} 
function SubType() { 
 this.subproperty = false 
} 
SubType.prototype = new SuperType() 
SubType.prototype = { 
 getSubValue:function () { 
 return this.subproperty 
 } 
} 
var instance = new SubType() 
console.log(instance.getSuperValue()) // error

Problems

단순히 프로토타입 체인 상속을 사용하면 주요 문제는 참조 유형 값을 포함하는 프로토타입에서 발생합니다.

function SuperType() { 
 this.colors = ['red', 'blue', 'green'] 
} 
function SubType() { 
} 
SubType.prototype = new SuperType() 
var instance1 = new SubType() 
var instance2 = new SubType() 
instance1.colors.push('black') 
console.log(instance1.colors) // ["red", "blue", "green", "black"] 
console.log(instance2.colors) // ["red", "blue", "green", "black"]

SuperType 생성자는 색상 속성을 정의합니다. SubType이 프로토타입 체인을 통해 상속되면 이 속성은 SubType.prototype.colors가 특별히 생성된 것처럼 SubType.prototype에 나타나므로 SubType의 모든 인스턴스가 모두 생성됩니다. 이 속성을 공유하므로, 인스턴스1이 색상의 참조 유형 값을 수정하면 인스턴스2에도 반영됩니다.

위 내용은 JavaScript 프로토타입 체인 추가 방법 및 발생하는 문제 분석 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!