상속, prototype

상속, prototype


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

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

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

console.log(bmw)

==========>proto를 써서 상속하기 일명 공통 모듈 만들기
const car = {
  wheels:4,
  drive() {
    console.log("dirve");
  }
}

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

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

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

bmw.__proto__=car;
benz.__proto__=car;
audi.__proto__=car;

웹페이지 검사 페이지에서 
bmw.color
bmw.wheels를 작성하면 해당 내용을 찾아 출력된다. 

===> 상속은 계속 이어진다. x5를 추가해보자. 

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

x5.__proto__=bmw;

===> for~ in을 이용해서 객체의 프로퍼티 순회하기 
웹페지 검사 콘솔에서 타이핑하면 출력이 다된다.  
for (p in x5) {
console.log(p);
} 



////////////////////////////////
가지고 있는 프라퍼티를 확인하려면 hasOwnProperty 메소드를 쓴다. 
for (p in x5) {
if (x5.hasOwnProperty(p)) {
console.log('o',p);
} else{ 
console.log('x',p);
}
}  
//직접 가지고 있는 프라퍼티만 트루를 반환한다. 

//생성자 함수를 이용하면 비슷한 객체를 간단하게 만들 수 있다. 

const Bmw = function (color){
  this.color=color;
  this.wheels=4;
  this.dirve=function(){
    console.log("dirve..");
  };
};


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

//공통적인 것을 분리하면 

const car={
  wheels:4,
  dirve(){
    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 car={
//   wheels:4,
//   dirve(){
//     console.log("drive..")
//   },
// };

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

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


===>프로토타입에 몇 가지를 더 추가해보자 
const Bmw = function (color){
  this.color=color;
};


Bmw.prototype.wheels=4;
Bmw.prototype.drive=function(){
  console.log("drive..")
  };
Bmw.prototype.navigation=1;
Bmw.prototype.drive=function(){
  console.log("stop!");
};


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



//////////////////////
z4는 Bmw의 인스턴스오브 이다. 
z4 instanceof Bmw  //true

z4의 생성자는 bmw를 가리킨다.
z4.constructor ==Bmw;   //true


/////////간단하게 덮어쓰는 방식  
/////// 단점은 z4의 생성자는 bmw를 가리켜야 하는데 여기서 false가 나온다
//z4.constructor ===Bmw;  //false
//이럴 땐 costructor:Bmw 를 프라퍼티로 수동방식으로 넣으면 된다. 


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


Bmw.prototype={
wheels: 4, 
  dirve() {
    console.log("drive..");
    },
  navigation :1,
  stop(){
    console.log("STOP!");
  },
  };


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

// 아래 코드를 보자.  아무나 색상을 바꿀 수 있게 된다. 
const Bmw = function (color) {
this. color = color;
};

const x5= new Bmw("red");

//색상을 못 바꾸게 하려면  closure를 쓰면 된다. 
컬러 함수를 불러올 수만 있고 바꿀 수는 없다. 

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

const x5= new Bmw("red");