Chapter2. Prototype
5.프로토타입과 클래스의 관계에 대해 설명할 수 있다.
6.프로토타입 체인에 대해 설명할 수 있다.


5.

Class 상속을 이용한 방법은 변경하기 어렵고 기반이 되는 클래스를 수정했을 때 하위 클래스들이 영향을 쉽게 받을 수 있는 계급 계층구조를 만든다. Class는 설계도이다.

Prototype 상속이 반드시 유사한 계층구조를 생성하지는 않는다. 프로토타입 체인을 최대한 간결하게 만드는 것이 중요하다. Prototype은 오브젝트 인스턴스이다.



6.프로토타입 체인이란 클래스로 제작할 때 extents를 사용해서 상속을 받아왔다면 그 부모의 프로토 타입으로 거슬러 올라가서 속성값(할당이 되어있지 않다면)을 찾으러 가게 되는데 만약 그 부모에게도 없다면 프로토타입을 계속해서 거슬러 올라가 조회를 하는 상황을 프로토타입 체인이라고 부른다. 

7. super와 class 사용예시 

class A {           //부모라고 볼 수 있는 대표 A를 만들어준다(사람,동물,가구 등)
  constructor(){    //constructor 내부에 공통되는 부분을 만들어준다.
    this.age = 0;         // age 설정 (this는 생성될 함수로 아래 추가설명)
    this.color = 'white'  // color 설정 (this.color는 생성될 함수의 색을 말한다)
    this.food = 'leaf'    // food 설정 (즉 this.food로 그 함수의 내부값을 정의한다.)
  }
  eat(){                   //eat함수 정의  A.eat()의 경우 아래 'yam yam leaf'출력
    return('yam yam leaf');
  }
}

--위 내용은 class의 사용 예시이며 아래는 그 class를 상속밭는 자식클래스다.
class B extends A {  //부모 A에서 확장된(상속받은) B class 생성
constructor(food){   // 내부에 들어갈 내용 (super로 받을 값에 따라 다르며
  super(food)        // 경우에 따라 내용을 비워도 가능하다 
  this.age = 5;      
  this.color = 'black';
  this.job = 'playing'
}
}

--아래 내용은 A와 B의 특성과 메서드를 가진 후손 C의 생성이다.
class C extends B { //B의 특성(A의 특성을 받은)에서 확장된 C 생성
 constructor(){    //이유는 모르지만 조상이 많으면 비워도 된다..
  super()          // 여기도 마찬가지(조상이 하나면 뭔가 채워야한다)
  this.age = 10;  
  this.job = 'student'
  this.gender = 'man';
 }
 getOlder(){          //외부에서 getOlder를 사용할 경우 age가 증가한다.
  return this.age += 1
}
gerYounger(){        //외부에서 getYounger를 사용할 경우 age가 감소한다.  
  return this.age -= 1
}
   //이 클래스 C로 만든 인스턴스는 a와 b의 특성과 메세드를 물려받았다.(수정된 내용 제외) 예를 들어 클래스 C로 만든 인스턴스는 A의 메서드 eat을 C.eat()으로 동작할 수 있으며 B의 color값을 받아 C.color값은 'black'이 나온다.
}
---추가적으로 contructoi(age = 10, job = 'gamming'){} 같은 방식으로 초기값을 컨스트럭터 내부에 넣어줄 수 있다. 
또한 제작할 때 내부 구성(게임으로 치면 스탯 또는 hp등)을 다른 여러개를 만들 경우 아래와 비슷하게 만들 수 있을 것 같다.
@@@주의사항 @@ 아래에 heal, wound는 제대로 된 사용법이 아닐 것 같다..

@@//주의사항 취소 컨스트럭터에서 값을 뺴고 생각해보니 그냥 아래 저렇게 둬도 함수 실행 떄 healHP()의 괄호 내부에 값을 넣어주면 제대로 작동할 것 같다. 다른사람에게 문제 알려드리다가 보니까 스스로 바로 발견
class Characters​{                                             //캐릭터 클래스(틀) 생성

 constructor(atkValue, defValue, hpValue){ //컨스트럭터 내부 공격력,방어력,체력 설정할 매개변수 입력
  this.atk = atkValue ;   //3가지 인자 각각 atk, def, hp 할당
  this.def = defValue ;
  this.hp = hpValue;
 }
 healHp(heal){
  return this.hp += heal
}
 loseHp(wound){
  return this.hp -= wound
}
}

 

