자바스크립트의 객체 생성방법 3가지
1.객체 리터럴을 이용한 객체 생성 방식
리터럴 방식 객체생성은 하나의 객체를 그 즉시 생성한다.
거두절미하고 소스와 주석으로 객체 리터럴을 설명하겠다.
1 | var filmograyphyList = ['도날드덕', '환타지아']; // 배열 객체를 선언한다. |
리터럴이라는 말을 위키피디아에서 찾아보니 컴퓨터 과학분야에서, 소스코드의 고정된 값을 대표하는 용어라고한다.( 즉 객체 리터럴 방식은 객체를 생성하는 표기법 정도로 이해하고 넘어가자. 리터널에 대해서는 인터넷에 한번 찾아보길 바란다.)
위 소스는 obj1이라는 이름의 객체를 리터럴 방식으로 생성한 것이다.
객체 리터럴은 중괄호 { } 를 이용하여 프로퍼티명과 프로퍼티의 값을 감싼 형태로 생성 된다.
{ ‘프로퍼티이름’ : ‘프로퍼티값’ }
더 자세한 내용은 위의 동영상을 참고하길 바란다.
2.생성자를 이용한 객체 생성
생성자 함수를 이용해 반복적으로 동일한 형태(프로퍼티를 갖는)객체를 생성하는 일반적인 방법.
일단 자바스크립트의 생성자란 객체를 반복적으로 생성할수 있는 함수이다.
대중적인 객체지향 언어인 java, c++ 같은 언어에서는 class라는 객체의 설계도 내부의 생성자라는 함수를 가지고 있는데, 자바스크립트에서는 클래스라는 객체의 설계서가 따로 존재하지 않으며 이 생성자 내부에서 객체의 설계내용을 작성한다.
그리고 자바스크립트에서는 기본적인 함수와 생성자간의 문법적 구별이 없다. A라는 함수가 있다면 이것을 그냥 함수처럼 호출할수도 있고, new라는 키워드로 생성자로 호출할수도 있다.
역시 거두절미하고 소스를 보자.
1 |
|
위처럼 내장된 생성자 객체들을 이용하여 객체를 생성할수 있다.
이런 내장된 생성자 말고 프로그래머가 직접 원하는 객체를 생성할수 있도록 생성자를 만들수 있다.
1 | //Duck이라는 생성자를 만든다. 자바스크립트에서는 일반 함수와 생성자의 문법적 차이가 없다.(개인적으로 불만이다.) |
자 위 소스로 객채를 생성할수 있는 함수 즉 생성자를 선언했다.
이제 위 생성자를 통해 객체를 생성해 보자.
1 | //new 라는 키워드의 의미는 new 다음에 올 함수를 생성자로서 호출하겠다는 의미이다. |
생성된 객체를 console.dir로 열어보면 Duck생성자로 생성된 객체의 프로퍼티를 확인 할 수 있다.
일단 생성자를 하나 만들었다면,
1 | var duck2 = new Duck('레임 덕', 5); |
이처럼 반복적으로 객체를 생성하는 것이 가능하다.
지금 설명하는 생성자를 사용하여 객체를 생성하는 이유는 동일 형태의 객체를 반복적으로 생성할 수 있기 때문이다.
(물론 필요에 따라 객체리터럴로 객체를 생성해도 된다. 뭐가 좋고 나쁘다는 말이 아니다.)
자바스크립트에서 생성자가 다른 객체지향 언어와 개념적 차이가 있는데, 일반적인 객체지향언어에서 클래스라는 개념이 있다.
이 클래스라는 개념은 객체의 설계도 역할을 한다. 예를 들어 객체가 가져야 할 프로퍼티들을 정의 하는데, 자바스크립트에서는 이 클래스라는 개념이 없으며,그 대신 자바스크립트에서 생성자에서 this.프로퍼티명 을 이용하여 이 클래스의 설계도와 같은 기능을 포함하고 있다.
- Object.create 매소드를 이용해한 객체 생성
자바스크립트의 객체의 상속을 따라가다보면 최상위 객체가 존재하신다.(필자는 god object라고 장난스래 부른다)
그리고 이 최상위 객체를 이용하여 자바스크립트에서 객체를 생산하시는 성모마리아님 같은 최상위 생성자(자바스크립트 내장 상성자)가 역시 존재하는데, 그 분이 Object()생성자 이시다.
이 Object생성자 객체의 create 메소드를 이용하면, 객체 생성과 동시 객체 상속을 조금더 손쉽게 할수 있다.
이 기능은 ecma5(이끄마파이브) 부터 지원하며, 자세한 내용은 아래 MDN을 참고!
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create
절대 귀찮아서 Object.create 설명은 글로 안쓴것이 아니다. 솔직히 나도 잘 모ㄹ…. 콜록콜록