자바스크립트 중급 강좌(상속, 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;
benz.__proto__ = car;
audi.__proto__ = car;

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

x5.__proto__ = bmw;

for(p in x5){
	console.log(p): -> color,name,navigation wheels,drive 출력
    				* x5에서 정의된 color, name를 제외하면 모두다 상속된 것
}

x5에서 navigation을 찾고 없어서 prototype인 bmw에서 찾고 멈춤
drive()를 찾기위해 x5->bmw->car 순으로 찾음
이걸 Prototype Chain 이라함

keys값과 values값은 상속된 property는 나오지 않음

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; * x5.wheels -> 4
z4.__proto__ = car;

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

생성자 함수가 새로운 객체를 만들어 낼 때 그 객체는 생성자의 인스턴스 라고 불림
자바스크립트 에서는 이를 편리하게 확인할 수 있는 인스턴스오브 연산자가 있음
인스턴스오브를 이용하여 객체와 생성자를 비교할 수 있고
이는 해당 객체가 그 생성자로 부터 생선된 것 인지를 판단해서
true 혹은 false를 반환 함

z4는 bmw로 생성됨 그래서 bmw의 인스턴스임
이렇게 하면 bmw를 이용해서 z4로 만들었는지 알려줌 (true출력)
이렇게 생성자로 만들어진 인스턴스 객체에는 constructor 라는 프로퍼티가 존재함
constructor 는 생성자 즉 bmw를 가리킴 (true출력)

prototype을 덮어 쓰면 constructor 사라짐

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

해결법

Bmw.prototype = {
	constructor : Bmw, * 수동으로 constructor 추가해주기
	wheels : 4,
    drive() {
    	console.log("drive..");
    },
    navigation: 1,
    stop() {
    	console.log("STOP");
    },
};

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

const x5 = new Bmw("red");

이런식으로 기존의 색을 아무나 변경 하면 안되기 때문에 클로저 사용

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

const x5 = new Bmw("red");

이런식으로 컬러값을 가져올 수 만 있고 바꾸지는 못하게 됨