자바스크립트 (상속, 프로토타입)

Junho Yun·2022년 11월 24일
0

하루만에배우기

목록 보기
11/11
post-thumbnail

프로토타입? proto?

일단 예시 코드를 먼저 보겠습니다.

const user = {
	name : 'Mike'
}

user.name // Mike 반환

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

user. name 은 내가 만들어서 알겠는데...
hasOwnProperty는 어디서 나온 놈일까요?

객체 안에 "_ proto _" 라는 것이 있습니다.
그안에 hasOwnProperty 라는 것이 있으며, 위의 proto를 프로토타입이라고 합니다.

만약 객체 안에 프로토타입 안에 있는 것과 같은 이름으로 변수를 선언시 내가 선언한 변수 혹은 메소드로 동작이 실행됩니다. (정확히는 변수 혹은 메소드에서 찾아보고 없을 때 프로토 타입에서 찾아보는데, 이미 있으니까 내가 선언한 것으로 실행 하고 더 이상 찾지 않는 것이라 할 수 있습니다)

상속을 응용한 프로토타입 사용

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

const benz = {
	color: "black",
  	wheels: 4,
  	drive() {
    	console.log("drive...");
    },
};

const bmw = {
	color: "blue",
  	wheels: 4,
  	drive() {
    	console.log("drive...");
    },
};

위의 코드를 wheel랑 drive는 똑같잖아요? 차의 객체가 늘어날때마다 저렇게 넣어줘야할까요?
정답은 프로토타입으로 설정하는 방법을 사용할 수 있습니다. (이때 상속 개념도 들어가게 됩니다)

// 부모 요소가 될 car라는 객체 만들어주기 (모두 갖고있을 요소)
 const car = {
 	wheels: 4,
 	drive() {
    	console.log("drive...");
    },
 };

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

const benz = {
	color: "black",
};

const bmw = {
	color: "blue",
};

// car를 각 객체에 상속시켜 주기 
bmw.__proto__ = car;
benz.__proto__ = car;
audi.__proto__ = car;

console.log(bmw.wheels) // 4 출력
추가사항 
for(p in bmw){
	console.log(p)
}
// 상속 받은 것까지 다 나옴

object.keys(bmw);
object.values(bmw);
// 위의 object 메소드는 상속 받은 것은 표시하지 않습니다
profile
의미 없는 코드는 없다.

0개의 댓글