Javascript에서 클래스와 대상 관계를 처리하는 초보자 가이드

오늘, 나는 어떻게 전단 (우리의 예에서 자바스크립트) 에서 자바스크립트 클래스를 만들고, 후단 (데이터베이스, 모델 등) 에서 클래스 관계를 다시 만드는지 보고 싶다.나는 학생이기 때문에, 나는 여전히 자바스크립트의 세부 사항을 배우고 있다. 더 나쁜 것은, 나는 루비로부터 공부를 시작했다는 것이다.내 뜻을 오해하지 마라, 나는 줄곧 매우 흥분해서 JS를 볼 수 있다.이것은 우리가 인터넷을 체험하는 매우 큰 부분이다. (그것은 모든 재미있는 겉치레를 가지고 있다.) 그러나 루비의 단순성과 직관성은 내가 지금 JS를 공부할 때 진정으로 부족한 것이다.
나에게 있어서 가장 큰 조정 중 하나는 백엔드와 분리되는 것이며, Ruby on Rails와 같은 것을 사용할 때 영원히 고려할 필요가 없는 방식으로 그 구조와 대상을 거울로 보여야 한다.그렇다면 내가 이 글을 쓰는 것은 주로 내 자신의 이익을 위해 그것을 내 뇌에 두드려 미래의 두통을 막으려고 하는 것인가...그럴지도 모르지만, 이것도 너희들이 처음으로 더욱 쉽게 할 수 있기를 바란다.
그럼 어디서부터 시작할까요?데이터베이스 모델이나 이전이 우리의 관련을 지도하지 않기 때문에 우리는 반드시 자신의 관련을 구축해야 한다.여느 때와 마찬가지로 마술은 우리 반에서 일어났다.

class Pizza {

}

구체적으로 함수 작성 방법은 다음과 같습니다.

class Pizza {
  constructor(pizza) {
    this.name = pizza.name
    this.toppings = pizza.toppings
    this.deliciousness = pizza.deliciousness
  }
}

어떻게 된 거야?나는 this에 대해 너무 많은 토론을 하지 않을 것이다. 왜냐하면 나는 그 자체가 가능할 뿐만 아니라, 이미 완전한 게시물이라고 믿기 때문이다. 그러나 더 많은 것은 (... 이것?)here, 더 깊이 알고 싶다면.우리의 목적은 this이 피자류의 새로운 실례가 될 것이라고 말하기만 하면 된다.우리가 구조 함수에서 하는 일은 클래스가 자신의 실례를 어떻게 구축하고 어떤 속성을 주는지 알려주는 것이다.만약 당신이 대상을 대상으로 하는 다른 언어를 사용한 적이 있다면, 이것은 매우 익숙해 보일 것이다.예를 들어 Ruby에서 initialize 방법은 기본적으로 동일하게 작동합니다.
그럼 pizza의 논점은 무엇입니까?pizza은 우리가 호출하기로 결정한 백엔드에서 전송된 대상이다.예를 들어, pizza API에서 JSON 객체를 가져옵니다.객체가 다음과 같이 보일 수 있습니다.

