[JavaScript] 생성자와 new // + this 조금 // 객체

출처 : 생활코딩 생성자와 new

객체

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

객체안에 담겨있는 변수는 프로퍼티(property)

객체안의 프로퍼티(속성)안에 담겨있는 함수를 메소드(method)라한다

객체를 만들어보자.

 

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

 

여기서 프로퍼티는 name, introduce

메소드는 introduce안에 있는 function() 이다.

 

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

객체의 구조를 재활용할 수 있는 방법이 필요하다. 이 때 사용하는 것이 생성자다.

 

(생성자와 new (2/3))

 

(2:53) 

this는 (this가 있는 함수)함수가 속해있는 객체 여기서 person변수가 담고있는 객체를 가리킴

여기서(위의 코드) this.name은 'egoing'이라는 문자열을 가리키게된다

 

(5:30)

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

 

이렇게 써버리면 introduce 속성 값이 중복이 되버린다 메소드가 완전하게 동일하다 ===> 중복발생

---> 이것을 해결하기위해 생성자 new사용

 

 

생성자

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

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

 

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());

 

new 를 씀으로써 새로운 객체를 반환 

★함수에 new를 붙이면 return 값은 객체가 된다

 

(10:25)

생성자는 초기화 한다 객체에대한 초기화 (중복오류방지)

 

 

생성자 내에서 이 객체의 프로퍼티를 정의하고 있다. 이러한 작업을 초기화라고 한다. 이를 통해서 코드의 재사용성이 대폭 높아졌다.

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