> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 개체를 완벽하게 복제하는 방법은 무엇입니까?

JavaScript 개체를 완벽하게 복제하는 방법은 무엇입니까?

Patricia Arquette
풀어 주다: 2024-12-26 20:50:21
원래의
573명이 탐색했습니다.

How to Perfectly Clone JavaScript Objects?

JavaScript 객체를 정확하게 복제하는 방법

JavaScript에 내장된 메소드는 객체의 정확한 복제를 보장할 수 없습니다. 이는 프로토타입 파생 속성과 숨겨진 속성이 존재하기 때문에 복제 시 예상치 못한 결과가 발생할 수 있기 때문입니다. 이 문제를 해결하기 위해 다양한 접근 방식이 개발되었습니다.

2022 업데이트: 구조적 복제

구조적 복제라는 새로운 JS 표준은 간단한 솔루션을 제공합니다. 이는 많은 최신 브라우저에서 지원되며 다음 구문을 사용하여 정확한 복제를 허용합니다.

const clone = structuredClone(object);
로그인 후 복사

기존 접근 방식

이전 버전의 JavaScript에서는 사용자 정의 복제 기능 다음 단계를 사용하여 구현할 수 있습니다.

  1. 열거할 수 없는 속성 처리: 프로토타입 속성을 건너뛰고 객체에 직접 정의된 속성에 초점을 맞추는 hasOwnProperty 메소드.
  2. 열거 불가능한 속성 복제: 프로토타입 또는 __proto__와 같이 이름이 알려진 경우 숨겨진 속성을 명시적으로 복사합니다.
  3. 프로토타입 상속 구성: 복사된 객체의 프로토타입이 원본과 일치하는지 확인하세요. 이를 수동으로 설정하거나 소스 객체의 생성자를 호출해야 할 수도 있습니다.
  4. 열거 불가능한 데이터 구조 처리: Date 객체와 같이 열거 불가능한 멤버가 있는 데이터 구조에는 특정 처리가 필요합니다.
  5. 순환 구조 처리: 심층 복제 대신 방문한 개체를 추적하고 참조를 공유하여 무한 재귀를 방지합니다.

예 이러한 과제를 해결하는 복제 기능에 대한 설명은 다음과 같습니다.

function clone(obj) {
    if (null == obj || "object" != typeof obj) return obj;

    // Handing different object types
    // ... implementation for Date, Array, and Object

    // Generic fallback: deep copy properties
    var copy = {};
    for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
    }
    return copy;
}
로그인 후 복사

이 기능은 객체가 트리 구조를 형성하고 순환 참조를 포함하지 않는다고 가정합니다. 순환 구조를 처리하려면 더 복잡한 접근 방식이 필요합니다.

위 내용은 JavaScript 개체를 완벽하게 복제하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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