2일 3월 2020

프로토타입 상속

개발을 하다 보면 기존에 있는 기능을 가져와 확장해야 하는 경우가 생깁니다.

사람에 관한 프로퍼티와 메서드를 가진 user라는 객체가 있는데, user와 상당히 유사하지만 약간의 차이가 있는 adminguest 객체를 만들어야 한다고 가정해 봅시다. 이때 "user의 메서드를 복사하거나 다시 구현하지 않고 user에 약간의 기능을 얹어 adminguest 객체를 만들 수 있지 않을까?"라는 생각이 들 겁니다.

자바스크립트 언어의 고유 기능인 프로토타입 상속(prototypal inheritance) 을 이용하면 위와 같은 생각을 실현할 수 있습니다.

[[Prototype]]

자바스크립트의 객체는 명세서에서 명명한 [[Prototype]]이라는 숨김 프로퍼티를 갖습니다. 이 숨김 프로퍼티 값은 null이거나 다른 객체에 대한 참조가되는데, 다른 객체를 참조하는 경우 참조 대상을 '프로토타입(prototype)'이라 부릅니다.

프로토타입의 동작 방식은 '신비스러운’면이 있습니다. object에서 프로퍼티를 읽으려고 하는데 해당 프로퍼티가 없으면 자바스크립트는 자동으로 프로토타입에서 프로퍼티를 찾기 때문이죠. 프로그래밍에선 이런 동작 방식을 '프로토타입 상속’이라 부릅니다. 언어 차원에서 지원하는 편리한 기능이나 개발 테크닉 중 프로토타입 상속에 기반해 만들어진 것들이 많습니다.

[[Prototype]] 프로퍼티는 내부 프로퍼티이면서 숨김 프로퍼티이지만 다양한 방법을 사용해 개발자가 값을 설정할 수 있습니다.

아래 예시처럼 특별한 이름인 __proto__을 사용하면 값을 설정할 수 있습니다.

let animal = {
  eats: true
};
let rabbit = {
  jumps: true
};

rabbit.__proto__ = animal;
__proto__[[Prototype]]용 getter·setter입니다.

__proto__[[Prototype]]다릅니다. __proto__[[Prototype]]의 getter(획득자)이자 setter(설정자) 입니다.

하위 호환성 때문에 여전히 __proto__를 사용할 순 있지만 비교적 근래에 작성된 스크립트에선 __proto__ 대신 함수 Object.getPrototypeOfObject.setPrototypeOf을 써서 프로토타입을 획득(get)하거나 설정(set)합니다. 근래엔 왜 __proto__를 쓰지 않는지와 두 함수의 자세한 설명에 대해선 이어지는 챕터에서 다룰 예정입니다.

__proto__는 브라우저 환경에서만 지원하도록 자바스크립트 명세서에서 규정하였는데, 실상은 서버 사이드를 포함한 모든 호스트 환경에서 __proto__를 지원합니다. [[Prototype]]보다는 __proto__가 조금 더 직관적이어서 이해하기 쉬우므로, 본 튜토리얼의 예시에선 __proto__를 사용하도록 하겠습니다.

객체 rabbit에서 프로퍼티를 얻고싶은데 해당 프로퍼티가 없다면, 자바스크립트는 자동으로 animal이라는 객체에서 프로퍼티를 얻습니다.

예시:

let animal = {
  eats: true
};
let rabbit = {
  jumps: true
};

rabbit.__proto__ = animal; // (*)

// 프로퍼티 eats과 jumps를 rabbit에서도 사용할 수 있게 되었습니다.
alert( rabbit.eats ); // true (**)
alert( rabbit.jumps ); // true

(*)로 표시한 줄에선 animalrabbit의 프로토타입이 되도록 설정하였습니다.

(**)로 표시한 줄에서 alert 함수가 rabbit.eats 프로퍼티를 읽으려 했는데, rabbiteats라는 프로퍼티가 없습니다. 이때 자바스크립트는 [[Prototype]]이 참조하고 있는 객체인 animal에서 eats를 얻어냅니다. 아래 그림을 밑에서부터 위로 살펴보세요.

이제 “rabbit의 프로토타입은 animal입니다.” 혹은 "rabbitanimal을 상속받는다."라고 말 할 수 있게 되었습니다.

프로토타입을 설정해 준 덕분에 rabbit에서도 animal에 구현된 유용한 프로퍼티와 메서드를 사용할 수 있게 되었네요. 이렇게 프로토타입에서 상속받은 프로퍼티를 '상속 프로퍼티(inherited property)'라고 합니다.

