200909_TIL

Prototype Chain

prototype

• 자바스크립트는 프로토타입 기반 언어이다.
• 자바스크립트 객체는 [[prototype]] 라는 숨김 프로퍼티를 갖는다.
• 이 숨김 프로퍼티의 값은 null 혹은 다른 객체에 대한 참조가 이뤄진다. 이 때 이 참조 대상을 prototype이라고 부른다.

prototype 과 proto

• 인스턴스가 가지는 proto 객체

현재 person1 의 proto객체의 constructor는 클래스 person 이 담겨있다.

person1.__proto__.__proto__.constructor 엔 Object 가 담겨있다.

• constructor는 생성자 함수 그 자체를 가리킨다.
• prototype는 생성자 함수에 정의한 모든 객체가 공유한다.
• proto는 생성자 함수를 new 로 호출할 때, 인스턴스가 만들어질 때 정의해두었던 prototype를 참조한 객체다
• prototype 은 생성자 함수에 사용자가 직접 넣는 것이고 (클래스이름.prototype.메소드이름 = 정의내용 과 같은 형식으로) proto는 new를 호출 할 때 prototype을 참조하여 자동으로 만든다.
• 따라서 사용자는 prototype 을 신경쓰면 된다.

prototype, proto, constructor의 관계

• prototype과 constructor는 부모 자식 관계
• 생성자 함수의 prototype과 인스턴스의 proto는 같다.
• 또한 인스턴스의 __proto__ 의 constructor는 부모, 생성자 함수와 같다.

prototype 상속 (prototype chaining)

• 상속

  • 코드의 재사용성을 높이는 것
  • 상위 객체의 특징을 하위 객체에 넘겨줌

• 프로토타입 체인 및 상속

  • 객체가 가지는 __proto__라는 값은 인스턴스가 생성될 당시의 부모 함수의 프로토타입 객체를 가리킨다.
  • 프로토타입은 인스턴스에서 해당 프로퍼티를 읽는데 그 값이 존재하지 않으면 자동으로 __proto__ 에서 참조하고 있는, 프로토타입에서 해당 프로퍼티를 읽는다. 이렇게 연결고리가 이어져 있어서 상위 프로토타입을 연속해서 참조하는 이 관계를 프로토타입 체인이라고 부른다.
  • 이처럼 상속 관계에 있는 프로토 타입 체인을 통해, 자식 인스턴스도 프로토타입에 설정돼있는 메소드를 함께 공유하며, 사용할 수 있다.

Object.create(proto[, propertiesObject])

• 해당 함수는 인자로 프로토타입 객체를 받아서 해당 객체의 속성을 가진 새로운 함수 객체를 생성 하고 할당한다.
• 프토토타입 상속의 고전적인 방법에서 이 메소드를 활용 가능하다.
• 프로토타입 생성시 부모 프로토타입을 인자로 넣으면 새로운 객체를 만들어 생성, 반환하고 이는 마치 부모 프로토타입을 복사한 형태로 생성하기 때문에 자식 프로토타입에 새로운 메서드를 추가해도 부모 프로토타입엔 영향을 끼치지 않는다.

ES6 class 키워드 및 super 키워드

• 클래스 상속은 extends 키워드와 super 키워드로 비교적 쉽게 구현할 수 있다.

  • super 키워드
    • super([arguments]) 부모 생성자 호출
    • super.functionOnParent([arguments]); 부모 메소드실행
    • static 메서드에서도 super를 호출할 수 있다.
    • 생성자에서 super키워드 하나만 사용되거나 this키워드가 사용되기전에 호출되어야한다.
    • 객체 리터럴에서도 super를 사용해서 프로퍼티를 읽어올 수 있다.

• 프로토타입 상속은 고전적 방법도 존재하지만, ES6 에 추가된 class 키워드를 이용한 모던한 방법도 존재한다.

• super() 키워드
  부모 오브젝트의 함수를 호출할 때 사용하는 것으로, 자식 클래스의 생성자함수 내에서 super() 함수를 이용하면 부모 클래스의 생성자 함수를 상속받을 수 있다.

  만약 자식 클래스와 부모 클래스의 인자가 똑같다면 생성자함수를 생략시켜줄 수도 있다.

• 또한 메서드를 상속받아서 변형시키고 싶거나 추가하고 싶을 땐 (기존의 값을 이용하여서) super.메소드() 와 같은 형식으로 자식 클래스 메소드에서 사용할 수 있다.