power-girl0-0

[객체지향] 생성자와 new 본문

언어/Javascript

[객체지향] 생성자와 new

power-girl0-0 2021. 2. 5. 13:34
728x90

생활코딩 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743)


 객체 

객체란 서로 연관된 변수와 함수를 그룹핑한 그릇이라고 할 수 있다.

객체 내의 변수를 프로퍼티(property) 함수를 메소드(method)라고 부른다.

또한, 객체에 담겨 있는 변수를 프로퍼티(property) 또는 속성이라고 한다.


객체를 만들어보자.

객체를 만들 때는 { }기호를 사용한다.

var person = {}
person.name = 'egoing';
person.introduce = function(){
    return 'My name is '+this.name;
}
document.write(person.introduce());

위 코드에서 this라는 것은 해당 함수를 담고 있는 객체를 가르킨다.


하지만, 위 소스코드는 객체를 정의 하는 것과 값을 넣는 과정이 분산되어 있다.

이런 문제를 해결하기 위한 방법은 객체의 { }안에 직접 프로퍼티와 메소드를 정의해주는 것이다.

var person = {
    'name' : 'egoing',
    'introduce' : function(){
        return 'My name is '+this.name;
    }
}
document.write(person.introduce());

위 소스코드와 같은 방법으로 작성하면, 가독성도 좋고 중간에 변조될 위험성도 줄어든다.

 

하지만, 위와 같은 두가지 방법으로 여러 사람의 이름을 담을 객체가 필요하다면 어떻게 해야할까?

똑같은 객체의 정의를 반복해야 한다.

 

그래서, 객체의 구조를 재활용할 수 있는 방법이 필요하다.

이러한 해결방법은 생성자를 사용하는 것이다.


 생성자 

생성자(constructor)는 객체를 만드는 역할을 하는 함수다.

자바스크립트에서 함수는 재사용 가능한 로직의 묶음이 아니라 객체를 만드는 창조자라고 할 수 있다.

function Person(){}
var p = new Person();	//Person()이 생성자이다.
p.name = 'egoing';
p.introduce = function(){
    return 'My name is '+this.name; 
}
document.write(p.introduce());

함수를 호출할 때 new을 붙이면 새로운 객체를 만든 후에 이를 리턴한다.

즉, 함수 앞에 new가 붙으면 리턴 값은 객체가 된다. 


위 코드를 여러사람을 위한 객체로 만든다면, 아래와 같이 코드를 작성해야한다.

function Person(name){
    this.name = name;
    this.introduce = function(){
        return 'My name is '+this.name; 
    }   
}

var p1 = new Person('egoing');
document.write(p1.introduce()+"<br />");
 
var p2 = new Person('leezche');
document.write(p2.introduce());

person함수의 .introduce는 객체가 생성될 때마다 실행되면서 만들어지고 있기 때문에, 단 한번만 메소드를 정의하여도 된다.


생성자 내에서 이 객체의 프로퍼티와 메소드를 정의하고 있으며, 이를 초기화라고 한다.

 

즉, 생성자는 객체에 대한 초기화하는 것을 알 수 있다.

이를 통해서 코드를 재사용할 수 있으며, 코드 길이도 간결해진다.

 

※ 생성자 함수는 일반함수와 구분하기 위해서 첫글자를 대문자로 표시한다.


 자바스크립트 생성자의 특징 

일반적인 객체지향 언어에서 생성자는 클래스의 소속이다.

하지만 자바스크립트에서 객체를 만드는 주체는 함수이다.

 

함수에 new를 붙이는 것을 통해서 객체를 만들 수 있다는 점은 자바스크립트에서 함수의 위상을 암시하는 단서이면서 또 자바스크립트가 추구하는 자유로움을 보여주는 사례라고 할 수 있다.

 

 

 

 

 

728x90

'언어 > Javascript' 카테고리의 다른 글

[객체지향] this  (0) 2021.02.05
[객체지향] 전역객체  (0) 2021.02.05
[객체지향] 객체지향 프로그래밍  (0) 2021.02.05
[함수지향] 함수의 호출  (0) 2021.02.05
[함수지향] arguments  (0) 2021.02.05
Comments