2021년 12월 15일

프로토타입 상속

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

사람에 관한 프로퍼티와 메서드를 가진 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만 가능합니다. 다른 자료형은 무시됩니다.

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

프로토타입은 읽기 전용이다

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

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

객체 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)가 추가되는게 아니라 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"; // (**)

alert(admin.fullName); // Alice Cooper, setter에 의해 추가된 admin의 프로퍼티(name, surname)에서 값을 가져옴
alert(user.fullName); // John Smith, 본래 user에 있었던 프로퍼티 값

프로토타입 user엔 getter 함수 get fullName이 있기 때문에 (*)로 표시한 줄에선 get fullName이 호출되었습니다. 마찬가지로 프로토타입에 이미 setter 함수(set fullName)가 정의되어 있기 때문에 (**)로 표시한 줄의 할당 연산이 실행되면 객체 user에 프로퍼티가 추가되는게 아니라 프로토타입에 있는 setter 함수가 호출됩니다.

this가 나타내는 것

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

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

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

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

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

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

rabbit.sleep()을 호출하면 객체 rabbitisSleeping프로퍼티가 추가됩니다.

// 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를 상속받는 이유는 animal을 객체 리터럴 방식으로 선언하였기 때문입니다.

그림을 보면 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]]이 참조하는 객체를 '프로토타입’이라고 합니다.
  • 객체에서 프로퍼티를 읽거나 메서드를 호출하려는데 해당하는 프로퍼티나 메서드가 없으면 자바스크립트는 프로토타입에서 프로퍼티나 메서드를 찾습니다.
  • 접근자 프로퍼티가 아닌 데이터 프로퍼티를 다루고 있다면, 쓰기나 지우기와 관련 연산은 프로토타입을 통하지 않고 객체에 직접 적용됩니다.
  • 프로토타입에서 상속받은 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.pentable에 있는 3, bed.glasseshead에 있는 1이 되어야 합니다.
  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을 변경합니다.

프로퍼티를 찾는 것과 프로퍼티를 실행하는 것은 완전히 다른 일입니다.

메서드 eat은 프로토타입에서 찾을 수 있지만, 메서드를 실행할 땐 thisrabbit이 되어 해당 메서드가 실행됩니다.

중요도: 5

hamster 객체를 상속받는 햄스터 speedylazy가 있다고 가정해봅시다.

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

let hamster = {
  stomach: [],

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

let speedy = {
  __proto__: hamster
};

let lazy = {
  __proto__: hamster
};

// 햄스터 speedy가 음식을 먹습니다.
speedy.eat("apple");
alert( speedy.stomach ); // apple

// 햄스터 lazy는 음식을 먹지 않았는데 배에 apple이 있다고 나오네요. 왜 그럴까요? lazy는 배가 비어있도록 고쳐주세요.
alert( lazy.stomach ); // apple

speedy.eat("apple")을 호출하면 무슨 일이 일어나는지 주의 깊게 알아보아야 원인을 파악할 수 있습니다.

  1. 메서드 speedy.eat은 프로토타입 hamster에서 발견되는데, 점 앞엔 객체 speedy가 있으므로 thisspeedy가 할당되어 메서드가 실행됩니다.

  2. this.stomach.push()를 실행하려면 프로퍼티 stomach을 찾아서 여기에 push를 호출해야 합니다. 그런데 thisspeedy엔 프로퍼티 stomach이 없습니다.

  3. stomach을 찾기위해 프로토타입 체인을 거슬러 올라가보니 hamsterstomach이 있는것을 발견합니다.

  4. push 메서드는 프로토타입 hamster에 있는 stomach 을 대상으로 동작하여 프로토타입에 food가 추가됩니다.

모든 햄스터가 하나의 stomach를 공유하는 이유는 바로 이런 동작방식 때문입니다.

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

문제를 해결하려면 push 메서드가 아닌 this.stomach=을 사용해 데이터를 할당하면 됩니다.

let hamster = {
  stomach: [],

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

let speedy = {
   __proto__: hamster
};

let lazy = {
  __proto__: hamster
};

// 햄스터 speedy가 음식을 먹습니다.
speedy.eat("apple");
alert( speedy.stomach ); // apple

// lazy는 음식을 먹지 않았기 때문에 배가 비어있습니다.
alert( lazy.stomach ); // (아무것도 출력 안됨)

this.stomach=은 객체 자체에 해당 프로퍼티를 추가하지 프로토타입 체인에서 stomach을 찾지 않기 때문에 의도한 대로 잘 작동합니다.

이 방법 말고도 햄스터가 각자의 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는 음식을 먹지 않았기 때문에 배가 비어있습니다.
alert( lazy.stomach ); // (아무것도 출력 안됨)

문제의 stomach처럼 특정 객체의 상태를 설명하는 프로퍼티는 조상 객체가 아닌 객체 자체에 정의하는 것이 이런 문제를 차단할 수 있는 일반적인 방법입니다.

튜토리얼 지도

댓글

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