상속 프로퍼티를 사용해 animal에 정의된 메서드를 rabbit에서 호출해 봅시다.

let animal = {
  eats: true,
  walk() {
    alert("동물이 걷습니다.");
  }
};

let rabbit = {
  jumps: true,
  __proto__: animal
};

// 메서드 walk는 rabbit의 프로토타입인 animal에서 상속받았습니다.
rabbit.walk(); // 동물이 걷습니다.

아래 그림과 같이 프로토타입(animal)에서 walk를 자동으로 상속받았기 때문에 rabbit에서도 walk를 호출할 수 있게 되었습니다.

프로토타입 체인은 지금까지 살펴본 예시들보다 길어질 수 있습니다.

let animal = {
  eats: true,
  walk() {
    alert("동물이 걷습니다.");
  }
};

let rabbit = {
  jumps: true,
  __proto__: animal
};

let longEar = {
  earLength: 10,
  __proto__: rabbit
};

// 메서드 walk는 프로토타입 체인을 통해 상속받았습니다.
longEar.walk(); // 동물이 걷습니다.
alert(longEar.jumps); // true (rabbit에서 상속받음)

프로토타입 체이닝엔 두 가지 제약사항이 있습니다.

  1. 순환 참조(circular reference)는 허용되지 않습니다. __proto__를 이용해 닫힌 형태로 다른 객체를 참조하면 에러가 발생합니다.
  2. __proto__의 값은 객체나 null만 가능합니다. 다른 자료형은 무시됩니다.

여기에 더하여 객체엔 오직 하나의 [[Portotype]]만 있을 수 있다는 당연한 제약도 있습니다. 객체는 두 개의 객체를 상속받지 못합니다.

쓸 때는 프로토타입을 사용하지 않습니다.

프로토타입은 프로퍼티를 읽을 때만 사용합니다.

프로퍼티를 추가, 수정하거나 지우는 연산은 객체에 직접 해야 합니다.

객체 rabbit에 메서드 walk를 직접 할당해 보겠습니다.

let animal = {
  eats: true,
  walk() {
    /* rabbit은 이제 이 메서드를 사용하지 않습니다. */
  }
};

let rabbit = {
  __proto__: animal
};

rabbit.walk = function() {
  alert("토끼가 깡충깡충 뜁니다.");
};

rabbit.walk(); // 토끼가 깡충깡충 뜁니다.

rabbit.walk()를 호출하면 프로토타입에 있는 메서드가 실행되지 않고, 객체 rabbit에 추가한 메서드가 실행됩니다.

그런데 접근자 프로퍼티(accessor property)는 setter 함수를 통해서 프로퍼티에 값을 할당하므로 이 규칙이 적용되지 않습니다. 접근자 프로퍼티에 값을 할당하는 것은 함수를 호출하는 것과 같기 때문입니다.

아래 예시에서 admin.fullName이 의도한 대로 잘 작동하는 것을 확인할 수 있습니다.

let user = {
  name: "John",
  surname: "Smith",

  set fullName(value) {
    [this.name, this.surname] = value.split(" ");
  },

  get fullName() {
    return `${this.name} ${this.surname}`;
  }
};

let admin = {
  __proto__: user,
  isAdmin: true
};

alert(admin.fullName); // John Smith (*)

// setter 함수가 실행됩니다!
admin.fullName = "Alice Cooper"; // (**)

(*)로 표시한 줄에서 admin.fullName은 프로토타입(user)에 있는 getter 함수(get fullName)를 호출하고, (**)로 표시한 줄의 할당 연산은 프로토타입에 있는 setter 함수(set fullName)를 호출합니다.

'this’가 나타내는 것

위 예시를 보면 "set fullName(value) 본문의 this엔 어떤 값이 들어가지?"라는 의문을 가질 수 있습니다. "프로퍼티 this.namethis.surname에 값을 쓰면 그 값이 user에 저장될까, 아니면 admin에 저장될까?"라는 의문도 생길 수 있죠.

답은 간단합니다. this는 프로토타입에 영향을 받지 않습니다.

메서드를 객체에서 호출했든 프로토타입에서 호출했든 상관없이 this는 언제나 . 앞에 있는 객체가 됩니다.

admin.fullName=으로 setter 함수를 호출할 때, thisuser가 아닌 admin이 되죠.

객체 하나를 만들고 여기에 메서드를 많이 구현해 놓은 다음, 여러 객체에서 이 커다란 객체를 상속받게 하는 경우가 많기 때문에 이런 특징을 잘 알아두셔야 합니다. 상속받은 메서드를 사용하더라도 객체는 프로토타입이 아닌 자신의 상태를 수정합니다.