[
  {
    "id": 1,
    "name": "Margherita",
    "deliciousness": 9,
    "toppings": ["Mozzarella", "Tomato", "Basil"]
  },
  {
    "id": 2,
    "name": "Hawaiian",
    "deliciousness": 3,
    "toppings": ["Ham", "Pineapple"]
  }
  ...      

따라서 이러한 객체 중 하나를 누비고 새로운 Pizza 인스턴스를 생성하고자 합니다.처음에는 직관적이지 않았다. (왜 우리는 완벽한 물체를 가지고 그것을 다른 똑같은 물체로 만들어야 합니까?)그게 우리 대상 관계야.여기까지 말하고 보충해 봅시다.
우리의 예에서 우리는 Pizzas은 Human에 속하고 Human은 많은 Pizzas에 속한다고 말할 수 있다.이 예에서 API의 데이터베이스인 객체를 어디서 가져오든 관계식을 반영해야 하지만 이 경우 구조 함수에 다른 속성을 추가하여 프런트엔드에 표시할 수 있습니다.

class Pizza {
  constructor(pizza) {
    this.name = pizza.name
    this.toppings = pizza.toppings
    this.deliciousness = pizza.deliciousness
    this.human = pizza.human
  }
}

class Human {
  constructor(human) {
    this.name = human.name
    this.pizzas = human.pizzas
  }
}

이 코드는 유효하다.우리 JSON 대상 중 데이터베이스에 어떤 사람이 어떤 피자를 가지고 있는지 표시하는 것이 있을 것이다. 우리는 피자 대상의 구조 함수 방법을 수시로 호출하여 새로운 종류의 실례인 {"name": "Margherita", "human": {"name": "Cole"}}을 만들 수 있다.하지만 잠재적인 문제도 있다.나에게 있어서 가장 흔히 볼 수 있는 것은 클래스 함수다.내 코드에서 new Pizza(pizza)을 명확하게 정의했을 때, 나는 좌우의 오류를 얻었다.
이전과 같은 클래스이지만, 이번에는 새로운 실례를 만들고 함수를 추가합니다.

// add function to Human class 
class Human {
  constructor(human) {
    this.name = human.name
    this.pizzas = human.pizzas
  }
  haveASlice(){
    console.log("Pizza is the best!")
  }
}

// our pretend backend objects 
let pizza = {
  "name": "Margherita",
  "deliciousness": 9,
  "toppings": ["Mozzarella", "Tomato", "Basil"],
  "human": {"name": "Cole"}
}
let human = {"name": "Cole"}

// instantiating new class objects
let newPizza = new Pizza(pizza)
let newHuman = new Human(human)

위대하다이 모든 것이 설정되어 있습니다. 현재 우리는 모든 종류의 새로운 실례가 생겼습니다. 우리는 인류 종류의 모든 실례에서 함수 TypeError: <myFunc> is not a function을 호출할 수 있습니다.하면, 만약, 만약...

newHuman.haveASlice()
// returns
Pizza is the best!

아주 좋아, 우리가 예상한 대로!우리 돌아갈까요?

newPizza.human.haveASlice()
// returns
Uncaught TypeError: newPizza.human.haveASlice is not a function

어떻게 된 거야?haveASlice은 newPizza.human과 마찬가지로 인간이죠?사실 그것들은 똑같아 보인다.문제는 이들이 같은 속성을 가지고 있지만 newHuman은 일반적인 구javascript 대상일 뿐이다. 그 중에서 as newPizza.human은 Human 클래스의 실례로 이 클래스에 정의된 함수에 접근할 수 있다는 것이다.
둘 사이의 차이를 알기 전에 최근의 한 항목에서 이것은 매우 큰 좌절의 근원이었다. 내 코드에서 나는 여전히 규칙적인 대상이 주위에 떠 있었다.이 해결 방안은 시종일관 실례를 만들고, 이 클래스의 구조 함수에서 그것들과 관계가 있는 다른 클래스와 연결하며, 실례를 만드는 순서에 주의하는 것이다.예를 들어, Human 인스턴스를 먼저 작성하면 다음과 같이 할 수 있습니다.

class Pizza {
  static all = []

  constructor(pizza) {
    this.name = pizza.name
    this.toppings = pizza.toppings
    this.deliciousness = pizza.deliciousness
    this.human = Human.all.find(human => human.name === pizza.human.name)
    Pizza.all.push(this)
  }
}

class Human {
  static all = []

  constructor(human) {
    this.name = human.name
    this.pizzas = human.pizzas.map(pizza => new Pizza(pizza))
  }
}

나는 그곳에 새로운 것이 많을 수 있다는 것을 알고 있지만, 우리의 생각은 인류 구조 함수에서 피자 실례를 만들고, 우리가 피자 구조 함수로 돌아갈 때 기존의 인류 실례를 검색하는 것이다. 이런 종류의 관계는 항상 클래스 실례에 의해 유지된다.다음은 설명 버전입니다.

class Pizza {
  // initialize an array for all my instances to live
  static all = []

  constructor(pizza) {
    this.name = pizza.name
    this.toppings = pizza.toppings
    this.deliciousness = pizza.deliciousness
    // find an existing Human from the Human.all array below
    this.human = Human.all.find(human => human.name === pizza.human.name)
    // add 'this' (the new Pizza instance) to the Pizza.all array 
    Pizza.all.push(this)
  }
}

class Human {
  // initialize an array for all my instances to live
  static all = []

  constructor(human) {
    this.name = human.name
    // create new Pizza instances, collect them in an array
    // and make that array of instances an attribute on the new Human instance  
    this.pizzas = human.pizzas.map(pizza => new Pizza(pizza))
  }
}

나는 이것이 도움이 될 수 있기를 바란다.읽어주셔서 감사합니다. 피자를 계속 창작하세요!