파란하늘의 지식창고
반응형
객체의 생성
함수의 호출이란 글에서 JavaScript의 함수 호출의 형태를 언급한 적이 있다.
4가지 호출 패턴을 언급했었는데
  1. 함수 호출 패턴
  2. 메소드 호출 패턴
  3. 생성자 호출 패턴
  4. apply 호출 패턴
위 4가지였다.

이 중 함수 호출 패턴을 제외한 나머지 3가지는 모두 객체에 대한 선언 및 메소드 호출이다.

JAVA라면 해당 Class에 멤버 변수와 멤버 메소드를 선언할 것이다.
public class A {
	String aValue = "aValue is me!";
	void aMethod() {
		System.out.println("aMethod Called");
	}
}

JavaScript 도 객체지향 언어이기 때문에 객체를 생성하는 new 연산자를 제공해준다.
'함수의 호출 - 3. 생성자 호출 패턴'에서 사용한 호출 구문을 보자.

var A = function(string) {
	this.aValue = string;
	this.getValue = function() {
		return this.aValue;
	}
}
var a = new A("a의 값");
document.writeln(a.getValue());

생성자(constructor)는 new 키워드 없이 호출을 하게 되면 에러가 발생한다. (this는 객체를 위해 선언된 연산자이므로 객체가 아닌 함수로 호출이 되면 에러가 발생한다.)
기타 함수와 구분 짓기 위해 생성자는 이름의 첫글자를 대문자로 지정해주는 것을 염두에 두자.
JavaScript에는 Class가 없기 때문에 Class처럼 객체가 될 대상(constructor)을 function으로 선언하였다.
var a2 = new A("a2의 값");
document.writeln(a2.getValue());

생성자 하나를 통해 여러개의 객체를 만들어 사용할 수 있다.
하나의 생성자에서 여러개의 객체를 생성하여 사용한다면 new 연산자를 사용하지만 굳이 여러개의 객체를 사용할 일이 없는 경우 Class가 되는 A와 객체로 만들 a를 따로 선언할 필요가 없다.
이를 편하게 해주기 위해 JavaScript에는 JSON(JavaScript Object Notation)이 있다.
위 객체를 생성하는 구문과 아래의 JSON 구문은 동일하다.
var a = {
	aValue : ""
	, setValue : function(string) {
		this.aValue = string;
	}
	, getValue : function() {
		return this.aValue;
	}
}
a.setValue("a의 값");
document.writeln(a.getValue());
JSON 표현법은 공식사이트 (http://json.org/json-ko.html)의 단 한페이지로 이루어진 것을 이해하면 된다.

JSON을 이용한 단일 객체를 만들 것인가, new 연산자를 이용한 Constructor를 이용할 것인가는 개발하는 사람의 판단에 달려있다.
동일 모듈을 중복 사용하는 경우라면 new 연산자를 이용한 Constructor를 사용하는 것이 편할 것이다.


결론
사실 이전에 언급한 함수의 호출과 객체의 생성은 같은 내용을 두가지 관점에서 바라본 것이다.

동일한 소스를 하나는 함수의 호출이라는 관점으로 바라본 것이고, 하나는 객체를 생성한다는 관점에서 바라보았다.
객체를 생성하는 관점으로 바라보면 함수의 호출 패턴 중 4번째인 apply 호출 패턴은 new 연산자를 이용한 Constructor가 다른 Constructor를 상속받는다는 것으로 이해가 될 수 있을 것이다.

중복되는 내용인 듯 보이지만 두가지 관점에서 JavaScript의 언어 사용을 이해해야 한다

함수가 실행되는 과정을 이해하게 되면 실행 프로그램을 짤 수 있다.
하지만 객체를 생성히는 과정을 이해하게 되면 모듈을 짤 수 있다.
반응형
profile

파란하늘의 지식창고

@Bluesky_

내용이 유익했다면 광고 배너를 클릭 해주세요