예시를 통해 좀 더 알아봅시다. ‘메서드 저장소’ 역할을 하는 객체 animalrabbit이 상속받게 해보겠습니다.

rabbit.sleep()을 호출하면 this.isSleeping이 객체 rabbit에 설정됩니다.

// animal엔 다양한 메서드가 있습니다.
let animal = {
  walk() {
    if (!this.isSleeping) {
      alert(`동물이 걸어갑니다.`);
    }
  },
  sleep() {
    this.isSleeping = true;
  }
};

let rabbit = {
  name: "하얀 토끼",
  __proto__: animal
};

// rabbit의 프로퍼티 isSleeping을 true로 변경합니다.
rabbit.sleep();

alert(rabbit.isSleeping); // true
alert(animal.isSleeping); // undefined (프로토타입에는 isSleeping이라는 프로퍼티가 없습니다.)

위 코드를 실행한 후, 객체의 상태를 그림으로 나타내면 다음과 같습니다.

rabbit 말고도 bird, snake 등이 animal을 상속받는다고 해봅시다. 이 객체들도 rabbit처럼 animal에 구현된 메서드를 사용할 수 있겠죠. 이때 상속받은 메서드의 thisanimal이 아닌 실제 메서드가 호출되는 시점의 점(.) 앞에 있는 객체가 됩니다. 따라서 this에 데이터를 쓰면 animal이 아닌 해당 객체의 상태가 변화합니다.

메서드는 공유되지만, 객체의 상태는 공유되지 않는다고 결론 내릴 수 있습니다.

for…in 반복문

for..in은 상속 프로퍼티도 순회대상에 포함시킵니다.

예시:

let animal = {
  eats: true
};

let rabbit = {
  jumps: true,
  __proto__: animal
};

// Object.keys는 객체 자신의 키만 반환합니다.
alert(Object.keys(rabbit)); // jumps

// for..in은 객체 자신의 키와 상속 프로퍼티의 키 모두를 순회합니다.
for(let prop in rabbit) alert(prop); // jumps, eats

obj.hasOwnProperty(key)를 이용하면 상속 프로퍼티를 순회 대상에서 제외할 수 있습니다. 이 내장 메서드는 key에 대응하는 프로퍼티가 상속 프로퍼티가 아니고 obj에 직접 구현되어있는 프로퍼티일 때 true를 반환합니다.

obj.hasOwnProperty(key)를 응용하면 아래 예시에서처럼 상속 프로퍼티를 걸러낼 수 있고, 상속 프로퍼티만을 대상으로 무언가를 할 수도 있습니다.

let animal = {
  eats: true
};

let rabbit = {
  jumps: true,
  __proto__: animal
};

for(let prop in rabbit) {
  let isOwn = rabbit.hasOwnProperty(prop);

  if (isOwn) {
    alert(`객체 자신의 프로퍼티: ${prop}`); // 객체 자신의 프로퍼티: jumps
  } else {
    alert(`상속 프로퍼티: ${prop}`); // 상속 프로퍼티: eats
  }
}

위 예시의 상속 관계를 그림으로 나타내면 다음과 같습니다. rabbitanimal을, animalObject.prototype을, Object.prototypenull을 상속받고 있습니다. animalObject.prototype를 상속받는 이유는 객체 리터럴 방식으로 선언하였기 때문입니다.

그림을 보면 for..in 안에서 사용한 메서드 hasOwnPropertyObject.prototype.hasOwnProperty에서 왔다는 것을 확인할 수 있습니다.

엇? 그런데 상속 프로퍼티인 eats는 얼럿 창에 출력되는데, hasOwnProperty는 출력되지 않았습니다. 무슨 일이 있는 걸까요?

이유는 간단합니다. hasOwnProperty는 열거 가능한(enumerable) 프로퍼티가 아니기 때문입니다. Object.prototype에 있는 모든 메서드의 enumerable 플래그는 false인데, for..in은 오직 열거 가능한 프로퍼티만 순회 대상에 포함하기 때문에 hasOwnProperty는 얼럿창에 출력되지 않습니다.

키-값을 순회하는 메서드 대부분은 상속 프로퍼티를 제외하고 동작합니다.

Object.keys, Object.values 같이 객체의 키-값을 대상으로 무언가를 하는 메서드 대부분은 상속 프로퍼티를 제외하고 동작합니다.

프로토타입에서 상속받은 프로퍼티는 제외하고, 해당 객체에서 정의한 프로퍼티만 연산 대상에 포함합니다.

