[객체] - 프로토타입

상속 (inheritance)
새로운 클래스에서 기존 클래스의 모든 프로퍼티와 메소드를 사용할 수 있는 것

• 특징
  • 새로운 프로그램의 요구에 맞게 기존 클래스를 수정하여 재사용 가능
  • 클래스 간 종속 관계를 형성하여 객체의 관계를 조직화할 수 있다.
  • 객체 지향 프로그래밍 특징 중 하나
    • 상속
    • 추상화
    • 캡슐화 (정보은닉)
    • 다형성
  • 자바스크립트(prototype-based)에서는 현재 존재하고 있는 객체를 프로토타입으로 사용하며
    해당 객체를 복제하여 재사용하는 것을 상속이라 한다. => 프로토타입 기반 언어

 

 

프로토타입(prototype)
제품의 원형, 초기 모델.. 등
자바스크립트 => 자신을 만들어낸 객체의 원형

• 프로토타입 체인 (prototype chain)
  • 객체 이니셜라이저를 사용해 생성된 같은 타입의 객체들은 모두 같은 프로토타입을 가진다.
    • 이니셜라이저 : 리터널 표기에 의한 객체 생성

    • var obj = {
          property_1: value_1,
          proterty_2: value_2,
          // ...,
          
          property_n: value_n
      };

  • new 연산자를 사용해 생성한 객체는 생성자의 프로토타입을 자신의 프로토타입으로 상속받는다.

  • // 예제
    
    var obj = new Object();  // 이 객체의 프로토타입은 Object.prototype이다.
    var arr = new Array();   // 이 객체의 프로토타입은 Array.prototype이다.
    var date = new Date();   // 이 객체의 프로토타입은 Date.prototype이다.
    
    
    // Object.prototype
    // 최상위 프로토타입
    // 어떠한 프로토타입을 가지지 않는다.
    // 아무런 프로퍼티도 상속받지 않는다.
    // 자바스크립트에 내장된 모든 생성자나 사용자 정의 생성자는 바로 이 객체를 프로토타입으로 가진다.

  • // 예제
    
    var date = new Date();  
    // 이 객체는 Date.prototype뿐만 아니라 Object.prototype도 프로토타입으로 가진다.

• 프로토타입의 생성

  • function Dog(color, name, age) {  // 개에 관한 생성자 함수 작성
        this.color = color;  // 색에 관한 프로퍼티
        this.name = name;  // 이름에 관한 프로퍼티
        this.age = age;    // 나이에 관한 프로퍼티
    }
    
    // new 연산자를 사용해 객체 생성
    var myDog = new Dog("흰색", "마루", 1);  // Dog라는 프로토타입을 가짐
    
    document.write("우리 집 강아지는 " + myDog.name + "라는 이름의" + myDog.color + "털이 매력적인 강아지이다.");
    
    // 우리 집 강아지는 마루라는 이름의 흰색털이 매력적인 강아지이다.

• 객체에 프로퍼티 및 메소드 추가

  • // 예제
    // myDog인스턴스에만 추가된다.
    // Dog객체에는 영향 없다.
    
    function Dog(color, name, age) {
        this.color = color;
        this.name = name;
        this.age = age;
    }
    
    
    var myDog = new Dog("흰색", "마루", 1);
    
    myDog.family = "시베리안 허스키";  // 품종에 관한 프로퍼티 추가
    myDog.breed = function() {      // 털색을 포함한 품종을 반환해 주는 메소드 추가
        return this.color + " " + this.family;
    }
    
    document.write("우리 집 강아지는 " + myDog.breed() + "입니다.);
    
    
    // 우리 집 강아지는 흰색 시베리안 허스키입니다.

• 프로토타입에 프로퍼티 및 메소드 추가

  • // 생성자 함수에 직접 추가해야 한다.
    // 이후 생성되는 모든 다른 객체에도 적용할 수 있도록
    
    function Dog(color, name, age) {
        this.color = color;
        this.name = name;
        this.age = age;
        this.family = "시베리안 허스키"; // 프로토타입에 프로퍼티를 추가할 때에는 기본값을 가지게할 수 있다.
        this.breed = function() {
            return this.color + " " + this.family;
        };
    }
    
    var myDog = new Dog("흰색","마루",1);
    var hisDog = new Dog("갈색","콩이",3);
    
    document.write("우리 집 강아지는 " + myDog.family + "이고, 친구네 집 강아지도 " + hisDog.family + "입니다.");
    
    // 우리 집 강아지는 시베리안 허스키이고, 친구네 집 강아지도 시베리안 허스키입니다.
    
    document.write("우리 집 강아지는 " + myDog.breed() + "이고, 친구네 집 강아지는 " + hisDog.breed() + "입니다.");
    
    // 우리 집 강아지는 흰색 시베리안 허스키이고, 친구네 집 강아지는 갈색 시베리안 허스키입니다.

• prototype 프로퍼티
  • 현재 존재하고 있는 프로토타입에 새로운 프로퍼티나 메소를 손쉽게 추가할 수 있다. 

  • // 예제
    
    function Dog(color, name, age) {
        this.color = color;
        this.name = name;
        this.age = age;
    }
    
    // 현재 존재하고 있는 Dog 프로토타입에 family 프로퍼티를 추가함.
    Dog.prototype.family = "시베리안 허스키";
    
    // 현재 존재하고 있는 Dog 프로토타입에 breed 메소드를 추가함.
    Dog.prototype.breed = function() {
        return this.color + " " + this.family;
    };
    
    var myDog = new Dog("흰색", "마루", 1);
    var hisDog = new Dog("갈색", "콩이", 3);
    
    document.write("우리 집 강아지는 " + myDog.family + "이고, 친구네 집 강아지도 " +hisDog.family + "입니다.");
    // 우리 집 강아지는 시베리안 허스키이고, 친구네 집 강아지도 시베리안 허스키입니다.
    
    document.write("우리 집 강아지의 품종은 " + myDog.breed() + "입니다<br>");
    document.write("친구 네 강아지의 품종은 " + myDog.breed() + "입니다<br>");
    
    // 우리 집 강아지의 품종은 흰색 시베리안 허스키입니다.
    // 친구 네 강아지의 품종은 갈색 시베리안 허스키입니다.