자바스크립트 중급 14 - 상속, 프로토타입(Prototype)

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;   //bmw는 car에 상속

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

x5.__proto__ = bmw;  //x5는 bmw에 상속 
                    //Prototype Chain

▶ for ...in 을 이용해서 객체의 프로퍼티 순환하기

   for (p in x5){

       console.log(p);

   }

   x5 : {color: "white", name: "x5"}

   Object.keys(x5);  → ["color", "name"]

   Object.values(x5);  →  ["white" , "x5"] 

     →name과 color를 제외한 프로퍼티는 프로토타입에서 정의한 프로퍼티들이다.

 

▶ for(p in x5){

       if(x5.hasOwnProperty(p)) {

             console.log('o' , p);

       } else {

             console.log('x', p);

       }

}  → color , name

→ hasOwnProperty를 사용하면 객체가 직접 가지고 있는 프로퍼티만 반환해준다.

 

 

//생성자 함수 이용
const car = {
  wheels = 4;
  drive() {
    console.log("drive..");
  },
};


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

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

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

  ↓ 더 간편히 바꾸기

//생성자 함수 이용


const Bmw = function(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");