> 웹 프론트엔드 > JS 튜토리얼 > Crockford의 프로토타입 상속에서 중첩 개체를 수정할 때 예기치 않은 동작을 방지하는 방법은 무엇입니까?

Crockford의 프로토타입 상속에서 중첩 개체를 수정할 때 예기치 않은 동작을 방지하는 방법은 무엇입니까?

Mary-Kate Olsen
풀어 주다: 2024-12-31 08:57:09
원래의
507명이 탐색했습니다.

How to Avoid Unexpected Behavior When Modifying Nested Objects in Crockford's Prototypal Inheritance?

Crockford의 프로토타입 상속: 중첩 문제 해결

Douglas Crockford의 프로토타입 상속 개념은 "Object.create" 함수에 예시된 것처럼 객체 생성에 대한 단순화된 접근 방식을 제공합니다. 그러나 사용자는 이 상속 프레임워크에서 중첩된 개체를 처리할 때 어려움을 겪을 수 있습니다. 특히 중첩된 개체 값을 덮어쓰면 프로토타입 체인을 따라 다른 개체에 영향을 미쳐 예상치 못한 결과가 발생할 수 있습니다.

이러한 상황을 설명하기 위해 다음 코드 조각을 고려하세요.

// Flat object
var flatObj = {
    firstname: "John",
    lastname: "Doe",
    age: 23
}

// Nested object
var nestObj = {
    sex: "female",
    info: {
        firstname: "Jane",
        lastname: "Dough",
        age: 32  
    }
}
로그인 후 복사

이 시나리오에서는 "Object.create"를 사용하여 새 개체를 생성하고 중첩된 개체 값을 수정하려고 하면 프로토타입 개체가 의도하지 않게 변경됩니다.

// Objects created using Object.create
var person1 = Object.create(flatObj);  // Flat object inheritance
var person2 = Object.create(nestObj);  // Nested object inheritance

// Overwriting nested object values
person1.age = 69;
person2.info.age = 96;

// Prototype objects have been modified
console.log(nestObj.info.age);  // Outputs 96 instead of 32
로그인 후 복사

핵심 문제는 중첩된 개체를 포함한 모든 개체가 표준 개체 속성처럼 처리된다는 사실에서 비롯됩니다. 중첩된 객체 값을 수정하면 변경 사항이 현재 객체뿐만 아니라 동일한 프로토타입에서 상속된 다른 객체에도 전파됩니다.

따라서 독립적인 중첩 객체를 유지하려면 다음을 수행하는 것이 중요합니다. 상속에 의존하는 대신 새 개체를 만듭니다. 예:

// Creating an independent nested object
person3 = {
    sex: "male",
    info: Object.create(nestObj2.info)  // Create a new object for the nested "info" property
}
로그인 후 복사

이렇게 하면 중첩된 개체 값에 대한 변경 사항이 특정 개체에만 영향을 미치고 프로토타입 체인 위로 전파되지 않도록 할 수 있습니다.

위 내용은 Crockford의 프로토타입 상속에서 중첩 개체를 수정할 때 예기치 않은 동작을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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