📖 [JavaScript] 상속, 프로토타입

📌 obj.hasOwnProperty(key)

객체에 해당 property가 있는 지 확인하는 작업
불린형으로 알려줌
proto: Object => 프로토타입
객체에서 그 property가 있으면, 탐색을 멈추고,
없으면 위에 나타난 prototype에서 property를 찾음.

📌 상속

공통된 부분을 처리할 때 proty로 해결하기

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의 상속을 받는 것(proty를 받음)
benz.__proto__= car;
audi.__proto__= car;

bmw.color //red
bmw.wheels; //4 -> bmw에서 찾고 없으면 prototype에서 찾아냄. 

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

x5.__proto__=bmw;  //x5가 bmw를 상속받은 것. 

출처: 코딩앙마

🔗 생성자함수 이용해보기

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

Bmw.prototype.wheels=4;
Bmw.prototype.drive = function () {
  console.log('drive..');
};
//생성자 함수가 생성하는 객체에 __proto__를 .prototype으로 설정한다는 의미임

const x5 = new Bmw('red');
const z4 = new Bmw('blue');
//하나만 만들어주면 일일히 해주지 않아도 됨! 

📌 instanceof

새로운 객체를 만들어 낼 때, 그 객체는 새로운 객체의 instace라고 함
객체와 생성자를 비교, 해당 객체가 그 생성자로부터 나온 건지 확인해서
true, false를 반환함.

🔗

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');

z4 instaceof Bmw //true
z4.constructor == Bmw; //true


>>🔗 간단하게 밑에와 같이 해도 됨!
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.constructor == Bmw; //false 
>>✔️그러나 constructor은 false가 나옴
따라서 하나씩 추가하는 게 더 나을 수도,
  혹은
🔗
Bmw.prototype = {
  **constructor: Bmw,** //이렇게 수동으로 명시해줘도 됨! 
  wheels:4,
  drive() {
    console.log("drive...");
  },
  navigation:1,
  stop(){ console.log('stop!');
  },    
};

z4.constructor == Bmw; //true 

🔗
const Bmw=function (color){
  const c = color;
  this.getColor=function() {
    console.log(c);
  };
};

const x5=new Bmw('red');
>이때는 색을 바꿀 수 있는 방법이 없음,
  생성될 당시의 context를 기억하는 것!