아직까지는 메서드의 수정에 대해 조금 헷갈리는 상태지만 과제는 잘 제출했고 어느정도 적용도 가능한 상태기 때문에 추가적인 복습은 주말에 해야할 것 같다. 정말로 과정이 인정사정 없는 것 같은데 또 이런 기능들을 써야지 개발자라는 말을 할 수준이 된다고 보기 때문에 안할 수도 없다.. 솔직히 이제 작성하는 기능들을 보며 아 이제 진짜 개발 관련된 기능들을 배우는구나 싶기도 하다.

이제 SQL?같은 데이터 저장공간만 다룰 수 있다면 간단한 웹게임까지는 개발할 수 있는 것 아닐까?(모름)

 

'회고' 카테고리의 다른 글

복습(고차함수)  (0) 2022.05.28
[JS/Node] 비동기  (0) 2022.05.27
[JavaScript] 객체 지향 프로그래밍  (0) 2022.05.25
[JavaScript] 고차 함수  (3) 2022.05.24
프론트엔드 부트캠프(코드스테이츠) 1개월차 회고  (0) 2022.05.23

Chapter1. 객체 지향
1.클로저 모듈 패턴에 대해 설명할 수 있다.
2.클래스와 인스턴스에 대해 설명할 수 있다.
3.클래스 문법을 이용할 수 있다.
Chapter2. Prototype
4.프로토타입이 무엇인지 설명할 수 있다.

1. 클로저는 외부함수에 접근할 수 있는 내부 함수를 말하며 보통은 지역변수가 선언된 함수 내부에 클로저를 넣어 그 함수에 접근하기 때문에 외부에서는 그 값에 접급할 수 없다는 장점이 있다. 
클로저의 핵심은, 외부함수는 자신의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않고 계속 살아있다는 것으로 내부함수가 외부함수의 context에 접근할 수 있는데, 보통 우리가 알고 있는 함수 내부의 지역변수는 함수의 Life-Cycle에 의해서 역할을 다하면 내부에 정의 된 지역변수도 같이 사라지게 된다. 하지만 부모함수 내부에 내부함수가 존재하고 그 함수가 부모의 요소를 계속 참조하게 되면 부모함수가 자신의 역할을 완료하고 종료되더라도 자신의 요소를 참조하고 있는 내부함수 때문에 지역 변수가 사라지지 않으며, 내부함수가 그 요소에 대해 계속적으로 접근이 가능해진다. 즉, 이러한 매커니즘을 이용해 캡슐화된 모듈을 개발할 수 있다.

2.클래스는 반복되는 객체들을 일정한 틀로 만들어낼 수 있는데 그 객체들을 인스턴스라고 부른다.

3.클래스 문법은 기존의 제작과 크게 차이가 나는 것은 아니지만 사용의 편리함이 있다.
자료가 부족해 영상을 보고 학습한 내용이지만 위의 함수 선언식과 사용방법은 기존의 상속속등을 이용하는 객체의 사용법이었다면 아래의 클래스 선언은 최신식(ES6..나름?)의 방법이다.
function 기계(구멍){
this.q = 구멍;
this.w = 'snowball';
 }

var nunu = new 기계('consume');
var garen = new 기계('strike');


class Hero{
  constructor(구멍){
     this.q = 구멍;
     this.w = 'snowball';
     }
    }


4. 프로토타입(기계.prototype.name = 'kim')을 수정할 경우 근본적인 유전자?가 수정된다. 수정된 내용은 즉각적으로 반영되는 것이 아니라 사용하는 것에 선언이 되어있지 않은 경우 그 근본이 되는 상위로 거슬러 올라가게 되는데 그 과정에서 나오는 데이터가 없을 경우 최종 목적지가 프로토타입이 된다. 프로토타입은 console에 찍히지는 않기 때문에 데이터면에서도 절약이 된다. (하지만 중간에 다른 이름이 틀어박혀 있다면 그 자식부터는 그 이름이 나올 수 있기 때문에 주의해야 할 것 같다.)

 

오늘은 정말로 이해하기가 쉽지 않았다.

예시도 많이 부족했던 것 같고 사용하는 예시도 제공되지 않았다..

본인이 스스로 찾아보는 학습에 대해서 강조하는 것은 알지만... 어차피 유튜브로 제공되는 자료로 추가 학습을 해야 따라갈 수 있는 정도라면 예제정도는 두세개 만들어서 비교해 주는 편이 더 좋지 않았을까?

혼자서 끙끙대며 알아본 5~6시간이 무색하게 동기분들이 참고하라고 던져준 유튜브 강의 하나가 더 명확하게 이해할 수 있는 계기가 되었다..

동기사랑=나라사랑

+ Recent posts