JavaScript

생성자와 new

객체

객체란 서로 연관된 변수와 함수를 그룹핑한 그릇이라고 할 수 있다. 객체 내의 변수를 프로퍼티(property) 함수를 메소드(method)라고 부른다. 객체를 만들어보자.

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

객체를 만드는 과정에 분산되어 있다. 객체를 정의 할 때 값을 셋팅하도록 코드를 바꿔보자.

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

만약 다른 사람의 이름을 담을 객체가 필요하다면 객체의 정의를 반복해야 할 것이다. 객체의 구조를 재활용할 수 있는 방법이 필요하다. 이 때 사용하는 것이 생성자다.

생성자

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

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

함수를 호출할 때 new을 붙이면 새로운 객체를 만든 후에 이를 리턴한다. 위의 코드는 새로운 객체를 변수 p에 담았다. 여러사람을 위한 객체를 만든다면 아래와 같이 코드를 작성해야 할 것이다. 

function Person(){}
var p1 = new Person();
p1.name = 'egoing';
p1.introduce = function(){
    return 'My name is '+this.name;	
}
document.write(p1.introduce()+"<br />");

var p2 = new Person();
p2.name = 'leezche';
p2.introduce = function(){
	return 'My name is '+this.name;	
}
document.write(p2.introduce());

별로 개선된 것이 없다. 

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

 

댓글

댓글 본문
작성자
비밀번호
  1. 소눗
    자바랑 비슷한 점이 꽤 많아서 이해하기 쉽네요..
    자바에서 객체를 만들어서 저장하려고 하면 클레스를 생성하고 인스턴스나 상속을받아서 사용했어야했는데
    자바스크립트에서는 함수 자체를 객체로 만들 수 있네요.
    편리한 언어같습니다.
  2. sSll바버미니llSs
    감사합니다. 오래전에 봤는데 이제 이해 했네요!
  3. 완료!
    완료! 감사합니다~
  4. 객체보다 함수지향인듯한 느낌이 드네요. 각각의 메소드를 함수로 떼어놓고 객체를 생성할때마다 필요한 메소드를 가져다
    쓸수 있다는 말인지..제대로 이해한건지 모르겠어요.
  5. Daehyeop Ko
    3번 돌려서 봤습니다! 확실한 이해가 필요할 것 같아요! 감사합니다
  6. 심세용
    배우면 배울수록 참 신기한 언어임에 매력을 느낍니다!
  7. 김은희
    저도 동감 자바스크립트란 녀석 4차원 같아요~^^
    알고싶어집니다~
  8. yihsang
    함수의 의미가 심오합니다.
    감사합니다.
  9. 이주환
    2016. 04. 25

    중복제거는 좋은 코드를 만드는 방법중 하나일정도로 중요하죠.
  10. happydeveloper
    음미한다는 말이 왔닿네요~ 공부는 원래 재미있어야 하는데... 당장 써먹기 바뻐서 그 재미를 잃어버리기 쉬운 것 같아요~
  11. JustStudy
    고맙습니다.
  12. terminater
    자바를 공부한 적이 있어 개념 파악은 그리 어렵지 않네요. 객체의 형태가 다르고 생성하는 법이 많이 다르지만 콜백과 클로저를 제외하고는 이해하는데 아직까지 큰 어려움은 없네요.
  13. 고고
    객체지향을 제대로 다루지 못하고 C같이 하드코딩하게되면 오히려 안쓰니만 못하게 됩니다. 상속, 추상화, 인터페이스, 오버로딩, 오버라이딩을 적절하게 사용해야 합니다.

    그나저나 함수가 생성자 역할까지 한다니 놀랍고 재밌네요 ㅋㅋㅋㅋ
    기대되요 다음강의 :)
  14. 자스입문
    객체 지향이 꼭 좋은점만 있는건 아닙니다. 예를들어 코드의 부분중복발생시 만약 99%는 같고 1%는 다를 경우
    1%의 다른 부분때문에 99%가 중복된 보기 않좋은 코드를 짜야하는 경우도 왕왕 발생하고 이러면 1%는 다른 부분으로 또 캡슐화나 나누면 되지 안냐는 분이 있을지 모르겠는데 그때, 즉 나눌 때 부터 객체지옥이 시작됩니다.
    또한 객체지향개념중 캡슐화는 일단 보기에는 최종 결과물이 한줄로 끝나서 간결해 보일수는 있지만, 이것도 지나치게 하면 가독 불능상태가되는데, 캡슐안에 캡슐 또 안에 캡슐 이런식이면 객체 추적만하다가 내가 어디까지 봤더라? 이렇게 객체지옥은 시작됩니다.
    차라리 어설픈 객체지향보다는 중복이 좀 발생하더라도, 좀 길더라도, 들여쓰기, 주석처리가 잘되어있는 한번에 읽을수 있는 코드가 훨 나은거 같습니다.
    대화보기
    • DoubleH
      이해는 되는데 굳이 이렇게 다르게 할 필요가 있었나 싶네요 ㅠㅠㅠㅠ
      배우는 입장에서는 하나로 통일해주었음 좋겠다는....
    • chokojung12@gmail.com
      진짜 감사합니다. 이부분은 볼때 마다 혼란스럽네요;; 억지 객체지향인거같네요.
    • Gaeun Anna Lee
      자바보다가 자바스크립트를 보니 새롭군요! 이 부분은 신기하기도 해요
      좋은 강의 감사드립니다~
    • 삽질중
      실무하면서도 자바스크립트 객체지향적으로는 쓰지않아 잊고 있었는데
      본 수업을 통해 다시 상기시키고 갑니다^^
    • document.write
      변수 이름만 지정해도 객체가 되네요
      콘솔창에서
      var a=2;
      typeof a; 하면 number인데
      a.하면 객체에 있는 속성이 나열되고 사용가능
      var a='abcd'
      스트링제어하는 속성들 나열되고
      var a=fucntion(){};
      함수 제어하는 속성들 나열되고 사용가능
    • Bogyun Seo
      감사합니다.
    • 조신부리
      감사합니다
    • Welfare23
      Excellent explanation on Object. Very helpful for me today. Thanks so much
    • 나무마루
      감사합니다.
    • egoing
      영상을 교체했습니다.
      대화보기
      • bara
        동영상 첫번째것은 안나옵니다. 똑같은 화면만 계속 나오네요.
        대화보기
        • egoing
          문제가 있어서 인코딩을 새로 했었습니다. ^^
          대화보기
          • 간다
            1 번째 동영상 잘 보입니다.
          • 알루
            첫번째 동영상 여전히 안보이는거 같아요.. ^^;
          • egoing
            잘 보이네요. 확인 부태 드려요
            대화보기
            • 깨도
              첫번째 동영상은 화면 녹화가 안된것 같습니다.
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기