Programming/JavaScript

생성자와 new

잇나우 2019. 12. 17. 00:43
반응형
var person1 = {
    'name' : 'apple',
    'introduce' : function(){
        return 'My name is '+this.name;
    }
}
var person2 = {
    'name' : 'banana',
    'introduce' : function(){
        return 'My name is '+this.name;
    }
}

이런식으로 여러 사람의 이름을 담는 객체를 여러개 만든다고 한다면 introduce메소드들은 내용이 완전히 동일하고 객체의 취지가 같다고할때 메소드의 동작방법을 바꾼다고 하면 객체들이 가지고 있는 메소드들을 전부 찾아서 똑같이 바꿔줘야 하는 일이 생긴다. 이러한 것을 중복이라고 한다. 중복이 있다는것은 코드 가독성이 떨어진다는 것. 코드의 양이 많아진다는 것. 유지보수가 대단히 어려워지고 있다는 것이다. 한마디로 문제가 있는 코드다. 이 문제를 해결할 방법이 생성자와 new이다.

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

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

 new라는 것을 앞에 붙이고 함수를 호출하게 되면, 그 함수를 그냥 함수라고 하지 않고 생성자라고 한다. 생성자는 new로 인해서 객체를 만들어 p에 반환하기 때문에 p에는 객체가 만들어졌다. var p = {}과 똑같다고 얘기할 수 있다. (정확히 똑같은것은 아니다) 함수 앞에 new를 붙이면 객체가 된다. 

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

함수 Person앞에 new를 배치했기때문에 person은 생성자가 된다. 인자로 ('apple')을 두고 있어 this.name은 apple이 된다. 이 객체에 name의 프로퍼티값은 apple이 된다. 이 객체는 결국 p1이라는 변수에 담겨지게 된다. p2에도 똑같이 객체를 담았는데 p2에는 banana라는 값을 생성자를 통해 전달을 해서 apple과 banana라는 값이 각각 저장되어 있는 객체를 만들어서 p1과 p2에 전달하고 있다. 위 함수는 introduce라는 메소드가 객체가 생성될때마다 실행되어 만들어 지고 있기 떄문에 단 한 번 introduce라는 메소드를 정의했고 그 다음부터는 메소드를 정의하지 않아도 되는데 바로 생성자가 초기화를 하기 때문이다. (객체에 대한 초기화 initialze) person이라고 하는 생성자가 만들어놓은 빈 객체가 어떠한 프로퍼티를 가져야하고 어떠한 메소드를 가져야하는지 생성자 함수안에다가 기술하는것을 통해서 그 객체가 가지고 있는 어떤 정보, 일 등을 세팅해주고 있는데 이러한 것을 초기화라고 한다.

반응형

'Programming > JavaScript' 카테고리의 다른 글

상속(inheritance)  (0) 2019.12.21
this  (0) 2019.12.20
함수의 호출 apply  (0) 2019.12.16
arguments  (0) 2019.12.16
클로저(closure)  (0) 2019.12.15