[Javascript] 프로토타입 상속

프로토타입이란?

✔️ 다른 객체의 원형이 되는 객체 ?

✔️ 객체들이 기본적으로 가지고 있는 프로퍼티라고 생각하면 쉬운 것 같다.

✔️ 객체에서 프로퍼티를 읽으려고 하는데 없으면 이 프로토타입에서 프로퍼티를 찾게 된다.

✔️ 객체의 프로퍼티가 존재하면 프로토타입까지 탐색하지 않고 멈춘다.

hasOwnProperty 는 프로토타입에서 프로토타입의 존재 유무를 알려주는 메소드이지만

개발자가 먼저 선언해버리면 그 코드가 우선적으로 발현된다.

const user = {
  name:'Mike',
  hasOwnProperty:function(){
  	console.log('haha');
  }
};

user.hasOwnProperty();
//haha

 

 

프로토타입 상속이란?

✔️ __proto__를 통해 다른 객체의 프로퍼티를 상속시켜줄 수 있다.

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

const bmw = {
  color:'blue',
}

const benz = {
  color: 'red';
}

//프로토타입 상속을 통해 bmw와 benz에 car 객체에 있는 프로퍼티를 상속시켜줄 수 있다.
bmw.__proto__ = car;
benz.__proto__ = car;

 

생성자 함수에서 프로토타입 상속하기 

✔️ 생성자 함수로 객체를 만든뒤 공통적으로 필요한 프로퍼티를 prototype 을 통해 추가해줄 수 있다.

const Bmw = function(color){
  this.color = color;
}

//이 생성자 함수에 공통적인 프로퍼티를 프로토타입에 추가 시킨다.
Bmw.prototype.wheels = 4;
Bmw.prototype.drive = function(){
  console.log('drive..');
}

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

console.log(x5.wheels); //4
z4.drive(); //drive..


//prototype 단축
Bmw.prototype = {
  constructor : Bmw,
  wheels : 4,
  drive(){
    console.log('drive..');
  },
};

 

for..in 반복문

✔️ 객체 자체의 프로퍼티 뿐 아니라 상속받은 프로퍼티도 모두 순회된다.

✔️ 반면 키, 값과 관련된 메서드에서는 상속받은 프로퍼티를 제외한다. (ex hasOwnProperty)

 

그래서 왜 필요한가?

✔️

Reference

• https://www.youtube.com/watch?v=ddJcDZHBRm0 
• https://ko.javascript.info/prototype-inheritance