자바스크립트 - 객체지향 프로그래밍 - 캡슐화 (2)

이전 포스팅에서 자바스크립트의 기본적인 캡슐화 구현 방법을 알아보았습니다.

 

이번엔, 여러 유명 자바스크립트 라이브러리에서 사용하는 캡슐화 패턴을 알아보도록 할게요.

 

- 모듈패턴

var Person = function(arg) {
  var name = arg ? arg : "junyoung";

  return {
    getName: function() {
      return name;
    },
    setName: function(arg) {
      name = arg;
    }
  };
};

var me = Person();
console.log(me.getName());

위의 코드를 보면 Person 함수를 호출하여 객체를 리턴받는 것을 볼 수 있죠. (이전 예제는 new로 인스턴스를 생성합니다)

리턴되는 객체에는 Person 함수의 지역변수인 name에 접근할 수 있는 메소드 두개가 있습니다.

사용자는 객체 안 메소드 두개로, 직접 접근이 불가능한 name 변수에 접근할 수 있게 되었어요.

 

다만 한가지 주의할 점이 있는데, 접근하는 은닉된 멤버가 객체와 배열같이 참조형이라면 얕은 복사로 주소값만 할당되기 때문에

은닉된 것을 무시하고 이를 쉽게 변경할 수 있게됩니다.

다음 코드를 볼게요.

var ArrCreate = function(arg) {
  var arr = [1,2,3];

  return {
    getArr : function() {
      return arr; // 얕은복사로 반환하기 때문에 문제.
    }
  };
}

var obj = ArrCreate(); // or var me = new Person
var arr = obj.getArr();
arr.push(5); // var arr이 ArrCreate 함수의 은닉된 변수인 arr과 같은 주소를 갖게 되는 문제.(얕은 복사)
console.log(obj.getArr()); //출력값 [1,2,3,5]

이와같은 문제가 있으므로 객체를 반환하는 함수를 만들 땐 신중해야합니다.

이와같이 객체를 리턴할 경우에는 깊은 복사로 복사본을 만들어 리턴하는 방법을 사용하는 것이 좋습니다.

 

또 객체를 리턴하는 함수를 만들어 사용하면 함수객체의 프로토타입에는 접근할 수 없는데요,

이는 프로토타입 체인을 이용한 상속을 구현하기에는 용이하지 않다는 말이랑 같겠죠.

만약 상속을 구현해야 한다면 객체를 반환하는 것이 아닌 함수를 반환하는 것이 더 좋겠습니다.

 

다음 코드를 참고해주세요.

var Person = function(arg) {
  var name = arg ? arg : "junyoung";
  
  var Func = function() {};
  Func.prototype = {
    getName: function() {
      return name;
    },
    setName: function(arg) {
      name = arg;
    }
  };
  return Func;  // 클로저가 됨.
}();

var me = new Person();
console.log(me.getName());

 

즉시실행함수에서 반환되는 Func는 클로저가 되고, 이로인해 

Person의 지역변수 name은 은닉됩니다.

또한, Func라는 함수를 반환하기 때문에 Person의 prototype에도 접근이 가능하게 되었죠.

(예를들면 Person.prototype.getName 이런식으로 오버라이딩이 가능합니다.)

 

 

다음은 자바스크립트에서 Class기능을 가진 함수를 만들어보도록 할게요~