javascript 상속 prototype

prototype , 상속, 클래스와 같은 개념들은 배워도 금방 잊어버리기 쉬운 것 같다..

const user = {
	name : 'taehyeki'
    }

라는 Object가 있다고 하고 console.log(user.name)을 해본다면 'taehyeki'라는 문자열이 잘 출력될 것이다.

하지만 user.age를 출력해보면 나올까?? 물론 안나올 것이다 undefined가 출력이 될 것이다.

user.hasOwnProperty('name') // true
user.hasOwnProperty('age') // false

hasOwnProperty메서드를 확인해보면 프로퍼티의 유무를 확인할 수 있다.

여기서 잠깐 !?

우리는 user라는 객체에 hasOwnProperty라는 메서드를 설정해 줬던 적이 있던가??

아니다 저 메서드는 object가 기본적으로 가지고 있는 메서드이다.

만약 같은 이름의 메서드가 user에서 정의 되어있다면 어떻게 될까??

const user={
	name : 'taehyeki',
    hasOwnProperty : function(){
    	console.log('hi')
        }
    }

user.hasOwnProperty()를 해보면 'hi'가 출력이 될 것이다.

일단 객체의 그 프로퍼티,메서드가 있으면 거기서 탐색을 멈추고 없을 때만 프로토타입에서 찾는다.

const car = {
	wheels: 4,
    drive() {
    	console.log('drive');
        },
};
const bmw = {
	color: 'red',
    navigation:1,
    };
    
bmw.__proto__=car;

car라는 object와 bmw라는 object를 만들고

bmw의 __proto__라는 속성에 car를 넣어보자 그렇다면

car가 bmw의 프로토타입이 된다. bmw는 car의 상속을 받는다.

bmw.color // 'red'
bmw.wheels; // 4

bmw.color는 원래 bmw에서 기본적으로 가지고 있던 프로퍼티이니까 잘 나오고

bmw.wheels를 해보면 bmw내에서 wheels 프로퍼티를 찾아보고 있다면 거기서 탐색을 멈추고 없다면 bmw의 __proto__에 가서 찾는다. __proto__타입에는 car의 프로퍼티가 있기에 4라는 값이 출력이 된다.

 

const x5 = {
	color:'white',
    name:'x5',
    };
x5.__proto__=bmw;

상속은 계속 이어질 수 있다.

x5.name // 'x5'
x5.color //'white'
x5.navigation // 1

여기서 x5.color에서 'white'가 출력된 것은 x5의 프로퍼티에서 color라는 값이 있기에 찾고 탐색을 멈춘것!

x5.navigation은 x5의 프로퍼티에서 없으니까 __proto__인 bmw에 올라가서 찾아온 것이다. (만약 wheels나 drive()이었다면 bmw의 __proto__인 car에가서 찾아 왔을 것 !)

이런 것을 프로토타입 체인이라고 한다

 

for(p in x5){
	console.log(p)}

for in으로 객체의 프로퍼티들을 순회해보면 color, name, navigation, wheels, drive 다 출력이 된다.

name과 color를 제외하면 프로토타입에서 정의한 것들이다.

Object.key(x5) // ['color', 'name']

Object.values(x5) // ['white','x5'] 만 출력이 된다.

 

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

const Bmw = funtion (color) { // 생성자 함수
	this.color = color;
};

const x5 = new Bmw('red');
const z4 = new Bmw('blue');

x5.__proto__ = car;
z4.__proto__ = car;

이렇게 해준다면 x5와 z4의 __proto__가 car이니까 wheels와 drive메서드에 접근할 수 있게 된다.

하지만 일일이 생성자함수를 만들 때마다 __proto__ 를 설정한다면 얼마나 귀찮을까? 여기서 나오는 개념이

prototype이다

const Bmw = funtion (color) { // 생성자 함수
	this.color = color;
};
Bmw.prototype.wheels = 4;
Bmw.prototype.drive = function() {
	console.log('drive..')
    };
    
const x5 = new Bmw('red');
const z4 = new Bmw('blue');

이건 생성자함수가(Bmw) 생성하는 객체의(x5,z4) __proto__를 wheels와 drive로 설정한다 라는 뜻이다.