JavaScript 상속: Child.prototype = Parent.Prototype 대 Child.prototype = new Parent() - 어떤 접근 방식이 더 낫습니까?

Javascript 상속의 미묘한 차이: Child.prototype = Parent.Prototype 대 Child.prototype = new Parent()

Javascript에서는 상속은 프로토타입 메커니즘을 사용하여 구현되는 경우가 많습니다. 이 두 가지 일반적인 접근 방식의 주요 차이점은 하위 개체의 proto 속성에 미치는 영향에 있습니다.

Child.prototype = Parent.Prototype을 사용하는 경우 하위 프로토타입과 상위 프로토타입이 모두 동일한 개체를 가리킵니다. 즉, 자식 프로토타입에 대한 모든 변경 사항은 부모 프로토타입에도 영향을 미칩니다.

그러나 Child.prototype = new Parent()를 사용하면 부모 프로토타입을 상속하는 새 객체가 생성됩니다. 이렇게 하면 하위 프로토타입이 상위 프로토타입으로부터 격리되어 상위 프로토타입에 영향을 주지 않고 독립적인 수정이 가능해집니다.

인스턴스 속성에 미치는 영향

제공된 예에서 문제는 자식 생성자 내에서 인스턴스 속성을 설정할 때 발생합니다.

this.hitBox.width = oImg.width;
this.hitBox.height = oImg.height;

Child.prototype = Parent.Prototype을 사용하면 이러한 속성은 부모의 프로토타입이기도 한 자식의 프로토타입에 직접 추가됩니다. 결과적으로 하위 생성자의 console.log(this)에는 프로토타입이 Spaceship으로 설정되어 있으므로 proto: Spaceship이 표시됩니다.

해결책: Object.create 사용

이 문제를 방지하려면 Object.create(Parent.prototype)을 사용하는 것이 좋습니다.

Spaceship.prototype = Object.create(GameObject.prototype);

이 전략은 자체 독립 프로토타입을 유지하면서 상위 프로토타입에서 상속되는 새 객체를 생성합니다. 자식의 프로토타입에 추가된 인스턴스 속성은 부모의 프로토타입에 영향을 미치지 않습니다.

instanceof

GameObject의 개체 인스턴스를 사용하여 상속을 확인하는 경우 다음이 중요합니다. Child.prototype = Parent.Prototype은 자식의 프로토타입이 GameObject의 인스턴스가 아니기 때문에 이 테스트에 실패합니다. 대조적으로 Child.prototype = new Parent()는 예상대로 테스트를 통과합니다.

권장 사항

Javascript에서 강력하고 격리된 상속을 위해서는 일반적으로 다음을 선호합니다. Child.prototype = Parent.Prototype 대신 Child.prototype = Object.create(Parent.prototype)을 사용하세요.

위 내용은 JavaScript 상속: Child.prototype = Parent.Prototype 대 Child.prototype = new Parent() - 어떤 접근 방식이 더 낫습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!