🌊 [javascript] 프로토타입과 클래스

🌊 프로토타입과 클래스

: Java Script는 프로토타입(Prototype) 기반 언어이다.
→ 모든 객체들이 메소드와 속성들을 상속 받기 위해 템플릿으로써 프로토타입 객체를 가진다는 의미 (출처 : MDN)

→ 너무.. 어려운 말이다..! 여러 자료를 찾아보다 동기분께서 추천해주신 애플코딩의 프로토타입 설명을 듣고 (https://youtu.be/wUgmzvExL_E) 감이 잡힌 것 같다. 

 

 

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

class food {
    constructor(name, type) {
        this.name = name;
        this.type = type;
    }
    eat() {
        console.log(`${this.name}을 맛있게 먹다.`)
    }
}
let ogu = new food('chicken', 'fried');

console.log(ogu)
// food { name: 'chicken', type: 'frued'}


food.prototype.constructor === food; // true
food.prototype === ogu.__proto__; // true
food.prototype.eat === ogu.eat; //true

food.prototype.number = 1;
// 이렇게 클래스 프로토타입에 메서드를 추가하면 인스턴스에서도 그 메서드를 사용할 수 있다.

현재 변수 ogu에 생성한 food 인스턴스는 class food의 eat() 함수를 상속 받는 것을 확인할 수 있다.

자바스크립트의 모든 객체는 프로토타입 객체를 가지고 있다. 프로토타입의 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속받을 수 있고, 그 상위 객체도 마찬가지이다. 

 

prototype은 유전자와 같다.  클래스 프로토타입에 메서드를 추가하면 인스턴스에서도 메서드를 사용할 수 있다. 

만약 ogu.time 을 불러냈을 때 class가 .time을 가지고 있으면 그대로 출력, 없으면 class의 부모유전자까지 확인, 부모도 없다면 더 위의 유전자까지 확인하는 것을 prototype chain이라 부른다.

 

 

이 이상은 아직 공부 중이므로 더 추가하겠다