[JavaScript] 프로토타입 체인 정리

📌 프로토타입 체인

상속하기 위해 이어주는 역할 .__proto__ 프로토체인 이라한다.

• 이어주는 역할과 함께 부모 클래스를 확인할 수도 있다. 최상위는 Object
• Object 다음으로는 null인데 더이상은 없음을 뜻한다.
• Dom도 prototype이다.

let div = document.createElement('div')

div.__proto__ //HTMLDivElement
div.__proto__.__proto__ //HTMLElement
div.__proto__.__proto__.__proto__ // Element
div.__proto__.__proto__.__proto__.__proto__ // Node
div.__proto__.__proto__.__proto__.__proto__ .__proto__ // EventTarget
div.__proto__.__proto__.__proto__.__proto__ .__proto__.__proto__ // Object

🤔 왜 알아야하는가?

JavaScript는 프로토타입 기반 언어이고
프로토타입 체인을 사용하여 객체 지향 프로그래밍의 특성 중 상속을 구현한다.

즉 흔히 사용하는 것들 .length , .slice ... 같은 수많은 메서드를 사용하는것 자체가 이미 프로토타입을 통해 상속 받아 사용하는 중인 것이다. .__proto__ 를 통해 부모를 찾으면 결국 조상인 Object 클래스에 속해 있음을 알 수있다.

원시타입인 String 도 Object 클래스를 바라보고 있음

모든 객체는 프로토타입 객체에 접근할수 있다.

const data = 'hello';  
data.length //5`

length 같은 메서드는 따로 만들지 않고 그냥 갖다 썻는데 결과값이 나왔다.
그말은 javascript는 프토토타입 이기에 최상위인 Object 클래스에 내장되어 있는
메서드를 사용할 수 있고, js는 객체지향 언어 임을 알수있다.

🥕 class의 상속

extends super

Person의 클래스를 생성했다.

class Person {
  constructor(name, age, gender, work,action) {
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.work = work;
  }

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

Person class 를 부모로 상속받아 Teacher 클래스를 만들 것인데 ,
이 작업을 하위 클래스 생성이라 부른다. extends 키워드를 통해 상속 받을 클래스를 명시한다.

class Teacher extends Person {
 constructor(first, last, age, gender, interests, subject, grade) {
   super()
   this.name = {
     first,
     last
   };

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

• extends로 상속을 받았으면 super() 연산자를 반드시 써줘야한다. (미사용시 에러발생)
• super()의 매개변수를 통해 상위 클래스의 속성을 상속받을 수 있는 코드

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

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

😭 정리

• 프로토체인은 이어주는 역할과 동시에 부모클래스 속성을 확인할 수 있다.
• 프로토타입은 상속하기위한 메커니즘이다.
• 처음 디폴트값(기본값)을 설정해 줄 수도 있다.

class Person {
 constructor(name = 'tonki', age = 12, gender = 'male', work = 'student',action) {
   this.name = name;
   this.age = age;
   this.gender = gender;
   this.work = work;
 }

action() {
   console.log(`Hi! I'm ${this.name.first}`);
 };
} const tonki = new Person();
console.log(tonki); // Person {name:'tonki', age:12, gender:'male', work:'student'}