JavaScript 상속에서 `Child.prototype = Parent.Prototype`을 언제 피해야 합니까?

Patricia Arquette
풀어 주다: 2024-11-14 10:28:02
원래의
376명이 탐색했습니다.

When Should You Avoid `Child.prototype = Parent.Prototype` in JavaScript Inheritance?

JavaScript 상속에서 Child.prototype = Parent.Prototype을 피해야 하는 경우

JavaScript에서는 Child.prototype =을 사용하여 상속하는 것이 일반적이지만 new Parent();, Child.prototype = Parent.Prototype이 의도하지 않은 오류를 일으킬 수 있는 예외가 있습니다.

다음 스니펫을 고려하세요.

function GameObject(oImg, x, y) {

    this.x = x;
    this.y = y;
    this.img = oImg;

    this.hit = new Object();
    this.hitBox.x = x;
    this.hitBox.y = y;
    this.hitBox.width = oImg.width;
    this.hitBox.height = oImg.height;

}

Spaceship.prototype = new GameObject();
Spaceship.prototype.constructor = Spaceship;

function Spaceship(){
    console.log("instantiate ship");
    GameObject.apply(this, arguments);
    this.vx = 0;
    this.vy = 0;
    this.speed = 3;
    this.friction = 0.94;
}
로그인 후 복사

Spaceship 생성자를 검사하면 해당 __proto__ 속성이 GameObject가 아닌 Spaceship을 가리키는 것을 알 수 있습니다. 이는

this.hitBox.width = oImg.width;
this.hitBox.height = oImg.height;
로그인 후 복사

행이 GameObject 프로토타입에 존재하지 않는 this.hitBox에 직접 속성을 할당하기 때문입니다. 이 동작은 다음과 같은 이유로 문제가 됩니다.

  • 상속 중단: Child.prototype = Parent.Prototype을 사용하는 경우 Child 프로토타입은 Parent 프로토타입에 추가된 새 함수를 상속하지 않습니다.
  • instanceof check 위반: Spaceship 인스턴스의 __proto__가 GameObject 대신 Spaceship을 가리키므로 if(object instanceof GameObject)를 확인하면 실패합니다.

Child.prototype = new Parent();를 사용하는 이유 대신

Child.prototype = new Parent(); Parent 클래스의 생성자를 호출하고 새로 생성된 인스턴스를 Child 프로토타입에 할당합니다. 이렇게 하면 다음이 보장됩니다.

  • 상속이 보존됩니다. 상위 프로토타입에 추가된 모든 새 기능은 자동으로 하위에 상속됩니다.
  • 검사 인스턴스가 정확합니다. 하위 인스턴스의 __proto__ 상위 프로토타입을 가리켜 올바른 검사 인스턴스를 허용합니다.

대안 해결 방법

Object.create를 지원하는 최신 브라우저에서는 Spaceship.prototype = Object.create(GameObject.prototype);을 사용할 수 있습니다. 하위 프로토타입을 생성합니다. 이는 기능적으로 Child.prototype = new Parent();와 동일합니다. 하지만 더 간결하고 불필요한 생성자 호출을 방지합니다.

위 내용은 JavaScript 상속에서 `Child.prototype = Parent.Prototype`을 언제 피해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