요약

  • 자바스크립트의 모든 객체엔 숨김 프로퍼티 [[Prototype]]이 있는데, 이 프로퍼티는 객체나 null을 가리킵니다.
  • obj.__proto__를 사용하면 프로토타입에 접근할 수 있습니다. __proto__[[Prototype]]의 getter·setter로 쓰이는데, 요즘엔 잘 쓰지 않습니다. 자세한 사항은 뒤쪽 챕터에서 다룰 예정입니다.
  • [[Prototype]]이 참조하는 객체를 '프로토타입’이라고 합니다.
  • obj에서 프로퍼티를 읽거나 메서드를 호출하려는데 해당하는 프로퍼티나 메서드가 없으면 자바스크립트는 프로토타입에서 프로퍼티나 메서드를 찾습니다.
  • 접근자 프로퍼티가 아닌 데이터 프로퍼티를 다루고 있다면, 쓰기나 지우기와 관련 연산은 프로토타입을 통하지 않고 객체에 직접 적용됩니다.
  • 프로토타입에서 상속받은 method라도 obj.method()를 호출하면 method 안의 this는 호출 대상 객체인 obj를 가리킵니다.
  • for..in 반복문은 객체 자체에서 정의한 프로퍼티뿐만 아니라 상속 프로퍼티도 순회 대상에 포함합니다. 반면, 키-값과 관련된 내장 메서드 대부분은 상속 프로퍼티는 제외하고 객체 자체 프로퍼티만을 대상으로 동작합니다.

과제

중요도: 5

객체 두 개를 이용해 쌍을 만들고 이를 수정하는 코드가 아래에 있습니다.

얼럿창에 어떤 값이 나올지 예측해보세요.

let animal = {
  jumps: null
};
let rabbit = {
  __proto__: animal,
  jumps: true
};

alert( rabbit.jumps ); // ? (1)

delete rabbit.jumps;

alert( rabbit.jumps ); // ? (2)

delete animal.jumps;

alert( rabbit.jumps ); // ? (3)

세 개의 답을 제출하셔야 합니다.

  1. truerabbit에서 가져옴.
  2. nullanimal에서 가져옴.
  3. undefined – 더 이상 프로퍼티를 찾을 수 없음.
중요도: 5

이번에 풀 과제는 두 부분으로 구성됩니다.

먼저, 아래 객체를 살펴봅시다.

let head = {
  glasses: 1
};

let table = {
  pen: 3
};

let bed = {
  sheet: 1,
  pillow: 2
};

let pockets = {
  money: 2000
};
  1. __proto__를 사용해서, 프로퍼티 조회가 pocketsbedtablehead의 경로를 따르도록 프로토타입을 할당하세요. 예를 들면, pockets.pen3이어야만 합니다.(table에서 발견할 수 있습니다.) 그리고 bed.glasses1이어야만 합니다.(head에서 발견할 수 있습니다.)
  2. pockets.glassesglasses를 얻는 것이 빠를까요? 아니면 head.glasses로 얻는 것이 빠를까요? 필요하다면 벤치마크를 사용해 성능을 측정해 보세요.
  1. __proto__를 추가해봅시다.

    let head = {
      glasses: 1
    };
    
    let table = {
      pen: 3,
      __proto__: head
    };
    
    let bed = {
      sheet: 1,
      pillow: 2,
      __proto__: table
    };
    
    let pockets = {
      money: 2000,
      __proto__: bed
    };
    
    alert( pockets.pen ); // 3
    alert( bed.glasses ); // 1
    alert( table.money ); // undefined
  2. 모던 엔진에선 객체에서 프로퍼티를 가져오는 것과 객체의 프로토타입에서 프로퍼티를 가져오는 것 사이에 성능적인 차이가 없습니다. 모던 엔진은 프로퍼티가 어디서 발견됐는지 기억하고 있다가 다음 요청 시 이 정보를 재사용합니다.

    pockets.glasses을 예시로 들어봅시다. 엔진은 glasses가 발견된 곳(head)을 기억하고 있다가, 다음 요청부턴 이 프로퍼티가 발견된 곳에서 검색을 시작할 겁니다. 모던 엔진은 뭔가 변화가 생기면 내부 캐시를 변경해줄 정도로 똑똑하기 때문에 최적화를 안전하게 수행해줍니다.

중요도: 5

animal에서 상속받은 rabbit이 있습니다.

rabbit.eat()을 호출했을 때, animalrabbit 중 어떤 객체가 full 프로퍼티를 받을까요?

let animal = {
  eat() {
    this.full = true;
  }
};

let rabbit = {
  __proto__: animal
};

rabbit.eat();

정답: rabbit

