S2) Unit 2. [JS] 프로토타입

📌 JS는 프로토타입 기반의 언어이다.

📣 프로토타입

✔️ 원형이라는 뜻 (객체의 원형, 즉 객체의 부모)
✔️ 객체는 프로퍼티를 가질 수 있는데, 프로토타입 이라는 프로퍼티는 객체가 생성될 때 프로토타입에 저장된 속성들이 그 객체에 연결된다.
✔️ 모든 객체는 프로토타입에 접근할 수 있다.

📣 프로토타입과 클래스

class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sleep() {
    console.log(`${this.name}은 잠에 들었습니다`);
  }
}

let kimcoding = new Human('김코딩', 30);

// 실습해보세요
Human.prototype.constructor === Human; 		// true
Human.prototype === kimcoding.__proto__; 	// true
Human.prototype.sleep === kimcoding.sleep;	// true

➰ Human 클래스의 생성자 함수는 Human이다
➰ Human 클래스의 프로토타입은 Human 클래스의 인스턴스인 kimcoding의 __proto__ 이다.
➕ __proto__

새로운 객체를 생성할 때 객체의 프로퍼티와 함께 __proto__ 프로퍼티가 같이 생성된다.

__proto__는 kimcoding이라는 객체를 생성한 Human 객체의 prototype 객체를 가리킨다.

➰ Human 클래스의 sleep 메서드는 프로토타입에 있으며,
Human 클래스의 인스턴스인 kimcoding에서 kimcoding.sleep으로 사용할 수 있다.

✔️ Human 클래스와 인스턴스, 프로토타입의 관계

✔️ Array 클래스와 인스턴스, 프로토타입의 관계

상속의 경우

✏️ .prototype은 '아래'로, .__proto__는 '위'로 라고 생각하자.

📣 프로토타입 체인

✔️ JS에서 상속을 구현할 때 프로토타입 체인을 사용한다.

// Human 클래스
let kimcoding = new Human('김코딩', 30);

// 속성
kimcoding.age;
kimcoding.gender;
// 메서드
kimcoding.eat();
kimcoding.sleep();


// Student 클래스
let parkhacker = new Student('박해커', 22);

// 속성
parkhacker.grade;
// 메서드
parkhacker.learn();

➰ Student 클래스는 Human 클래스 + 추가적인 특징
➰ 부모 클래스(Human) / 자식 클래스(Student) => 이렇게 물려받는 과정이 상속
➰ JS에서는 extends와 super 키워드를 통해 상속을 구현할 수 있다.

// Person 클래스
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!`);
  };
}


// Teacher 클래스
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;
  	}
}

➰ super() : 상위 클래스의 생성자를 호출하여 super()의 매개변수를 통해 상위 클래스의 멤버를 상속받을 수 있는 코드
➰ Teacher의 인스턴스를 생성하면 의도한대로 Teacher와 Person 양 쪽의 메소드와 속성을 사용할 수 있다.

✏️ 문제

let div = document.createElement('div');

div.__proto__.__proto__	// HTMLElement
div.__proto__.__proto__.__proto__// Element

✏️ 문제

class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sleep() {
    console.log(`${this.name}은 잠에 들었습니다`);
  }
}

let kimcoding = new Human('김코딩', 30);

➰ Human은 최상위 클래스로써 부모 클래스가 없다. (❌)
-> 최상위 클래스는 Object로, Human의 부모 클래스는 Object 이다.

✏️ 문제

let div = document.createElement('div');
document.body.append(div);
div.textContent = '코드스테이츠에서는 몰입의 즐거움을 느낄 수 있습니다.';
div.addEventListener('click', () => console.log('몰입을 하면 놀라운 일이 생깁니다.'));

➰ EventTarget의 prototype에 addEventListener 메서드가 있다.
div는 HTMLDivElement의 인스턴스이고 EventTarget을 상속받았기 때문에 addEventListener를 사용할 수 있다.
보통 클래스의 인스턴스는 new 키워드로 생성하지만, DOM에서는 createElement를 사용한다.

✏️ 문제

class Human {
    constructor(name, age){
        this.name = name; 
        this.age = age;
    }
    sleep(){ return `${this.name}이(가) 잠을 잡니다.`}
}

class Student extends Human{
    constructor(name, age, grade){
        super(name, age);
        this.grade = grade;
    }
    study(num){
        this.grade = this.grade + num;
        return `${this.name}의 성적이 ${num}만큼 올라 ${this.grade}이 되었습니다.`
    }
}

class ForeignStudent extends Student{
    constructor(name, age, grade, country){
        super(name, age, grade);
        this.country = country;
    }
    speak(){
        return `${this.country} 언어로 수업을 진행합니다.`
    }
}

let americanStudent = new ForeignStudent('jake', 23, 80, '미국');

➰ ForeignStudent의 부모 클래스는 Student, Human 두 개이다.