[ JavaScript ] JS 생성자,객체생성,메소드생성

이미지 출처 :        https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.

 

 

 

---

 

 

 

 

- 객체생성

 

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

 

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

 

 

var person = {}
person.name = 'test';
person.introduce = function(){
    return 'My name is '+this.name;
}
console.log(person.introduce());

 

첫번째 행에서는 person 이라는 빈 객체를 만든것입니다.

 

두번째 행에서는 person 객체에 name 이라는 속성에 'test' 라는 값을 담은 것입니다.

 

세번째 행은 person 객체에 introduce 라는 속성을 만들었는데, 이 속성은 함수입니다.

즉, 메소드를 만들었다고 할 수 있습니다.

 

 

 

 

위의 예제는 객체를 만드는 과정이 분산되어 있습니다.

 

객체를 정의할 때 값을 바로 셋팅할 수 있도록 코드를 변경해보도록 하겠습니다.

 

 

 

 

var person = {
    'name' : 'test',
    'introduce' : function(){
        return 'My name is '+this.name;
    }
}
console.log(person.introduce());

 

 

 

만약 다른 사람의 이름을 담을 객체가 필요하다면 객체의 정의를 반복해야 합니다.

객체의 구조를 재활용할 수 있는 방법이 필요해보이죠.

 

이때 생성자가 필요합니다.

 

 

 

 

- 생성자(Constructor)

 

 

 

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

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

 

 

 

function Person(){}
var p = new Person();
p.name = 'test';
p.introduce = function(){
    return 'My name is '+this.name; 
}
console.log(p.introduce());

 

 

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

위의 예제는 새로운 객체를 변수 p에 담았습니다.

 

그런데 만약 여러사람을 위한 객체를 만든다면 아래와 같이 코드를 작성해야 할 것입니다.

 

 

function Person(){}
var p1 = new Person();
p1.name = 'test';
p1.introduce = function(){
    return 'My name is '+this.name; 
}
console.log(p1.introduce());
 
var p2 = new Person();
p2.name = 'test1';
p2.introduce = function(){
    return 'My name is '+this.name; 
}
console.log(p2.introduce());

 

 

이 경우, new 를 이용해 객체를 만든 것과 포스팅 초반에 { } 를 이용해서 객체를 만든 것에

큰 차이가 없죠.

 

 

 

 

function Person(name){
    this.name = name;
    this.introduce = function(){
        return 'My name is '+this.name; 
    }   
}
var p1 = new Person('test');
console.log(p1.introduce());
 
var p2 = new Person('test1');
console.log(p2.introduce());

 

 

 

생성자 내에서 이 객체의 프로퍼티를 정의하고 있습니다.

이러한 작업을 초기화라고 합니다.

 

이를 통해서 코드의 재사용성이 대폭 높아진 것을 알 수 있습니다.

 

 

코드를 통해서 알 수 있듯이 생성자 함수는 일반함수와 구분하기 위해서 첫글자를 대문자로 표시합니다.

 

 

 

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

 

 

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

 

저도 자바를 배울 때 그랬고, 그래서 더 헷갈리는 중입니다,,,

 

자바스크립트에서 객체를 만드는 주체는 함수입니다.

 

 

함수에 new를 붙이는 것을 통해서 객체를 만들 수 있다는 점은

자바스크립트에서 함수의 위상을 암시하는 단서이면서도,

 

또 자바스크립트가 추구하는 자유로움을 보여주는 사례라고 할 수 있습니다.

 

 

SUA 정보보안 멘토링에 참여하고 있습니다.