javaScript. 객체지향 프로그래밍(OOP)

객체지향 프로그래밍(OOP)

컴퓨터 프로그램을 명령어의 목록으로 보는 시각에서 벗어나
여러 개의 독립된 단위, 즉 "객체"들의 모임으로 파악하고자 하는 것.
각각의 객체는 메시지를 주고받고, 데이터를 처리할 수 있다.

- 유연하고 변경이 쉬움 >> 대규모 소프트웨어 개발에 사용.
- 개발, 보수 용이 / 직관적인 코드 분석 가능.

 

---

 

📌 생성자 (Constructor)

 

- new 연산자를 붙이고 객체를 함수처럼 호출하는 것.

- 자바스크립트에는 class가 없으므로 그 역할을 대신함.

 

 

<RULE> - 생성자함수는 대문자로 시작

- this는 생성자 함수 자신을 가리킴. >> new로 객체를 만들 때 그 객체에 적용됨

function Person(name, gender) {            // 생성자함수 (대문자로 시작)
    this.name = name;
    this.gender = gender;
    this.sayHello = function() {
    	console.log(this.name + ' said "hello"');
    }
}


///////// 객체 생성 ////////////

let yjin = new Person('Yjin', 'f');          
let injung = new Person('injung', 'm');

yjin.sayHello();     // 'yjin said "hello"'
injung.gender;       // 'm'

- 하나의 Person 생성자를 바탕으로 두 사람의 객체를 만들었다.

- 두 객체는 공통적으로 sayHello라는 메서드를 가지고 있다.

 

 

---

📌 프로토타입(Prototype)

- Prototype 객체는 원형을 의미함.

- 같은 생성자로부터 만들어진 객체들은 모두 이 원형 객체를 공유함.

 

 

위 예제에서 만들어진 두 객체는 공통적으로 sayHello 라는 메서드를 가진다.

따라서 Person 생성자의 prototype 객체에 sayHello라는 메서드를 넣으면

이 생성자로 만든 모든 객체에서 sayHello를 사용할 수 있다.

 

 

 

❕❕

this.sayHello보다

Person.prototype.sayHello 로 넣는 것이 더 효율적이다.

 

- 프로토타입은 모든 객체가 공유하므로 한번만 만들어지지만

- this에 넣으면 객체 하나가 만들어질 때 마다 메소드도 하나씩 만들어지므로.

>> 메모리 낭비를 막을 수 있음.

 

 

 

 

---

📌 prototype  vs   __proto__

 

new Person('Yjin', 'f');     // Person {name: 'yjin', gender:'f', __proto__: Object}

생성자를 이용해 yjin이라는 새 사람 객체를 만들었더니

그 안에 처음보는 __proto__라는 객체가 존재한다.

 

[[Prototype]]이라는 것으로 변경된듯.

- 이것이 바로 실제 객체를 만들 때 생성자의 prototype이 참조된 모습이다.

- 생성자의 prototype을 참조하기 때문에, __proto__ 는 prototype과 같다.

 

+) __proto__ 안에 또 __proto__가 존재하는데, 이는 추후 설명.

 

 

 

 

<정리>

• constructor은 생성자 함수 그 자체를 의미.
• prototype은 생성자 함수에 정의한 모든 객체가 공유할 '원형'
• __proto__는 생성자함수를 new로 호출시, 정의해두었던 prototype을 참조한 객체.
• prototype은 생성자함수에 사용자가 직접 넣는 것 / __proto__는 new를 호출할 때 자동으로 만들어짐
• 생성자에는 prototype / 생성자로부터 만들어진 객체에는 __proto__
• __proto__는 prototype이 제대로 구현되었는지 확인용으로 사용.

 

---

prototype과 constructor은 부모자식 관계임.

 

Person.prototype.constructor  === Person

/// Person.prototype === (Person으로 만든 객체).__proto__  이므로
(Person으로 만든 객체).__proto__.constructor === Person

 

 

 

---

REFERENCE

 

https://www.zerocho.com/category/Javascript/post/573c2acf91575c17008ad2fc

(JavaScript) 객체 지향 프로그래밍(생성자와 프로토타입)

이 포스팅은 zerocho님의 javascript 강의를 보고 작성한 글입니다.

공부+기록 용으로 작성한 것이며, 자세한 것은 위 포스팅을 참고하세요!