[JavaScript] 프로토타입

프로토타입

---

• 자바스크립트는 프로토타입 기반 언어 -> 객체를 상속하기 위하여(새로운 객체를 만들어내기 위하여) 객체 원형인 프로토타입을 이용
• 프로토타입은 객체를 확장하고 객체 지향적인 프로그래밍을 할 수 있게 해줌

프로토타입 객체

함수를 정의하면 다른 곳에 생성되는 프로토타입 객체는 다른 객체의 원형이 되는 객체입니다.

함수가 정의될 때,

1. 해당 함수에 생성자(constructor) 자격이 부여됨 -> new 키워드를 통해 객체를 만들어낼 수 있게됨

2. 해당 함수의 Prototype Object 생성 및 연결

 

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

프로토타입 객체도 동적으로 멤버(메서드)를 추가할 수 있습니다.

같은 원형을 복사로 생성된 모든 객체는 추가된 멤버를 사용할 수 있습니다.

 

prototype 속성 / __proto__ 속성

• prototype
  • 함수만 가지고 있는 속성
• __proto__
  • 모든 객체가 빠짐없이 가지고 있는 속성
  • 객체가 생성될 때 조상이었던 함수의 Prototype Object를 가리킴

 

프로토타입 체인 (Prototype chain)

---

• 상속을 자바스크립트에서 구현할 때 프로토타입 체인을 사용
• 모든 객체들이 메서드와 속성을 상속받기 위해 프로토타입 객체(prototype object)를 가짐
• 프로토타입 객체도 그 상위 프로토타입 객체로부터 메서드와 속성을 상속 받을 수 있고 그 상위 프로토타입 객체도 마찬가지 => 이걸 프로토타입 체인이라고 부름
• 정확히 말하자면 상속되는 속성과 메서드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어 있음
• JavaScript에서는 객체 인스턴스와 프로토타입 간에 연결이 구성되며 이 연결을 따라 프로토타입 체인을 타고 올라가며 속성과 메소드를 탐색

extends / super 키워드를 이용한 클래스 상속

• 기존에 존재하던 클래스를 상속받기 위해서 extends를 사용

class User {
  constructor(username, password){
    this.username = username; 
    this.password = password;  
  }
  introduce(){
    console.log(`My name is ${this.username}`);
  }
}

class Admin extends User {
  adminIntro(){
    console.log(`I am ${this.username}(admin)`);
  }
}

admin = new Admin("root", "root");
admin.adminIntro();
// I am root(admin)

• super는 상속받은 원시 클래스를 호출

class Admin extends User {
  constructor({username, password, email}){
    super({username, password});
    this.email = email;

  }
  adminIntro(){
    console.log(`I am ${this.username}(admin)`);
  }
}

admin = new Admin({
  username: "root",
  password: "root",
  email: "root@gmail.com"
});
admin.adminIntro();
// I am root(admin)

 

 

참고 : 

 

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes

https://www.nextree.co.kr/p7323/

https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67

https://ssungkang.tistory.com/entry/ES6-Class%EC%9D%98-%EC%83%81%EC%86%8D-super-this