프로토타입(Prototype)
프로토타입 기반 언어는 객체 지향 프로그래밍의 한 형태로, 클래스 기반 언어와는 다른 객체 지향 모델을 따릅니다. JS(JavaScript)는 대표적인 프로토타입 기반 언어입니다.
프로토타입 상속:
클래스 기반 언어에서는 객체를 클래스의 인스턴스로 생성하는 반면, 프로토타입 기반 언어에서 객체는 다른 객체로부터 직접 상속됩니다. 즉, 객체는 다른 객체의 프로퍼티와 메서드를 상속받아 사용할 수 있습니다. 이때, 새로운 객체는 원본 객체의 프로토타입을 상속받습니다. 이를 통해 코드 재사용과 확장이 간단하게 이루어집니다.
프로토타입 객체:
프로토타입 기반 언어에서는 객체가 자체 속성과 메서드를 가짐과 동시에 prototype이라는 특수한 속성을 가집니다. 이 prototype 속성은 해당 객체가 상속하는 프로토타입 객체를 가리킵니다.
예를 들어, 모든 JavaScript 객체는 `Object`라는 내장 프로토타입 객체를 상속합니다. 따라서 모든 JavaScript 객체는 `Object` 프로토타입 객체의 메서드와 속성을 사용할 수 있습니다.
프로토타입 체인:
객체가 특정 속성 또는 메서드를 찾을 때, 가장 먼저 해당 자체 객체에서 찾은 후, 찾지 못하면 상위 프로토타입 객체로 이동하여 검색을 계속합니다. 즉, 프로토타입 체인을 따라가며 상위 프로토타입 객체에서 속성 또는 메서드를 찾을 때 까지 검색을 계속합니다.
const array = [];
위와 같이 배열을 하나 생성하고 해당 배열을 까보면, Array와 Object라는 프로토타입 객체를 상속하고 있는 것을 확인할 수 있습니다. 이를 통해 우리는 Array의 push, pop 등 또는 Object의 toString 등과 같은 메서드 및 속성을 사용할 수 있습니다.
프로토타입 조작
프로토타입을 동적으로 조작이 가능합니다.
const demoPrototype = {
say: funtion() {
return 'HI';
}
};
// 객체 생성 및 프로토타입 설정
const myObject = Object.create(demoPrototype);
console.log(myObject.say()); // 'HI'
// 프로토타입 객체 수정
demoPrototype.say = function () {
return 'HELLO'
};
// 프로토타입 객체에 새로운 메서드 추가
demoPrototype.speak = function () {
return 'BYE'
};
// 프로토타입 객체에 속성 추가
demoPrototype.language = 'JS';
console.log(myObject.say()); // 'HELLO'
console.log(myObject.speak()); // 'BYE'
console.log(myObject.language); // 'JS'
'Front-End > JS' 카테고리의 다른 글
JS padStart와 padEnd 메소드: 문자열 길이에 맞게 문자 채워넣기 (문자열 패딩) (0) | 2023.12.04 |
---|---|
JS 깊은 복사와 얕은 복사: JS에서 객체 복사 방법과 차이점 (0) | 2023.07.13 |
JS 스와이프 동작 구현을 위한 Swiper API (0) | 2023.06.05 |
JS 모듈: export(내보내기)와 import(가져오기) (0) | 2023.05.15 |
JS 프로토타입: 자바스크립트의 상속 (0) | 2023.05.15 |