Unit.2 자바스크립트 프로토타입

 

프로토타입이란?

프로토타입은 원형이라는 뜻을 가진다.

이해를 돕기위해 유전자 라고 이해하겠다.

자바스크립트의 모든 객체는 프로토타입이라는 객체를 가진다.

모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받는다.

이처럼 모든 자바스크립트 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이떄 상속되는 정보를 제공하는 객체를 프로토타입이라고 한다.

프로토란?

__proto__를 활용하여 상속 관계를 확인할 수 있습니다.

지금 객체가 누구를 상속하고있는지, 이객체의 프로토타입(유전자를 물려준 객체) 가 뭔지 알려준다.

const car = {
    wheels : 4,
    drive() {
        console.log("drive...")
    }
}

const bmw = {
    color: "red",
    navigation : 1,
};

const x5 ={
    color: "skyblue",
    name : "x5"
}

bmw.__proto__ =car //bmw의 프로토타입은 car 
x5.__proto__=bmw // x5의 프로토타입은 bmw
bmw.wheels // 4
bmw.color // 'red'
x5.wheels // 4
x5.navigation // 1

이를통해 알 게 된점.

• 모든 객체는 자신의 프로토타입을 상속한다.
• A가 B의 프로토타입이다. === B는 A를 상속한다.
• 해당객체에 찾고자하는 값이 없으면 객체의 프로토타입으로 거슬러 올라가서 탐색한다.
• 객체의 프로토타입에서도 값을 찾을 수 없다면 프로토타입의 프로토타입으로 거슬러 올라가 탐색한다.
• 프로토타입체인 :ex. x5.wheels를 입력했을 때, x5 안에는 존재하지 않기 때문에 프로토타입인 bmw로 올라가서 탐색한다. bmw에도 없으니 bmw의 프로토타입인 car로 올라가서 값을 찾는다. (이것이 프로토타입 체인)

B.__proto__ = A  // B의 프로토 타입은  A이다
let B = new A(...) // B는 A를 상속한다

B.__proto__ = A === let B = new A(...)  // A를 상속한다는 것과, 프로토타입이 A라는 것은 의미가 유사하다.

프로토타입과 상속의 차이

좌측이 프로토타입 우측이 클래스

프로토타입 : 유전자의 개념. 이미 유전자를 물려받아 태어났기 때문에 이미 가지고있다. / 부모님이 물려주신 유전자를 자식이 바꿀 수 없다. 바꾸고싶으면 부모님이 물려주기 전에 유전자를 조작해야한다.

클래스 : 상속의 개념, 엄마아빠거 가져다 써도 된다. 아들한테 줄테니 맘대로 써라. /ex. 부모님이 주신 차를 어떻게 쓰던, 물려주신 집을 어떻게 인테리어 하던 상관없다.