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 |