[JavaScript] 생성자와 new

생성자와 new

new를 붙이면 객체가 된다.

1. 객체

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

자바스크립트는 어느 객체지향언어와 같지 않다. 자바스크립트만의 독특한 체계를 가지고 있다. 자바스크립트 계열에 속하는 언어들은 prototypeBased 프로그래밍 언어이다.

자바스크립트 객체 : 전통적인 함수의 특징을 그대로 가지고 있지 않고 객체지향적인 문법 비슷하게 사용하면서 함수형 언어이다. 알면 알수록 난해하다. 하지만 자바스크립트가 추구하는 스타일은 자유롭고 유연하다.

엄격성, 규제(자바)가 깐깐하는 것과는 대비된다. 언어를 바라보는 넓어지는 기회로 삼자.

var person = {}//객체 생성(비어있는 객체)--> object라는 이름의 object를 만든다.

person.name = 'nimi';//name은 변수(프로퍼티)

person.introduce = function(){// 프로퍼티에 담겨있는 함수는 메소드라고 한다.(함수안에 담겨는 변수는 프로퍼티라고 한다./변수에 담겨있는 값이 함수라면 메소드라고 한다.)

    return 'My name is '+this.name;

}

document.write(person.introduce());

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

var person = {

    'name' : 'nimi',

    'introduce' : function(){

        return 'My name is '+this.name;// this는 실행문장을 정의한 함수의 객체 --> person 변수가 담고 있는 객체 --> name은 egoing

    }

}

document.write(person.introduce());

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

2. 생성자

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

함수가 객체의 시중을 드는 것이 아니라 객체를 창조하는 역할--> 자바와 헷갈리게 하는 요소

자바스크립트에서는 클래스가 없다. 자바는 클래스가 있다. 클래스 안에 생성자가 있음--> 객체 생성

자바스크립트는 생성자가 클래스에 소속하지 않아서 생성자는 그냥 함수에 불과하다. 그 함수에 new를 붙이면 그냥 객체를 만든다.--> 함수에 new를 붙이면 리턴값은 객체가 된다.

function Person(){}// 평범한 함수

var p = new Person(); // new 붙이고 함수 호출하면 ---> 함수가 아니라 생성자라 한다.(객체의 생성자)--> 비어있는 객체를 만들고 p에 반환  

p.name = 'nimi';

p.introduce = function(){// 프로퍼티에 익명함수를 넣게 되면 이 프로퍼티는 메소드라고 불리게 된다.

    return 'My name is '+this.name; 

}

document.write(p.introduce());

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

function Person(){}

var p1 = new Person();

p1.name = 'nimi';

p1.introduce = function(){

    return 'My name is '+this.name; 

}

document.write(p1.introduce()+"<br />");

 

var p2 = new Person();

p2.name = 'minaral';

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

document.write(p1.introduce()+"<br />");

 

var p2 = new Person('minaral');

document.write(p2.introduce());

생성자 내에서 이 객체의 프로퍼티를 정의하고 있다. 이러한 작업을 초기화(생성자가 객체에 대한 초기화 작업을 한다.)객체가 가지고 있는 정보, 그 객체가 할 수 있는 일을 셋팅하는 것을 초기화 또는 init(initialize) 라고 한다. 이를 통해서 코드의 재사용성이 대폭 높아졌다.

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

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

일반적인 객체지향 언어에서 생성자는 클래스의 소속이다. 하지만 자바스크립트에서 객체를 만드는 주체는 함수다. 함수에 new를 붙이는 것을 통해서 객체를 만들 수 있다는 점은 자바스크립트에서 함수의 위상을 암시하는 단서이면서 또 자바스크립트가 추구하는 자유로움을 보여주는 사례라고 할 수 있다.

출처: https://devbox.tistory.com/entry/JavaScript-생성자와-new?category=574556 [장인개발자를 꿈꾸는 :: 기록하는 공간]