상속, prototype

1. 정의

객체에는 자신의 property를 확인 하는 함수를 가지고 있음

const user = {name : "Mike"}
console.log(user.name) // Mike

user.hasOwnProperty('name') //true;
user.hasOwnProperty('age') //false

객체의 prototype

2.상속

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

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

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

현재 객체들을 보면 wheels, drive()가 공통

1. prototype 사용

공통된 부분을 처리하는 방법

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의 프로토타입이 된다
console.log(bmw) //{ color: 'red', navigation: 1 }
console.log(bmw.wheels) //4 

계속 상속 가능

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

x5.__proto__ = bmw;
console.log(x5.name); // "x5"
console.log(x5.color); // "white"
console.log(x5.navigation); //1

Prototype Chain
상위 객체에 없으면 다음 상위객체에서 찾음
(x5 -> bmw -> car)

for(p in x5){
	console.log(p)
}
// color
// name
// navigation
// wheels
// drive

값과 관련된 객체 내장 메소드는 상속된 프로퍼티는 안나옴

console.log(x5) // { color: 'white', name: 'x5' }
console.log(Object.keys(x5)) // [ 'color', 'name' ]
console.log(Object.values(x5)) // [ 'color', 'name' ]

2. 생성자 함수 이용

공통된 부분을 처리하는 방법

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!

생성자 함수에 prototype을 설정하여 인스턴스들에 공통된 프로퍼티를 설정함

1. instanceof

객체와 생성자를 비교할 수 있음
해당 객체가 생성자로 부터 생성된 건지 확인 가능

const z4 = new Bmw("blue");
console.log(z4 instanceof Bmw) // true;

2. constructor

생성자로 만들어진 인스턴스는 constructor 를 가짐
constructor는 해당 객체의 생성자를 나타냄

console.log(z4.constructor) // [Function: Bmw]
console.log(z4.constructor === Bmw) // true

3. prototype 통합

Bmw.prototype {
	wheels : 4,
    drive() {
      console.log("drive...");
    },
    navigation : 1,
    stop() {
      console.log("STOP!)
    }
}
  
const z4 = new Bmw("blue");
console.log(z4.constructor) //[Function: Object]
console.log(z4.constructor === Bmw) // false

constructor 가 명확하지 않아 prototype을 통합하여 사용하지 않아야 한다.

통합해서 사용하는 경우
수동으로 명시 해야 생성자 분명함

Bmw.prototype {
  	constructor : Bmw,
	wheels : 4,
    ...
}
    
console.log(z4.constructor) // [Function: Bmw]
console.log(z4.constructor === Bmw) // true

하지만 개발자에 의해서 생성자의 변경이 가능하므로 되도록 사용하지 않기

3. Closure 활용

임의로 변경 불가능하게 하는법

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

const x5 = new Bmw("red");
x5.getColor(); //red

이렇게 되면 초기에 세팅된 값(color)를 얻을 수 만있고 변경할 수 는 없다.