배열로 프로토타입된 JavaScript 객체 멤버: 클래스 인스턴스 간 공유

JavaScript에서 배열 프로토타입을 작성할 때 이러한 멤버가 공유된다는 점을 이해하는 것이 중요합니다. 모든 클래스 인스턴스 중에서 비공개 객체 멤버에 익숙하다면 이 동작이 직관적이지 않게 보일 수 있습니다.

동작 설명

JavaScript의 프로토타입 메커니즘을 사용하면 객체가 상위 객체로부터 속성과 메서드를 상속받을 수 있습니다. 프로토타입으로 알려져 있다. 프로토타입에서 배열을 속성으로 정의하면 해당 프로토타입에서 상속되는 모든 객체에 액세스할 수 있게 됩니다.

예제 스크립트는 이 동작을 보여줍니다.

function Sandwich() {
    // Uncomment this to fix the problem
    //this.ingredients = [];
}

주석 처리된 줄을 주석 처리 해제하면 각 Sandwich 인스턴스는 자체 비공개 재료 배열을 갖게 됩니다. 그러나 주석 처리된 행을 사용하면 모든 인스턴스가 동일한 프로토타입 배열을 공유합니다.

이는 치즈버거에 재료를 추가하면 blt 및 매운_치킨_샌드위치의 재료도 업데이트된다는 의미입니다. 이를 방지하려면 아래 업데이트된 예와 같이 생성자 내에서 재료 배열을 정의해야 합니다.

function Sandwich() {
    this.ingredients = [];
}

프로토타입과 인스턴스

프로토타입 속성과 인스턴스 속성을 구별하는 것이 중요합니다. 프로토타입 속성은 해당 프로토타입에서 상속되는 모든 객체에 의해 공유되는 반면, 인스턴스 속성은 각 객체마다 고유합니다.

• 공유 데이터 또는 메서드를 정의하려면 프로토타입에 속성을 할당합니다.
• 할당 인스턴스별 데이터를 정의하기 위해 생성자 내부의 인스턴스에 속성을 추가합니다.

코드 수정을 통해 동작

예제 스크립트에서 줄의 주석 처리를 해제합니다. this.ingredients = []; Sandwich 생성자 내에서는 각 인스턴스가 의도한 대로 고유한 성분 배열을 갖도록 보장합니다.

결론

예기치 않은 공유를 방지하려면 JavaScript에서 프로토타입 배열의 동작을 이해하는 것이 중요합니다. 클래스 인스턴스 중. 인스턴스별 데이터는 생성자 내에서 정의되어야 하며, 공유 데이터는 상속을 통해 프로토타입에 할당될 수 있다는 점을 항상 기억하세요.