javascript 상속, 프로토타입(Prototype)

 

* hasOwnProperty: 객체에는 자신이 프로퍼티를 가지고 있는지 확인할 수 있는 메서드. true/ false로 결과 알려줌.

(개발자 도구 이용해 확인)

const user ={
    name:'Mike'
}
undefined
user.name
'Mike'
user.hasOwnProperty('name')
true
user.hasOwnProperty('age')
false

console 창에서 usr 입력하고 name: "MIke" 에서 화살표를 누르면 __proto__: Object 라는 객체가 있음 -> 프로토타입

* 프로토타입: 숨겨진 프로퍼티. 객체에서 프로퍼티를 읽으려고 하는데 없으면 __proto__에서 찾음. 이를 이용해 중복 코드를 줄일 수 있음.

- 만약 hasOwnProperty가 객체 안에 있는 경우: 일단 그 객체에 프로퍼티가 존재할 경우 거기서 탐색을 멈춤. 없는 경우에만 프로토타입에서 프로퍼티를 찾음.

예시)

- wheels랑 drive는 내용 동일해서 __proto__로 해결 가능

const car = {
  wheels: 4,
  drive(){
    console.log("drive..");
  },
}; //상위 개념의 공통 객체

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

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

const audi = {
  color: 'blue',
};

bmw.__proto__ = car;
benz.__proto__ = car;
audi.__proto__ = car;
//car가 각 해당하는 프로토타입이 됨 = bmw, benz, audi는 car의 상속을 받음

-> console창에 bmw.wheels 입력 시 4가 나옴

 

* 상속은 계속 이어질 수 있음

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

const bmw = {
  color: 'red',
  navigation: 1,
};
bmw.__proto__ = car;

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

-> 상위 객체 car에 입력한 내용과 x5 입력한 프로토타입 모두 나올 수 있음.  ( car > bmw > x5)

=> 이러한 연쇄적인 부분을 프로토타입 체인(Prototype Chain) 이라고 함.

 

 

 

 

◎ for in을 이용해서 객체 순환할 경우: name과 color를 제외하고는 프로토타입에서 정리한 프로퍼티
- object.keys는 상속된 프로퍼티가 나오지 않음. name과 color에 대한 key 값만 나옴

 

 

 

 

 

◎for in에서 구분하고 싶을 경우: hasOwnProperty 사용하기

객체가 직접 가지고 있는 프로퍼티만 true를 반환해줌

 

 

 

 

 

 

 

- 생성자 함수 이용하면 비슷한 객체를 더 간단하게 처리하기

생성자 함수가 생성하는 객체에 __proto__를 prototype을 이용해 설정

const Bmw = function(color){
  this.color = color;
};
Bmw.prototype.wheels = 4;
Bmw.prototype.drive = function(){
  console.log("drive..");
};
Bmw.prototype.navigation = 1;
Bmw.prototype.stop = function(){
  console.log("stop!");
};
const x5 = new Bmw("red")
const z4 = new Bmw("blue")
//x5.stop(); -> stop!

* instance: 생성자 함수가 새로운 객체를 만들어 낼 때 그 객체는 생성자의 instance 라고 불려지는데 자바스크립트에서는 이를 편리하게 확인할 수 있는 instanceof 연산자가 있음.

- instanceof: 이를 이용해 생성자와 객체를 비교할 수 있고 해당 객체가 생성자로부터 생성된 것인지 판단하여 true / false로 반환

예시)z4 instanceof Bmw -> true: z4는 Bmw로부터 생성됨 그래서 Bmw의 instance. 

 

*constructor: 객체를 만든 생성자 함수. 여기서는 생성자인 Bmw에 해당

예시) z4.constructor === Bmw; -> true

- 주의할 점: 프로퍼티를 덮어쓰게 되면 constructor 값이 false가 나오므로 하나씩 쓰거나 직접 수동으로 적어넣어야 함.

const Bmw = function(color){
  this.color = color;
};
Bmw.prototype = {
  wheels: 4,
  drive(){
    console.log("drive..");
  },
  navigation: 1,
  stop(){
    console.log("stop!");
  },
};
const x5 = new Bmw("red")
const z4 = new Bmw("blue")

//z4.constuctor === Bmw; -> false

const Bmw = function(color){
  this.color = color;
};
Bmw.prototype = {
  constructor: Bmw,
  wheels: 4,
  drive(){
    console.log("drive..");
  },
  navigation: 1,
  stop(){
    console.log("stop!");
  },
};
const x5 = new Bmw("red")
const z4 = new Bmw("blue")

//z4.constuctor === Bmw; -> true

=> 자바스크립트는 명확한 constructor을 보장하지 않음. 개발자에 의해서 언제든지 수정할 수 있음을 염두해두기

const Bmw = function(color){
  this.color = color;
};
const x5 = new Bmw("red");
//x5.color = "black"; ->'black'
//x5.color ->'black'

- 클로저를 이용해서 초기의 값만 얻을 수 있고 변경 불가능하게 하기.

const Bmw = function(color){
  const c = color;
  this.getColor = function() {
    console.log(c);
  };
};
const x5 = new Bmw("red");