상세 컨텐츠

본문 제목

[js] 생성자

TIL (Today I Learned)

by NayC 2022. 1. 24. 20:06

본문

728x90

 

 

 

객체지향 프로그램의 기본

- 연관되어 있는 변수, 메소드끼리 객체로 묶어준다. 

- 그리고 이 객체들은 '독립성'을 갖게 되며, 부품처럼 사용이 가능해진다.

-> 객체지향을 통해 도달하고 싶은 목표 " 좋은 부품의 로직을 만드는 것 " 

 

생성자와 new 

-> 객체를 만드는 가장 보편적인 방법 (2014년 강의. 지금 '일부러' 예전거를 공부하고 있다.) 

 

var person = {} // Object를 나타냄
person.name = 'park';
person.introduce = function(){
    return 'My name is ' + this.name;
}

console.log(person.introduce());

 

object는 데이터를 담을 수 있는 비어있는 상자라고 생각해도 좋다. 

객체에 데이터를 담을 수 있는 방법은, 

 

변수.프로퍼티 = 내용

변수.메소드 = 함수

 

여기서 this는 함수가 속해있는 객체를 가리킴.

 

✅ 이 방식의 문제점 -> 객체 정의 (var person = {}) 객체 내용들이 너무 떨어져 있다는 점. 

-> 객체 정의하는 곳 사이에, 프로퍼티와 메소드를 직접 정의해주자. 

 


2번째 그림도 옳지 않음. 

수정해줘야 함. 

뭘 수정해줘야 할까? 

주의 사항 : 2번째 줄 맨 끝을 ; 라고 하면 오류가 난다. 

 

-> 객체 안에 내용들을 넣어주서는 응집성을 높여주었다. 


✅ 만약 kim 객체를 하나 더 만들어준다고 했을 때, 이름은 그렇다 치더라도 함수 내용이 완전히 '중복'이 됨 

-> 코드 가독성 떨어지고, 코드가 길어지고, 유지 보수가 힘들어짐 ... 

-> 중복 제거를 해주자. 

 

문제 상황 

 

해결 : 생성자와와 new 로 중복 제거하기

js 별명 = 함수형 언어. (js에서 함수가 차지하는 위상을 알 수 있음)

-> js를 이해하는 근본은 '함수' (함수를 잘해야 객체도 잘한다.)

 

생성자 (constuctor)

- 객체를 만드는 역할을 하는 '함수'

- js에서 함수는 재사용 가능한 로직 묶음이 아니라, 객체를 만드는 창조자라고 할 수 있음  

 

 

그런데

new를 붙이게 되면 결과가 달라진다. 

 

앞에 new 가 붙어있는 함수는 -> 그냥 함수라고 부르지 않고, '생성자'라고 부른다. 

뭐를 생성한다? 객체를 생성한다. 즉, '객체의 생성자' 

 

Peson()은 new로 인해서 비어있는 객체를 만들고 반환하기 때문에, 변수 p에는 그 비어있는 객체가 담기게 된 것. 

 

이건 마치, 이렇게 직접 리터럴로 객체를 만든 것과도 같다. 

var p = {}

 

 

//

 

[자바]

- 클래스 내에 생성자가 존재

- 생성자 호출을 통해서 클래스의 객체를 만들어냄

 

[자바스크립트]

- 함수가 어디에도 속해있지 않음 

-> 그리고 그냥 함수 앞에 new를 붙이면 객체를 만들어냄. 

이건 최신 문법 업데이트 필요

 

function Person(){} // 함수 하나 호출

var p = new Person(); // new 생성자 통해 객체 만듦, var p = {} 와 동일
p.name = 'park';
p.intoduce = function(){
    return 'My name is ' + this.name;
}

console.log(p.intoduce());

만약 kim 객체를 하나 더 만들어준다고 했을 때, 이름은 그렇다 치더라도 함수 내용이 완전히 '중복'이 된다라는 문제 때문에 지금 생성자를 배우는건데 이렇게 하면 문제가 똑같음. p1, 'kim'만 달라질 뿐 함수 중복이 그대로 똑같이 일어남. 개선된 점이 없음. 

 


So, 

1. 생성자 함수 Person을 정의

2. this.name = 'egoing'이 됨. 

    즉, 이 객체의 name 프로퍼티 값이 이렇게 되는 것

3. 객체에 메소드도 담아주고

4. 이 과정이 다 끝난 후에 p1이라는 변수에 저장

객체가 생성자를 통해 만들어질 때마다, this.introduce가 만들어지기에 단 한 번만 정의해도 되게 됨 (즉, 중복이 사라짐!)

-> 생성자가 하는 일은 바로 '초기화' 

     객체에 대한 초기화를 함

- new 생성자를 통해 만들어지는 '빈 객체'가 어떤 프로퍼티와 어떤 메소드를 가져야 하는지를 이렇게 생성자 함수 안에 적으며 그 객체가 가지고 있는 정보, 할 수 있는 일들을 셋팅해주는 것 = 초기화 

 

 

 

 

출처 : https://youtu.be/qnOX3M7VpQ8

 

 

 

 

728x90
반응형

'TIL (Today I Learned)' 카테고리의 다른 글

jwt  (0) 2022.01.27
node - middleware) express-validator  (0) 2022.01.26
ESLlint  (1) 2022.01.24
도커 실행  (0) 2022.01.18
API Gateway (feat. MSA)  (0) 2022.01.13

관련글 더보기