자바스크립트 핵심 가이드 - (상속)

클래스 기반의 언어에서 상속 또는 확장은 두 가지 유용한 점을 제공한다.

1. 코드 재사용 

  코드를 재사용 하는 패턴은 개발 비용을 현저하게 줄일 수 있는 잠재력이 있기 때문에 매우 중요하다.

  자바스크립트는 더 풍부한 코드 재사용 패턴을 제공한다.

  클래스 기반의 언어에서 객체는 클래스의 인스턴스이며 클래스는 다른 클래스로 상속될 수 있다.

  자바스크립트는 프로토타입 기반 언어인데 이 말은 즉 객체가 다른 객체로 바로 상속된다는 뜻이다.

1) 의사 클래스 방식

자바스크립트는 객체에서 다른 객체로 직접 상속하는 방법을 ㅏㅈ는 대신에 생성자 함수를 통해 객체를 생서하는 것과 같은 불필요한 간적접인 단계가 있다.

함수 객체가 만들어질 때 함수를 생성하는 Function 생성자는 아래와 같은 코드를 실행 한다.

this.prototype = { constructor : this };

prototype 객체는 상속할 것들이 저장되는 장소이다.

prototype 객체 내에 기본적으로 할당되는 constructor 속성은 유용하지 않다. 중요한 것은 prorotype 객체 자체이다.

new  연산자는 조금 다르다. new 연산자는 아래와 같을 것이다.

Function.method('new', function( ) {   var that = Object.create (this.prototype);   var other = this.apply(that, arguments);   return (typeof other === 'object' && other) || that; });

 

다음과 같이 생성자를 정의하고 prototype 에 메소드를 추가할 수 있다.

Var Mammal = function (name) {    this.name = name; };   Mammal.prorotype.get_name = function( ) {   return this.name; };   Mammal.prototype.says = function() {   return this.saying || ''; };   var myMammal = new Mammal('Herb the Mammal'); var name = myMammal.get_name( ) ; // Herb the Mammal'

 

의사 클래스를 사용하는 방법은 자바스크립트에 익숙하지 않은 프로그래머들에게 편안함을 제공한다.

하지만 이 방법은 자바스크립트라는 언어가 가진 진정한 속성을 가리기도 한다.

클래스 기반의 언어에서는 클래스 상속이 코드를 재사용할 수 있는 유일한 방법이지만 자바스크립트는 더 좋은 방법들이 있다.

 

02) 객체를 기술하는 객체 (Object Specifiers)

때때로 생성자가 많은 매개변수를 갖는 경우가 있다. 생성자가 인수를 받는 대신에 객체를 기술하는 하나의 객체를 받도록 정의하면 보다 사용하기 편리하다.

var myObj = maker( f, l , m , c, s );   var myObj = maker( {     first : f,     last : l,     state : s,     city : c })

생성자의 기본값들을 똑똑하게 설정하고 있다면 인수를 생략할 수도 있다. 

이렇게 하면 코드의 가독성이 높아진다.

 

 

03) 프로토타입 방식

순수하게 프로토타입에 기반한 패턴에서는 클래스가 필요 없다.

프로토타입에 의한 상속은 개념적으로 클래스에 의한 상속보다 더 간단하다.

var myMammal = {   name : 'Herb the Mammal',   get_name : function ( ) {    return this.name;   },

 

04) 함수를 사용한 방식

프로토타입에 의한 상속 패턴의 한가지 단점은 private 속성을 가질 수 없다는 것이다.

private 변수, private 메소드도 모두 생성할 수 없다.

 

var constructor = function ( spec, my ) {   var that, 필요한 private 변수들;   my = my || { };   공유할 변수와 함수를 my 에 추가   that = 새로운 객체   앞서 정의한 변수들에 접근할 권한이 있는 메소드들을 that 에 추가   return that; }

 

함수형 패턴은 유연성이 매우 좋다. 

이 패턴은 의사 클래스 패턴보다 작업량이 적고 캡슐화와 정보은닉 그리고 super 메소드에 접근할 수 있는 방법까지 제공한다. 객체의 상태 모두가 private 이면 객체는 방탄이 된다.

 

05) 클래스 구성을 위한 부속품

제품을 만들 때 부속품을 가져다 조립을 하듯이 객체를 구성할 때도 같은 방법으로 할 수 있다.

var eventtuality = function ( that ) {   var registry = { };   that.fire = function (event) {        var array, func, handler, i, type = typeof event === 'string' ? event : event.type;      // 해당 이벤트에 상응하는 처리 함수 목록 배열이 있으면      // 루프를 돌면서 이 배열에 등록돼 있는 모든 처리 함수를 실행 시킨다.      if ( registry.hasOwnProperty(type)){        arrary = registry[type];        for ( i = 0 ; i < array.length; i += 1){           handler = arrary[i];           func = handler.method;           // 처리 함수 배열에 속하는 항목 하나는 처리 함수인 method 와 매개변수인            // parameters 라는 배열로 구성됨, method 가 함수 자체가 아니라 이름이면,           // this 에서 해당 함수를 찾음.           if ( typeof func === 'string' ) {               func = this[func];           }           // 처리 함수 호출, parameters 가 있으면 이를 넘김. 없다면 event 객체를 넘김           func.apply (this. handler.parameters || [event] );        }      }      return this;   };   that.on = function (type, method, parameters) {      // 이벤트 등록 handler 항목을 만들고 해당 이벤트 타입의 배열에 추가      // 만약 기존에 배열이 없다면 해당 이벤트 타입에 대해 새로운 배열 생성      var handler = {             method : method,             parameters : parameters      };      if ( registry.hasOwnProperty ( type ) ) {         registry[type].push(handler);      } else {          registry[type] = [handler];      }      return this;   };   return that; };