section2/unit2/Javascript 객체지향 프로그래밍(9/22)

블로깅 주제

• Javascript 객체지향 프로그래밍

---

1. 지금 현재, 당신의 기분이나 느낌을 표현해 주세요.

• 저번주 '나만의 아고라스테이츠 만들기' 부터 지금까지 상당히 난이도가 있는 학습이 이어지고 있다. 매일 좀비처럼 쓰러져서 잠든다 ㅋㅋㅋㅋ^^7 곧 리엑트 들어갈텐데 벌써부터 이러면 어떡하니!! ㅠㅠ 이번주 주말에 리프레쉬를 꼭 해줘야겠다 ㅎㅎ

2. 오늘 무엇을 학습한 내용 중 지금 떠올릴 수 있는 단어를 모두 나열해 주세요.

• 프로토타입과 체인

3. 2에서 작성한 단어를 가지고, 오늘의 학습 내용을 설명해 보세요.

- 프로토타입과 체인

객체 지향 프로그래밍의 특성 중 상속을 JavaScript에서 구현할 때에는 프로토타입 체인을 사용

* 자바스크립트에서는 다중 상속 불가

 

▶ extends:  상속 받을 클래스 명시

▶ super(): 상위 클래스의 생성자를 호출하며 상위 클래스의 멤버를 상속받을 수 있음

super는 constructor 함수 안 최상단에 써야함

super() ==> super안을 빈 칸으로 두면 부모 클래스의 모든 속성을 가져오겠다는 의미

★ super() 안을 빈칸으로 둔 후, this를 사용해 자식 클래스 constructor 함수 내에서 변경해줄 값을 변경해주는 방식 사용 지향해야 함

==> 상속되는 속성이 많아질 경우 super() 괄호안에서 그 속성들의 입력 순서를 맞추기가 어려워지기 때문

class Person {
  constructor(first, last, age, gender, interests) {
    this.name = {
      first,
      last
    };
    this.age = age;
    this.gender = gender;
    this.interests = interests;
  }

  greeting() {
    console.log(`Hi! I'm ${this.name.first}`);
  };

  farewell() {
    console.log(`${this.name.first} has left the building. Bye for now!`);
  };
}

let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);
han.greeting();
// Hi! I'm Han

let leia = new Person('Leia', 'Organa', 19, 'female' ['Government']);
leia.farewell();
// Leia has left the building. Bye for now

 

Teacher의 인스턴스를 생성하면 의도한대로 Teacher와 Person 양 쪽의 메소드와 속성을 사용할 수 있음

class Teacher extends Person {
  constructor(first, last, age, gender, interests, subject, grade) {
    super(first, last, age, gender, interests);

    // subject and grade are specific to Teacher
    this.subject = subject;
    this.grade = grade;
  }
}

let snape = new Teacher('Severus', 'Snape', 58, 'male', ['Potions'], 'Dark arts', 5);
snape.greeting(); // Hi! I'm Severus.
snape.farewell(); // Severus has left the building. Bye for now.
snape.age // 58
snape.subject; // Dark arts

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Classes_in_JavaScript#ecmascript_2015_%ED%81%B4%EB%9E%98%EC%8A%A4

Classes in JavaScript - Web 개발 학습하기 | MDN

---

- DOM과 프로토타입

DOM도 프로토타입으로 상속을 구현함

보통 클래스의 인스턴스는 new 키워드로 생성하지만, DOM에서는 new 키워드가 아닌 createElement를 사용함

ex)

브라우저에서 DOM을 이용하면, document.createElement('div')로 새로운 div 엘리먼트를 만들 수 있음

이렇게 생성된 div 엘리먼트는, HTMLDivElement라는 클래스의 인스턴스임

div Element 상속관계

---

과제 : beesbeesbees

디폴트 파라미터 이용시, 디폴트 값 설정 + 인스턴스 생성 되었을 시 해당 인스턴스의 파라미터 데이터의 적용 두 가지 모두 가능함