자바스크립트 method() 함수


이전 프스트 내용 중 모듈패턴1 의 내용을 다시금 상기시켜 보도록 하겠습니다.


자바스크립트에서는 생성자 함수를 통해 인스턴스 생성시 크게 2가지 형태의 맴버 그룹을
가질 수 있다고 말씀드렸습니다.


즉, 인스턴스 맴버그룹과 프로토타입 맴버그룹이 그것입니다.

두 가지 방식의 큰 차이점은 아래와 같습니다.

1. 인스턴스 맴버

- 각 인스턴스 생성시 생성자 함수의 this에 맴버를 추가하게 됩니다. 이는 각 인스턴스마다 맴버가 생성된다는 말과 같으며, 그만큼 메모리 관리에는 비효율적이라는 말과도 같습니다.


2. 프로토타입 맴버

- 인스턴스 맴버와는 달리 생성자함수 객체 속성인 prototype에 추가되며, 생성 주기 또한 각 인스턴스가 아닌 함수 생성시 한번만 실행되기 때문에, 재 사용 가능한 메서드들은
인스턴스 맴버가 아닌 프로토타입 맴버에 추가하여 사용하는것이 메모리 관리에 효율적입니다.


그러나 이런 자바스크립트만의 개발 방식이 기존 객체 지향 언어와는 개발자간에 여러 혼란을 주는것도 사실입니다.

이번 포스트에는 이런 혼란을 줄이기 위한 방법으로 더글라스 크록포드가 고안한 method 함수를 살펴 보겠습니다.

  1. // method 함수 추가
  2. (function(){
  3.     if (typeof Function.prototype.method !== 'function'){
  4.         Function.prototype.method = function(n, fn){
  5.  
  6.             if (typeof n !== 'string' || n.length === 0) return false;
  7.             if (typeof fn !== 'function') return false;
  8.            
  9.             this.prototype[n] = fn;
  10.  
  11.             return this;
  12.         }
  13.     };
  14. })();
  15.  
  16.  
  17. var a = function(id, name)
  18. {
  19.     this.id = id;
  20.     this.name = name;
  21. }
  22. .method('getId', function(){ return this.id; })
  23. .method('getName', function(){ return this.name; });
  24.  
  25. alert(new a('yanione1', 'name1').getId()); // yanione1
  26. alert(new a('yanione2', 'name2').getName()); // name2
  27.  
  28.  
  29.  
  30. var train = (function(){
  31.    
  32.     var init = function(name){
  33.         this.name = name;
  34.  
  35.     }.method('test1', function(){
  36.         return this.name;
  37.     });
  38.  
  39.     return init;
  40.    
  41. })();
  42.  
  43. var o = new train('name1');
  44. alert(o.test1()); // name1


단 여기서 이상한 점이 하나 있다면, 함수 선언부 코드 작성시 함수 리터널(var a = function(id, name)) 방식을 써야 생성시 에러가 나지 않는다는 것입니다.

분명 function a()와 var a = function() 모두 전역변수이며, 둘다 Function.prototype에 추가된 method 함수의 호출 까지는 에러가 나지 않지만 생성시 문법 오류가 때문입니다.

이 문제의 답에 대해서는 좀 더 알아본 후 포스트 내용에 추가 하도록 하겠습니다.