빛을 담고 세상 넓히기

최근 Ajax 관련 프로젝트를 진행하면서 prototype.js, rico.js 등을 사용했는데, 팀내에서 공통으로 사용할 가볍고 확장가능한 자바스크립트 라이브러리를 만들 필요성이 커져서 관련 정보를 수집중이다.

자바스크립트 라이브러리를 만들려고 보니, prototype.js를 보게 되고, 다시 ECMAScript를 공부하게 됐다.

ECMA는 정보와 통신 관련 표준화에 주력하는 산업협회이다. ECMA가 규정한 표준 중에서 ECMA-262는 ECMAScript를 정의내린 문서이다. ECMAScript는 Netscape의 javascript, MS IE의 jscript의 기준이 되었고 자바스크립트에 관한 구조적 정보를 얻을 수 있는 바탕이 된다.

ECMAScript 정리

[요약]
object
- property 의 집합

property
- 0 또는 한개 이상의 attribute를 가진다. (attribute는 property의 사용법을 정의한다.)
- object, primitive value, method의 형태를 가진다.

primitive value
- undefined, null, boolean, number, string

method
- property와 object에 연관된 function

built-in object
- Global, Object, Function, Array, String, Boolean, Number, Math, Date, Error 등

ECMAScript는 object-oriented programming language 이므로 Object 사용과 상속에 대한 이해가 필요하다.

Object(객체) : constructor(생성자)를 지원한다. 생성자를 통해 메모리를 할당하고 초기값을 설정한다. 모든 생성자는 객체이지만 모든 객체가 생성자는 아니다. (생성자를 일반적인 객체로 이해하면 된다.)
모든 생성자는 Prototype property를 가지고 prototype-based inheritance를 지원한다. 그리고 객체는 생성자에 new 표현을 사용해 생성한다.
ex) new String(”a string”)

prototype-based inheritance에 대해서 자세히 살펴볼 필요가 있는데 아래 코드로 설명을 하겠다.

<script>
//새로운 객체 정의
var NewObject = function() {}
NewObject.test1 = function() {
  alert('test1');
}

// 객체 생성
var aInstance = new NewObject();
var bInstance = new NewObject();
aInstance.test2 = function() {
  alert('test2');
}

//prototype에 method 추가
NewObject.prototype.test3 = function() {
 alert('test3');
}

//bInstance.test1(); // 에러 발생
//bInstance.test2(); // 에러 발생
bInstance.test3();
</script>

위의 코드에서 test1(), test2() method는 각각 NewObject와 aInstance에만 적용되나 prototype에 정의된 method test3()는 aInstance, bInstance에서 모두 사용가능하다. (NewObject 에서 test3()는 사용할 수 없다.)

prototype에 추가되는 값이나 함수는 동적으로 원 객체를 상속받은 모든 인스턴트에 적용된다. 즉, 자바스크립트에서 상속을 구현하기 위해서는 prototype을 이해해야 한다. 이 기능을 사용하기 쉽게 활용한 라이브러리가 prototype.js인 것이다.

이 외에도 this의 의미, Object 객체와 Function 객체의 설명을 참고한다면 prototype.js 소스 이해에 많이 도움이 될 거 같다.

Tags: ECMAScript

This entry was posted on Wednesday, January 25th, 2006 at 4:19 pm and is filed under Software & Developer. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.