3.1 프로토타입 개념
프로토타입은 JavaScript의 핵심 개념 중 하나로, 객체들이 다른 객체로부터 속성과 메서드를 상속받을 수 있게 해줘. 많은 다른 프로그래밍 언어와 다르게, JavaScript는 클래스가 아니고 프로토타입 기반으로 상속이 이루어져. 지금부터 프로토타입이 뭔지, 어떻게 작동하는지 그리고 어떻게 사용할 수 있는지 살펴보자.
JavaScript의 프로토타입은 다른 객체들로부터 속성과 메서드를 상속받을 수 있는 객체야. JavaScript의 각 객체는 다른 객체에 대한 숨겨진 링크를 가지고 있어 — 숨겨진 속성 [[Prototype]]으로, 그것은 그 객체의 프로토타입을 가리켜.
이 프로토타입은 자신만의 다른 프로토타입을 가질 수도 있어서 프로토타입 체인(prototype chain)을 형성해. 객체의 속성과 메서드는 이 체인을 통해 상속될 수 있어. 이를 통해 객체들이 기능을 공유하고 객체 계층을 만들 수 있어.
속성 proto
JavaScript에서는 각 객체가 그 객체의 프로토타입을 가리키는 __proto__라는 속성을 가지고 있어. 이 속성은 객체 내에 없는 속성과 메서드를 검색하는 데 사용돼.
이 예제에서는 객체 child가 객체 parent로부터 메서드 greet()를 상속받아:
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = {
__proto__: parent
};
child.greet(); // 출력: Hello from parent
3.2 프로토타입 생성 및 사용
1. Object.create()
Object.create() 메서드는 지정된 프로토타입을 가진 새 객체를 생성할 수 있어.
예시:
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = Object.create(parent);
child.greet(); // 출력: Hello from parent
2. 프로토타입에 속성과 메서드 추가
속성과 메서드는 프로토타입에 추가되어 그것을 상속받는 모든 객체에서 접근할 수 있어.
이 예제에서는 메서드 speak()가 프로토타입 animal에 추가되고 객체 dog에서 접근 가능해:
const animal = {
speak() {
console.log(`${this.name} makes a noise.`);
}
};
const dog = Object.create(animal);
dog.name = 'Buddy';
dog.speak(); // 출력: Buddy makes a noise.
3. 객체의 프로토타입 변경
객체의 프로토타입은 Object.setPrototypeOf() 메서드를 사용하여 변경할 수 있어.
이 예제에서는 객체 duck의 프로토타입이 animal에서 bird로 변경돼:
const animal = {
speak() {
console.log('Animal speaks');
}
};
const bird = {
fly() {
console.log('Bird flies');
}
};
const duck = {
__proto__: animal,
quack() {
console.log('Duck quacks');
}
};
Object.setPrototypeOf(duck, bird);
duck.fly(); // 출력: Bird flies
duck.quack(); // 출력: Duck quacks
3.3 프로토타입 작업
1. 객체의 프로토타입 확인
Object.getPrototypeOf() 메서드는 객체의 프로토타입을 얻을 수 있어.
예시:
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = Object.create(parent);
console.log(Object.getPrototypeOf(child) === parent); // 출력: true
2. 객체가 프로토타입의 인스턴스인지 확인
instanceof 연산자는 객체가 특정 생성자나 프로토타입의 인스턴스인지 확인하는 데 사용돼.
예시:
function Person(name) {
this.name = name;
}
const john = new Person('John');
console.log(john instanceof Person); // 출력: true
3. 객체와 그 프로토타입의 속성 순회
객체와 그 프로토타입의 속성을 순회하기 위해 for...in 루프를 사용할 수 있으며, 이는 모든 열거 가능한 속성을 나열해.
예시:
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = Object.create(parent);
child.name = 'Child';
for (let key in child) {
console.log(key);
}
// 출력:
// name
// greet
객체의 고유 속성만 순회하려면 Object.keys() 메서드 또는 for...of 루프와 Object.entries() 메서드를 사용할 수 있어.
예시:
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = Object.create(parent);
child.name = 'Child';
console.log(Object.keys(child)); // 출력: ['name']
for (const [key, value] of Object.entries(child)) {
console.log(key, value);
}
// 출력:
// name Child
GO TO FULL VERSION