클래스 기반 객체지향 vs 프로토타입 기반 객체 지향 프로그래밍
아무래도 자바스크립트를 공부하다보니 프로토타입 기반 객체 지향 프로그래밍은 이해를 하지만, 클래스 기반 객체 지향은 무엇이고 어떤 점이 다른 지 모르겠어서 최대한 찾아보면서 정리해보기로 했다.
- 봐도 봐도 이해가 안간다. 😂
💡 개인 공부용 게시글 입니다. 옳은 정보가 아닐 수 있습니다.
구글링 자료 정리와 제 생각을 적어놓은 것 입니다.
✨프로토타입 기반 객체 지향
프로토타입 기반 언어는 클래스 기반 언어에서 상속을 사용하는 것과는 다르게, 객체를 원형(프로토타입)으로 하는 복제 과정을 통해 객체의 동작 방식을 재사용할 수 있게 한다.
- 위키피디아
프로토타입 객체를 사용해서 객체의 동작 방식을 재사용 할 수 있다.
✨프로토타입이란?
객체의 부모 역할을 하는 객체를 프로토타입이라고 한다.
자바스크립트는 원시 타입을 제외한 모든 것들은 객체이다. (함수도 객체)
자바스크립트의 모든 객체들은 자신의 부모 역할을 하는 프로토타입과 연결되어있다.
const a = { ... };
console.log(a.__proto__); // a 객체의 프로토타입, 얘도 자신의 프로토타입 객체를 __proto__로 가리킨다.
- a 객체의 프로토타입 또한 객체임으로 프로토타입이 존재한다.
- 이처럼 프로토타입들은 단방향으로 연결이 되어있다.
- 부모인 프로토타입 객체에 존재하는 프로퍼티, 메서드를 사용할 수 있다.
- → 코드의 재사용
✨프로토타입을 이용한 참조
자바스크립트는 복제가 아니라 프로토타입 링크를 통해 프로토타입(원형)을 참조한다.
- TOAST 기술 블로그
자바스크립트는 자신(객체)에게 찾는 메서드나 프로퍼티가 없는 경우, 프로토타입을 타고 올라가 자신의 프로토타입 객체에서 찾게 된다.
// 예제 출처 - https://developer.mozilla.org/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
let f = function(){
this.a = 1;
this.b = 2;
}
let o = new f(); // {a:1 , b:2}
// 생성자 f 함수와 연결된 f 프로토타입 객체에 프로퍼티 추가
f.prototype.b = 3;
f.prototype.c = 4;
// 생성자 함수 f로 생성된 인스턴스(객체)들의 프로토타입은 f.prototype이다.
console.log(o.a); // 1
console.log(o.b); // 2
console.log(o.c); // 4
console.log(o.__proto__ === f.prototype); // true
프로토타입 객체에 있는 메서드와 프로퍼티를 프로토타입 링크를 따라가 사용할 수 있다.
🐱🐉클래스 기반 객체 지향
💡 클래스를 기반으로 상속을 해, 코드를 재사용하거나 기존 코드를 확장 시킬 수 있다.
클래스 기반 언어에서 객체는 일반적으로 두 가지 형태를 가진다.
- 클래스
- 객체의 기본적인 만듦새와 기능을 정의, 객체를 정의한 틀
- 인스턴스
- 사용할 수 있는 객체로 특정 클래스의 양식을 기반으로 한다.
- 모든 인스턴스는 오직 클래스에 정의된 범위 내에서만 작동한다.
- 런타임에서 그 구조를 변경할 수 없다.
클래스 기반 객체 지향은 먼저 클래스(틀)을 만든 후에, 해당 틀을 이용해 인스턴스를 찍어낸다.
클래스를 무조곤 먼저 만든 후에 객체를 만들 수 있다.
클래스 기반 언어에서 객체를 사용하기 위해서는 클래스를 사용해야만한다.
class Animal{
String name;
Animal(String _name){
name = _name;
}
}
class Dog extends Animal{
// 부모 클래스의 기능을 확장
void wow(){
System.out.println(this.name + "와웅!");
}
}
// main 함수 내부에서
Dog myDog = new Dog("멍멍이");
🎶객체 지향의 클래스 기반과 프로토타입 기반의 차이점
사실 아직 크게 감이 잡히지 않는다. 지금까지 이해한 부분에 대해서 글을 정리해보도록 하겠다.
- 객체 지향 프로그래밍은 모든 것을 객체로 본다.
- 객체들은 공통적인 특징을 가진다. ex) 사람은 이름, 나이, 성별 ..등을 가진다.
- 매번 이런 공통적인 부분에 대해 정의를 해주는 것은 매우 낭비이다.
// 사람 객체를 정의하고 싶은 경우
const person1 = {
age:14,
name:'Kim',
}
const person2 = {
age:24,
name:'Choi',
}
// ... 엄청 많은 사람들이 있는 경우
// 하나하나 써주는 것은 너무 고된 일이다.
- 그래서 이런 공통적인 특징을 도출해 사용하기로 했다.
- 클래스 기반 언어(자바)에서는 공통적 특징을 도출해 청사진을 만들어 사용한다.
- 클래스를 정의하는 것이다. = 추상화
- 프로토타입 기반 언어(자바스크립트)에서는 공통적인 특징들을 프로토타입(원형)으로 만들어 사용한다.
// 클래스 기반 (자바)
class Person {
int age;
String name;
void sayName(){
System.out.println(this.name + "!");
}
}
// 프로토타입 기반 (자바스크립트)
// 생성자 함수 생성 시, 프로토타입 객체도 쌍으로 생성된다.
function Person (age, name){
this.age = age;
this.name = name;
}
Person.prototype.sayName = function(){
console.log(this.name + "!");
}
👀내 결론
💡 클래스 기반 언어는 클래스를 사용해 객체를 다루고,
프로토타입 기반 언어는 프로토타입을 사용해 객체를 다루는 것이라 볼 수 있다.
객체를 생성하고, 확장하고, 상속하고 이런 모든 객체를 다루는 과정을 어떤 방식으로 진행하냐에 따라 나누어 진것이라고 생각한다.
클래스 기반 언어는 클래스를 사용하고, 프로토타입 기반은 프로토타입(원형) 객체를 사용해 객체를 다룬다.
참고 자료
Object-Oriented Programming | PoiemaWeb
프로토타입 기반 프로그래밍 - 위키백과, 우리 모두의 백과사전
'공부 > 자바스크립트' 카테고리의 다른 글
[js] 객체지향 프로그래밍 (0) | 2022.11.18 |
---|---|
[js]자바스크립트 클래스 (0) | 2022.11.18 |
[js] 객체 구조 분해 할당과 얕은 복사 방식들 (0) | 2022.11.09 |
[js] 원시자료형과 참조자료형의 차이 (0) | 2022.11.07 |
[js] "1" + "1" = "11"인 이유 (0) | 2022.11.05 |
댓글