18. prototype

이수현·2022년 5월 19일

TIL

목록 보기

17/23

📚 prototype

자바스크립트는 Prototype기반 언어이다. 클래스 기반 언어에서는 상속을 사용하지만Prototype기반 언어에서는 어떤 객체를 Prototype으로 삼고 이를 복제함으로써 상속과 비슷한 효과를 얻는다.

어떤 Class나 생성자 함수를 new 연산자와 함께 호출하면, Class의 constructor나 생성자 함수 내부에서 정의된 내용을 바탕으로 새로운 인스턴스가 생성된다.

이때 인스턴스에는 __proto__라는 프로퍼티가 자동으로 부여되는데, 이 프로퍼티는 Constructor의 prototype이라는 프로퍼티를 참조한다.

=> prototype과 proto라는 프로퍼티가 새로 등장했는데, 이 둘의 관계가 프로토타입 개념의 핵심이다.

prototype은 객체이다. 이를 참조하는 __proto__ 역시 당연히 객체이다.
prototype 객체 내부에는 인스턴스가 사용할 메서드를 저장한다.
그러면 인스턴스에서도 숨겨진 프로퍼티인 __proto__을 통해 이 메서드들에 접근할 수 있게된다.

let Person = function (name) {
  this.name = name;
};

Person.prototype.getName = function () {
  return this.name;
};

let su = new Person("kiki");
console.log(su.__proto__.getName()); // undefined
console.log(su.getName()); // kiki
console.log(Person.prototype === su.__proto__); // true

class Animal {
  constructor(age) {
    this.age = age;
  }
}

Animal.prototype.getAge = function () {
  return this.age;
};

let an = new Animal(12);
console.log(an.__proto__.getAge()); // undefined
console.log(an.getAge()); // 12
console.log(Animal.prototype === an.__proto__); // true

왜 instance.__proto__.메서드() 를 실행했는데 undefined가 출력되는지 생각해보자
어떤 함수를 "메서드"로서 호출할 때는 메서드명 바로 앞의 객체가 this가 된다.
그러니까 su.__proto__.getName()에서 getName() 함수 내부에서의 this는 su가 아니라 su.__proto__라는 객체가 되는 것이다.
su.__proto__ 객체 내부에는 name 프로퍼티가 없으므로 undefined를 반환한다.
su.__proto__.name = "kiki__proto__"; 로 name 프로퍼티를 만든다면, console.log(su.__proto__.getName()); 출력값으로 "kiki__proto__"가 나올 것이다.
관건은 "this"이다.
인스턴스 자체가 this가 되기 위해서 위에서 su.getAge()를 출력했더니 "kiki"가 출력된 것을 볼 수 있다.
메서드 앞의 객체가 su라는 인스턴스 자체이므로 "kiki"가 나온 것이다.
그런데 생각해보면 생성자.prototype에 getName을 정의하였는데 어떻게 prototype을 참조하는 __proto__ 를 생략해서 su.getName()을 실행했는데 값이 제대로 나올까?.
이것은 애초에 __proto__가 생략 가능한 프로퍼티이기 때문이다. 원래부터 생략이 가능하도록 정의돼 있다.
즉, su.getName()은 su(.__proto__).getName()이라고 보면된다.
__proto__를 생략하지 않으면 this는 su.__proto__를 가리키지만, 생략하면 su를 가리킨다.

위 코드 요약:

한 마디로 this가 관건이다. su.__proto__는 Person.prototype을 참조한다. 그래서 getName()을 호출할 수 있는 것이다.
그런데 su.__proto__.getName()을 하면 su.__proto__ 자체가 호출 메서드의 객체가 되는데 su.__proto__는 name 프로퍼티가 존재하지 않아서 undefined 출력된다.
그렇다면 getName()을 호출할 때 객체가 su가 돼야 "kiki"가 출력될 것이다.
prototype 프로퍼티를 참조하는 __proto_는 생략이 가능하다.
그래서 su.getName()이 바로 가능하다.
아래 사진을 보면 su를 입력해도 prototype 프로퍼티를 참조하는 것을 확인할 수 있다.

한 줄 요약: new 연산자로 생성자를 호출하면 -> 인스턴스가 생성되는데, 인스턴스의 생략 가능한 프로퍼티인 __proto__는 생성자의 prototype을 참조한다.

자바스크립트는 함수에 자동으로 객체인 prototype 프로퍼티를 생성해 놓는데, 해당 함수를 생성자 함수로 사용할 경우(new 연산자 호출), 그러부터 생성된 인스턴스에는 숨겨진 프로퍼티 __proto__가 자동으로 생성된다.
이 프로퍼티는 prototype 프로퍼티를 참조한다.
생략 가능하기 때문에 생성자 함수나 class의 prototype에 어떤 메서드나 프로퍼티가 있다면 인스턴스에서도 마치 자신의 것처럼 접근할 수 있게 된다.