프로토타입(prototype)
자바스크립트의 모든 객체는
프로토타입(prototype)이라는 객체를 가지고 있습니다.
모든 객체는 그들의 프로토타입으로부터프로퍼티와메소드를 상속받습니다.
이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체를프로토타입(prototype)이라고 합니다.
상속(inheritance)
상속(inheritance)이란 새로운 클래스에서 기존 클래스의 모든 프로퍼티와 메소드를 사용할 수 있는 것을 의미합니다.상속을 통해 새로운 프로그램의 요구에 맞게 기존 클래스를 수정하여 재사용할 수 있습니다.
또한, 클래스 간의 종속 관계를 형성함으로써 객체의 관계를 조직화할 수 있는 장점이 있습니다.따라서 이러한 상속은 추상화, 캡슐화와 더불어 객체 지향 프로그래밍을 구성하는 중요한 특징 중 하나가 됩니다.
const bmw = {
color = "red",
navigation : 1,
wheels : 4,
drive() {
console.log("drive..");
}
}
const benz = {
color = "black",
wheels : 4,
drive() {
console.log("drive..");
}
}
const audi = {
color = "blue",
wheels : 4,
drive() {
console.log("drive..");
}
}
--> wheels 와 drive 함수가 모든 객체에 공통으로 있기 때문에 중복을 제거하기 위해서 상속을 이용한다.
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;- 아래의 코드는 car가 bmw , benz, audi의 prototype이 되는 것을 의미한다.
- 이 말은 즉 , bmw, benz, audi가 car의 상속을 받는다는 뜻이다.
bmw.wheels 를 하게 되면
먼저 bmw 객체 내에서 먼저 프로퍼티를 찾다가 , 찾지 못하면
__proto__ 객체에서 탐색을 하여 프로퍼티를 찾으면 그 프로퍼티를 이용한다.
const x5 = {
color : "white",
name: "x5",
};
x5.__proto__ = bmw;
-> 상속은 이어지기 때문에 x5.color를 하게 되면 x5 객체 내에서 color 프로퍼티를 먼저 찾게 되지만 ,
x5.navigation을 하게되면 x5의 프로토타입인 bmw객체로 가서 프로퍼티를 찾아 사용한다.
만약 x5.drive() 하게 되면 , x5객체 내에서 drive메소드를 찾다가 찾지 못하고 프로토타입인 bmw 로 가서 메소드를 찾는다. 그러나 bmw 에서도 찾는데 실패하게 되고 결국 car 프로토타입까지 도달하여 해당 메소드를 찾아 실행하게 된다.
--> 이런 것을 Prototype Chain 이라고 한다
생성자 함수에 prototype 설정하기
//const car = {
// wheels : 4,
// drive() {
// console.log("drive..");
// },
//};
const Bmw = function(color) {
this.color = color;
};
Bmw.prototype.wheels = 4;
Bmw.prototype.drive = function() {
console.log("drive..");
};
// 위 코드와 동일한 작성법
Bmw.prototype = {
constructor : Bmw,
wheels : 4,
drive() {
console.log("drive..");
},
}
const x5 = new Bmw("red");
const z4 = new Bmw("blue");
// x5.__proto__ = car;
// z4.__proto__ = car;
--> 다음과 같이 Bmw.prototype.?? 으로 사용해도 아래의 __proto__ 문법의 의미와 동일하게 작성할 수 있다.
이렇게 되면 객체를 생성할 때마다 __proto__ 를 해주지 않아도 되는 편리함이 있다.생성자 함수를 통해 만들어진 객체 (인스턴스) 확인하기
- instanceof 와 .constructor 를 통해 타입 비교
z4 instanceof Bmw
= true
z4.constructor === Bmw;
= trueClosure 이용하기
const Bmw = function (color) {
this.color = color;
};
const x5 = new Bmw("red");
--> x5.color = "black" 을 해버리면 색상이 변경되는데,
만약 색상이 변경되지 않도록 코드를 작성하고 싶으면 closure를 이용하면 된다.
const Bmw = function(color){
const c = color;
this.getColor = function(){
console.log(c);
}
}
--> closure 를 이용했기 때문에 색상을 기억하고 해당 색상을 변경시킬 방법은 없다.
