ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [Javascript] - 프로토타입(prototype)
    Programming/Javascript 2019. 4. 8. 16:04

    - Prototype(프로토타입) -

     

        • Prototype(프로토타입)의 정의
          - 객체지향언어의 특징인 Class라는 개념을 대체하는 Javascript의 문법
          - Javascript에는 Class라는 개념이 없었지만 최근 ES6문법에 Class가 추가되었다
          - 다른 객체지향언어(ex.Java, Python)의 상속이라는 개념을 Javascript에서는 Prototype(프로토타입)으로 구현할 수 있다
          - Javascript가 프로토타입 기반 언어라고 불리는 이유는 Prototype문법이 있기 때문이다

        • Prototype(프로토타입)의 이해를 위한 예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <-------------------------------------------------------------------------------------->
    function Person() {};
     
    Person.prototype.eyes = 2;
    Person.prototype.nose = 1;
     
    var kim  = new Person();
    var park = new Person():
     
    console.log(kim.eyes); // => 2
    console.log(park.nose); // => 1
    cs

     

    - Person.prototype이라는 빈 Object가 메모리 어딘가에 존재
    - Person 함수로 생성된 객체인 kim과 park은 메모리 어딘가에 존재하는 Object의 들어있는 값을 참조하여 사용할 수 있다


    - Prototype Object / Prototype Link -

     

      • Prototype Object

        - 객체(Object)는 항상 함수로 생성된다
    1
    2
    3
    4
    <-------------------------------------------------------------------------------->
    function Person() {} // => 함수
     
    var personObject = new Person(); // => 함수로 객체를 생성
    cs

    - personObject라는 객체는 Person함수로 생성되었다

    - 객체는 항상 함수에서 생성이 된다

     

    • 함수가 정의될 때 생기는 일 2가지

      1. Constructor(생성자) 자격 부여
      - Constructor 자격이 부여되면 new로 객체를 생성할 수 있다
      - 함수만 new 키워드를 사용할 수 있는 이유이다

      2. 해당 함수의 Prototype Object생성 및 연결
      - 함수가 정의되면 메모리상에 함수와 Prototype Object 두개가생성된다
      - 생성된 함수는 Prototype 속성으로 Prototype Object에 접근할 수 있다
      - Prototype Object는 기본적인 객체와 같으며 속성으로 Constructor와 __proto__를 갖고있다
        

    - Constructor는 Prototype Object와 같이 생성된 함수를 가리킨다

    - 쉽게 말해서 생성자가 무엇인지 가리키는 역할을 한다

     

    • __Proto__
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <-------------------------------------------------------------------------------------->
    function Person() {};
     
    Person.prototype.eyes = 2;
    Person.prototype.nose = 1;
     
    var kim  = new Person();
    var park = new Person():
     
    console.log(kim.eyes); // => 2
    console.log(park.nose); // => 1
     
    cs

    - 위의 예제에서 kim과 park이라는 객체는 eyes와 nose라는 속성을 가지고있지 않다

    - 그치만 kim.eyes와 park.nose등 Person.prototype이 가지는 속성에 접근할 수 있는게 __proto__때문이다

     

     

    - 위의 그림처럼 __proto__라는 속성이 Prototype Object를 가리키고 있기 때문이다

    - __proto__는 나를 생성한 부모를 가리키게되고 그러므로 그 부모의 속성들에 접근할 수 있는 것이다

    'Programming > Javascript' 카테고리의 다른 글

    [Javascript] - N-Queens 구현하기  (0) 2019.04.12
    [Javascript] - 프로토타입(prototype)  (0) 2019.04.08

    댓글 0

Designed by Tistory.