자바스크립트 프로토타입 체인 상속 활용 분석 사례_자바스크립트 능력

이 기사에서는 JavaScript 프로토타입 체인 상속의 사용법을 예제와 함께 분석합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

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

function Shape(){
this.name = '모양'
this.toString = 함수(){
이 이름을 반환하세요.
}
}

함수 TwoDShape(){
this.name = '2D 도형'
}
함수 삼각형(변, 높이){
this.name = '삼각형'
this.side = 쪽
this.높이 = 높이
this.getArea = 함수(){
this.side*this.height/2를 반환합니다.
}; }

/* 상속 */
TwoDShape.prototype = 새 모양()
Triangle.prototype = new TwoDShape();

객체의 프로토타입 속성을 완전히 다시 작성하면 때로는 객체의 생성자 속성에 부정적인 영향을 미칠 수 있습니다.

따라서 관련 상속 관계 설정을 완료한 후에는 이에 따라 이러한 객체의 const 속성을 재설정하는 것이 매우 좋은 습관입니다. 아래와 같이:

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

TwoDShape.prototype.constructor = TwoDShape

Triangle.prototype.constructor = 삼각형;

재작성:

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

function Shape(){}

Shape.prototype.name = '모양'
Shape.prototype.toString = function(){
this.name을 반환하세요.
}

함수 TwoDShape(){}

TwoDShape.prototype = 새 모양()
TwoDShape.prototype.constructor = TwoDShape

TwoDShape.prototype.name = '2D 모양'
;
함수 삼각형(변, 높이){
this.side = 쪽
this.높이 = 높이
}

Triangle.prototype = 새로운 TwoDShape
Triangle.prototype.constructor = 삼각형

Triangle.prototype.name = '삼각형'
; Triangle.prototype.getArea = function(){
return this.side*this.height/2; }

다시 작성(값 대신 참조로 전달):

코드 복사 코드는 다음과 같습니다.function Shape(){}

Shape.prototype.name = '모양'
Shape.prototype.toString = function(){
this.name을 반환하세요.
}

함수 TwoDShape(){}

TwoDShape.prototype = Shape.prototype
TwoDShape.prototype.constructor = TwoDShape

TwoDShape.prototype.name = '2D 모양'
;
함수 삼각형(변, 높이){
this.side = 쪽
this.높이 = 높이
}

Triangle.prototype = TwoDShape.prototype
Triangle.prototype.constructor = 삼각형

Triangle.prototype.name = '삼각형'
; Triangle.prototype.getArea = function(){
return this.side*this.height/2; }


이 방법은 효율성을 향상시키지만 값이 아닌 참조로 전달되므로 "상위 개체"의 이름 값에 영향을 미치는 부작용이 있습니다.

하위 개체와 상위 개체는 동일한 개체를 가리킵니다. 따라서 자식 개체가 프로토타입을 수정하면 부모 개체도 즉시 변경됩니다.

다시 작성(임시 생성자 사용):

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

함수 Shape(){}
Shape.prototype.name = '모양'
Shape.prototype.toString = function(){
this.name을 반환하세요.
}
함수 TwoDShape(){}
var F = 함수(){}
F.prototype = Shape.prototype
TwoDShape.prototype = 새로운 F()
TwoDShape.prototype.constructor = TwoDShape
TwoDShape.prototype.name = '2D 모양'
; 함수 삼각형(변, 높이){
this.side = 쪽
this.높이 = 높이
}
F.prototype = TwoDShape.prototype
Triangle.prototype = 새로운 F()
Triangle.prototype.constructor = 삼각형
Triangle.prototype.name = '삼각형'
; Triangle.prototype.getArea = function(){
return this.side*this.height/2; }

이 방법은 효율성을 향상시키지만 값이 아닌 참조로 전달되므로 "상위 개체"의 이름 값에 영향을 미치는 부작용이 있습니다.

하위 개체와 상위 개체는 동일한 개체를 가리킵니다. 따라서 프로토타입을 정렬하여 하위 개체를 수정하면 상위 개체도 즉시 변경됩니다.

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.