클래스와 모듈

자바스크립트 완벽가이드 클래스와 모듈을 학습한다

향후 ES6에서 다루는 class 키워드를 사용한 개념을 이야기 하는 것이 아니다
무엇을 클래스와 모듈이라 취급하는지 한번 알아본다.
ES5 기준으로 설명된다.
클래스는 프로토타입 기반의 상속 메커니즘을 기반한다.
클래스와 프로토타입
- 두 객체가 같은 프로토타입 객체로부터 프로퍼티를 상속 받았을 때, 같은 클래스와 인스턴스로 취급한다.
- 동적으로 확장이 될 수 있다.
- 팩터리 역활을 하는 함수를 이야기 하나 쓸 일은 없을 것 같다.
- 대부분의 챕터에서 this keyword 의 역활을 확실히 알기를 권장한다. 이 챕터도 마찬가지..
클래스와 생성자
- 생성자로 내부에 수행할 변수를 초기화, 생성하는 역활을 한다.
- "(정의한 객체명).prototype" 프로퍼티를 통해 상속 시키고자 하는 코드를 작성한다.
  function Range(from, to){ this.from = from; this.to = to; } Range.prototype = { include : function(){ //something } // 배열처럼 상속시키고자 하는 함수를 위와 동일하게 작성해나간다. }
- new 키워드로 생성자 함수를 호출하며 일반 함수와 차이점은 대문자로 시작해준다가 관례이나 누가 지킬까 싶기도 하다.
- 썩 와닿지가 않는다.
생성자와 클래스 구별
- 프로토타입 객체는 클래스를 구별할떄 핵심적인 역활을 한다고 써있다. 같은 프로토타입 객체를 상속한 경우에만 같은 클래스의 인스턴스라고 알아두면 된다.
- instanceof 는 생성자에 의해서 초기화된건지 검증하지 않고 [프로토타입을 상속하는가 검증]하는 키워드 이다.
- 별도로 이 연산자에 대해서 공부할 가치가 있어보이긴 한다.
constructor 프로퍼티
- prototype 프로퍼티가 있어야지만 모든 함수는 생성자가 될 수 있다. 그래서 자동으로 설정이 된다.
- ES5 에서는 Function.bind() 메서드가 반환하는 함수는 자동으로 설정되지 않는다.
- 자동으로 설정되는 prototype property 의 값은 constructor property 하나만 가진 객체이다.
  이 constructor property 는 열거되지 않고 값으로 해당 함수 객체를 가진다.
- 참 설명이.. 알아먹기 힘들다.
  var someFunction = function() {}; var protoTypeInSomeFunction = someFunction.prototype; var constructorInProtoTypeInSomeFunction = protoTypeInSomeFunction.constructor; console.log(someFunction == constructorInProtoTypeInSomeFunction) // true
- 어떤 객체에 프로토타입 객체에 constructor property 가 있다는 것은
  이 객체의 생성자를 가르키는 constructor property 역시 상속함을 뜻한다.
  이 사실을 통해서 constructor 를 통하여 클래스를 구별하거나 객체의 클래스를 얻어낼 수 있다는 사실을 알 수 있다.
- 별도로 정의하는 프로토타입 객체에는 constructor 가 자동으로 생기진 않는다. 이럴경우 명시적으로 설정하여 해결이 가능한다.
  Range.prototype = { constructor : Range, //이런 식으로 명시적으로 역참조를 위해 설정할 수 있다. //etc... }
  - 혹은 이럴 필요가 없이 미리 정의된 프로토타입 객체를 확장해 나가는 식으로 진행하는 것도 하나의 방법이다.
    Range.prototype.etc1 = function(){ //something } Range.prototype.etc2 = function(){ //something } Range.prototype.etc3 = function(){ //something }
자바 스타일 클래스
- 궁금했던 정보이기는 하다. 뭔 차이가 있는지 알아보려고 한다.
- 자바스크립트는 함수를 값으로 가질 수 있다. 그로 인해 메서드와 필드의 뚜렷한 경계선이 없다.
- 하지만 크게 4가지로 구분 될 수 있다.
  - 인스턴스 필드
  - 인스턴스 메서드
  - 클래스 필드
  - 클래스 메서드
- 클래스는 크게 다음 3가지 객체가 관련된다.
  - 생성자 객체
    클래스의 이름을 정의한다.
    이 객체에 추가한 프로퍼티는 클래스 필드와 메서드가 될 수 있다.
  - 프로토타입 객체
    모든 인스턴스에 상속되는 객체이며 값으로 함수를 가진 프로퍼티는 인스턴스 메서드가 될 수 있다.
  - 인스턴스 객체
    같은 클래스를 통해 생성된 객체는 독립적이며 이 인스턴스 객체에 직접 정의한 프로퍼티는 같은 클래스의 인스턴스라
    하더라도 직접적인 공유는 이루어 지지 않는다.
- 클래스의 정의 하는 과정의 세단계의 알고리즘은 다음과 같다.
  - 인스턴스 프로퍼티를 설정하는 생성자 함수를 작성한다.
  - 생성자의 프로토타입 객체에 인스턴스 메서드를 정의한다.
  - 생성자 자체에 클래스 필드 혹은 클래스 프로퍼티를 정의한다.
- 위 클래스를 정의하는 세단계의 알고리즘은 까먹을 수도 있으니 클래스를 정의하기 위한 함수로 작성하여 구현하도록 한다.
  - ex) defineClass(constructor, instanceMethod, classProperties) {}
- 자바에서는 인스턴스 메서드의 인스턴스 필드를 지역변수 처럼 사용이 가능하고, this 키워드를 별도로 사용할 필요가 없다.
- 'with'로 비슷한 효과를 내어 흉내낼 수도 있디만 권장되지 않는 점을 알도록하자.
- 또한 접근제한자 같은 키워드는 자바스크립트에서 존재하지 않기 때문에 비슷한 흉내를 내는 기법도 있다.
  - 모듈 패턴
  - 상수 프로퍼티
  - 클로저 지역변수
클래스 확장하기
- 자바스크립트의 프로토타입 기반의 상속은 동적이다. 상속받은 프로토타입이 변경이 되면 동일하게 변경이 된다.
- 가령 모든 객체에서 유용할 것 같아, 최상위 객체 Object 에 정의를 하는 것을 좋지 않은 방법이다.
- 안전하게 클래스를 확장해 나가고 싶다면 Object.defineProperty() 를 생각해보는 것도 방법이다.
- 그러나 실무에서는 쓸 것같지 않다. 복잡해질 뿐..
클래스와 자료형
- 대개는 typeof 연산자를 통해 구분을 하나, 클래스는 독자적인 자료형으로 다루는 것이 권장된다.
- 핵심 내장객체와 클라이언트 측 호스트 객체는 classof() 함수로 클래스의 속성을 구별할 수 있다.
- 하지만 평범하게 선언하는 경우 언제나 클래스의 속성은 Object 이므로 도움이 되지 않는다.
- 다음 3가지로 해당 객체의 클래스를 판단하여보자
  - instanceof
    생성자는 클래스를 구별하는 대표적인 수단이나, 구별의 핵심은 프로토타입니다.
    생성자 함수를 요구하여 검사하는 연산자 이나, 실제로는 객체가 어떤 프로토타입을 상속했는지 검사하고 생성짜함수를 어떤 것을 썼는지 검증하지 않는다.
    위와 같은 사실 때문에 생성자 함수를 검사의 기준을 삼고 싶지 않으면 isPrototype() 을 권장한다.
    하지만 이조차 완벽하지 않다. 주어진 객체와 클래스의 관계만 테스트만하고 심지어 특정객체의 클래스가 무엇인지 알수 없다.
    더 심각한점, 둘 이상의 화면과 프레임을 사용하는 상황에서 각각은 서로 구분되는 실행 컨텍스트를 가지기 때문에 각각의 전역객체와 생성자함수의 집합을 가진다.
    이름이 같더라도 실행 컨텍스트가 다르기 때문에 같은 생성자의 인스턴스가 아니다!!!
  - constructor property
    위 연산자와 동일한 문제를 가지고 있고, 객체에 따라 constructor property 를 사용하지 않는 것도 존재한다.
  - 생성자 이름 함수
    생성자의 이름을 함수로 리턴하는 방법을 꾀하는 것도 방법일 수 있으나 이 조차도 함수에 이름이 없는 경우도 존재하기 때문에 좋지않다.
- 위 세가지로 확인하는 법은 전적으로 만족스럽지 않다.
- Duck-Typing
  - 앞서 야기된 방법들은 각각의 문제점을 가지고 있다.
  - 위를 해결하기 위해서 나온 대안책
    이 객체가 무엇인가? 의 관점에서
    이 객체가 할 수 있는 일은 무엇인가의 관점을 가지는 것이다.
  - 위와 같은 접근법은 덕 타이핑이라 불리운다.
  - 새 한마리가 오리처럼 걷고 오리처럼 울면, 그 새는 오리다.
    말인 즉슨, 프로토타입 객체를 상속받지 않더라도 그 기능을 수행한다면 해당 클래스로 취급할 수 있다는 점이다.
  - 해당 객체가 어떤 메서드를 가지고 있는지 테스트를 하는 것이다.
  - 구현하는 법
    무간섭주의를 준수 하는 것이다.
    입력 객체가 필요한 메서드를 구현한다 가정할 때, 이 입력객체가 메서드를 실제로 구현하고있는지 검사를 하지 않는다.
    이 가정이 틀릴 시, 존재하지 않는 메서드를 호출한다는 에러가 나타난다.
    검증을 하되, 클래스대신 적합한 이름을 가진 메서드가 구현되있는지 검사.
    위 방법대로 준수하면 적절하지 않은 입력이 있을 경우 대응이 된다.
    에러 메세지에 디테일함을 추구할 수 있다.
    덕 타이핑을 위한 예시 함수
    function duckTyping(object){ for(var i = 1; i < arguments.length; i++){ //object 의 각각의 인수에 대하여 var arg = arguments[i]; switch(typeof arg) { case 'string': if(typeof o[arg] !== "function") return false; // 접근된 요소가 문자열일 경우 메서드의 이름을 확인한다. continue; case 'function' : arg = arg.prototype; // 접근된 요소가 함수라면 프로토타입을 사용하게 한다. case 'object' : for(var m in arg) { // 객체라면 모든 프로퍼티에 대해서 검사를 해야한다. if (typeof arg[m] !== "function") { continue; } //객체의 각 프로퍼티에 대해서 검사 if (typeof o[m] !== "function") { return false; } // 메서드가 아니라면 건너뛴다. } } } }
    위 함수는 객체의 특정 이름의 함수 프로퍼티가 있는지 검증만 한다.
    함수가 어떤 역할을 하는지, 인자값의 개수는, 무슨 자료형인가는 검증을 안한다.
    원래 덕 타이핑이란 그런 것이라고 한다.
    심도 깊은 검증을 하는 함수 대신 덕 타이핑을 사용하는 함수를 사용하면 더 유연한 api를 제공하는 것이다.
    하지만 이는 사용자에게 책임을 떠넘기는 행위가 되버린다.
    이너클래스에 대해선 동작을 하지 않으니 구지 하고싶다면 Object.getOwnPropertyNames() 같은 함수를 사용한다.
자바스크립트의 객체지향 기법, ES5 클래스
- 많기도 많고, 데이터에 대한 가공은 java 에서 주로 하고 있기때문에 구지 이곳에 이 관점을 더 이상 생각하고 싶지않다. Node.js 라면 모를까..
- 열거형은 제법 쓸만할 것같다.

PreviousThis Binding Next객체의 변경불가성 (immutability)

Last updated 6 years ago