> 웹 프론트엔드 > JS 튜토리얼 > 일반 JavaScript 개체를 클래스 인스턴스로 캐스팅하는 방법은 무엇입니까?

일반 JavaScript 개체를 클래스 인스턴스로 캐스팅하는 방법은 무엇입니까?

Mary-Kate Olsen
풀어 주다: 2024-10-18 13:02:02
원래의
1084명이 탐색했습니다.

How to Cast Plain JavaScript Objects into Instances of Classes?

JavaScript에서 일반 객체를 클래스 인스턴스로 캐스팅

JavaScript에서 일반 객체로부터 실제 인스턴스를 생성하는 것은 가능하지만 특정 과제가 있습니다. 실용적인 시나리오와 그 해결책을 살펴보겠습니다.

문제

Person과 Animal이라는 두 클래스를 생각해 보세요. 서버는 일반 Person 개체의 배열을 반환합니다.

[
  { personName: "John", animals: [{ animalName: "cheetah" }, { animalName: "giraffe" }] },
  { personName: "Smith", animals: [{ animalName: "cat" }, { animalName: "dog" }] }
]
로그인 후 복사

목표는 이 개체 배열을 Person 인스턴스의 형식화된 배열로 캐스팅하여 person[0].Animals[2].Run과 같은 호출을 활성화하는 것입니다. ().

해결책

일반 객체에서 인스턴스를 생성하려면 생성자를 호출하고 속성을 올바르게 할당해야 합니다.

일반적인 접근 방식은 생성자가 인스턴스와 유사한 객체를 받아들이고 복제하도록 하는 것입니다. 그들을. 내부 인스턴스 생성 논리는 생성자에 의해 처리됩니다.

사용자 정의 메서드

또 다른 해결 방법은 개체를 가져와 인스턴스를 생성하는 Person 클래스에 정적 메서드를 만드는 것입니다.

Person.fromJSON = function(obj) {
  // Custom code to create instances based on `obj`
  return ...;
};
로그인 후 복사

기본 사례에 대한 간단한 접근 방식

생성자가 없고 공용 속성만 있는 간단한 사례의 경우 다음을 수행할 수 있습니다.

var personInstance = new Person();
for (var prop in personLiteral)
  personInstance[prop] = personLiteral[prop];
로그인 후 복사

또는 Object를 사용할 수 있습니다. 할당:

var personInstance = Object.assign(new Person(), personLiteral);
로그인 후 복사

Animal 인스턴스를 생성하려면 유사한 접근 방식을 따르세요.

기타 구현

JSON은 클래스 정보를 전달하지 않으므로 다음 사항을 알아야 합니다. 객체 구조를 미리 확인하세요. 귀하의 경우 구현은 다음과 같습니다.

var persons = JSON.parse(serverResponse);
for (var i=0; i<persons.length; i++) {
  persons[i] = $.extend(new Person, persons[i]);
  for (var j=0; j<persons[i].animals; j++) {
    persons[i].animals[j] = $.extend(new Animal, persons[i].animals[j]);
  }
}
로그인 후 복사

추가 참고 사항

Animal 클래스는 각 인스턴스가 아닌 프로토타입에서 실행 메서드를 정의할 가능성이 높습니다.

위 내용은 일반 JavaScript 개체를 클래스 인스턴스로 캐스팅하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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