점 앞에 있는 객체가 this가 되기 때문에, rabbit.eat()rabbit을 변경합니다.

프로퍼티를 찾는 것과 프로퍼티에 뭔가를 실행하는 것은 서로 다른 일입니다.

메서드 rabbit.eat은 프로토타입에서 처음으로 발견되지만, thisrabbit이 할당되어 실행됩니다.

중요도: 5

두 마리의 햄스터가 있습니다. 일반적인 hamster 객체로부터 상속받은 speedylazy 입니다.

둘 중 한 마리에게 먹이를 줬을 때, 다른 한 마리도 배가 꽉 찹니다. 왜 그럴까요? 어떻게 하면 이런 이상한 일이 일어나지 않게 할 수 있을까요?

let hamster = {
  stomach: [],

  eat(food) {
    this.stomach.push(food);
  }
};

let speedy = {
  __proto__: hamster
};

let lazy = {
  __proto__: hamster
};

// 햄스터 한 마리가 음식을 찾았습니다.
speedy.eat("apple");
alert( speedy.stomach ); // apple

// 이 햄스터도 같은 음식을 가지고 있습니다. 왜 그럴까요? 고쳐주세요.
alert( lazy.stomach ); // apple

speedy.eat("apple") 호출에서 어떤 일이 일어나는지 주의 깊게 살펴봅시다.

  1. 메서드 speedy.eat은 프로토타입 hamster에서 발견됩니다. 이후 점 앞의 객체인 speedythis에 할당되어 실행됩니다.

  2. this.stomach.push()를 실행하려면 프로퍼티 stomach을 찾아서 여기에 push를 호출해야 합니다. this(=speedy)에 stomach이 있는지 찾아보았지만, 아무것도 발견할 수 없습니다.

  3. 프로토타입 체인을 거슬러 올라가 hamster에서 stomach를 발견합니다.

  4. stomach을 대상으로 push를 호출하여 프로토타입(hamster)의 stomach 에 food를 추가합니다.

모든 햄스터가 하나의 stomach를 공유하는 이유가 바로 여기에 있습니다.

lazy.stomach.push(...)speedy.stomach.push()를 호출했을 때 모두, 프로퍼티 stomach을 프로토타입에서 발견합니다(stomach이 객체 자체에 있지 않기 때문입니다). 따라서 새로운 데이터는 stomach에 추가됩니다.

this.stomach=을 이용해 데이터를 할당하면 이런 일이 발생하지 않습니다.

let hamster = {
  stomach: [],

  eat(food) {
    // this.stomach.push 대신에 this.stomach에 할당
    this.stomach = [food];
  }
};

let speedy = {
   __proto__: hamster
};

let lazy = {
  __proto__: hamster
};

// Speedy는 음식을 발견합니다.
speedy.eat("apple");
alert( speedy.stomach ); // apple

// Lazy의 stomach는 비어있습니다.
alert( lazy.stomach ); // <nothing>

this.stomach=stomach을 찾지 않기 때문에 의도한 대로 잘 작동합니다. 새로운 데이터는 this가 가리키는 객체에 바로 쓰입니다.

이 외에도 햄스터가 각자의 stomach를 가지게 하면 이 문제를 완전히 피할 수 있습니다.

let hamster = {
  stomach: [],

  eat(food) {
    this.stomach.push(food);
  }
};

let speedy = {
  __proto__: hamster,
  stomach: []
};

let lazy = {
  __proto__: hamster,
  stomach: []
};

// speedy는 음식을 발견합니다.
speedy.eat("apple");
alert( speedy.stomach ); // apple

// lazy의 stomach은 비어있습니다.
alert( lazy.stomach ); // <nothing>

stomach과 같이 특정 객체의 상태를 나타내는 프로퍼티 전부를 해당 객체 안에서 작성하는 것은 이런 문제를 예방할 수 있는 일반적인 해결 방법입니다.

튜토리얼 지도

댓글

댓글을 달기 전에 마우스를 올렸을 때 나타나는 글을 먼저 읽어주세요.
  • 추가 코멘트, 질문 및 답변을 자유롭게 남겨주세요. 개선해야 할 것이 있다면 댓글 대신 이슈를 만들어주세요.
  • 잘 이해되지 않는 부분은 구체적으로 언급해주세요.
  • 댓글에 한 줄짜리 코드를 삽입하고 싶다면 <code> 태그를, 여러 줄로 구성된 코드를 삽입하고 싶다면 <pre> 태그를 이용하세요. 10줄 이상의 코드는 plnkr, JSBin, codepen 등의 샌드박스를 사용하세요.