Prototype chain

Prototype chain

__proto__, constructor, prototype 관계

__proto__ : 프로퍼티에 접근하면 내부적으로 Object.getPrototypeOf가 호출되어 프로토 타입 객체를 반환

constructor : 프로토타입 객체, 객체의 입장에서 자신을 생성한 객체를 가르킴

prototype : 모든 객체는 자신의 프로토타입 객체를 가르키는 [[Prototype]] 인터널 슬롯을 갖으며 상속을 위해 사용

Prototype chain : 자바스크립트는 특정 객체의 프로퍼티나 메소드에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티 또는 메소드가 없다면 [[Prototype]]이 가리키는 링크를 따라 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례대로 검색

JS : 객체 → 객체이기 때문에 property

function Person() {} === var Person = new Function();

prototype vs proto

function Person(name, first, second) {
  this.name = name;
  this.first = first;
  this.second = second;
}

Persone 이라는 새로운 객체가 생성

객체가 하나 더 생김 Person's prototye 객체

2개의 객체는 서로 연관되어 있음

prototype property → Person's prototype을 가르킴

기록하기 위해 Person's prototype constructor property → Person을 가르킴

function Person(name, first, second) {
  this.name = name;
  this.first = first;
  this.second = second;
}

Person.prototype.sum = function(){}

var kim = new Person('kim', 10, 20)

var lee = new Person('lee', 10, 10)

객체를 찍어내는 constructor 객체를 만듦

kim라는 객체를 생성

this 의 값이 생성되는 동시에 kim에 생성

__proto__ → Person's prototype접근가능

lee라는 객체를 생성

this의 값이 생성되는 동시에 lee에 생성

__proto__ → Person's prototype접근가능

function Person(name, first, second) {
  this.name = name;
  this.first = first;
  this.second = second;
}

Person.prototype.sum = function(){}

var kim = new Person('kim', 10, 20)

var lee = new Person('lee', 10, 10)

console.log(kim.name)

kim.name property 찾음

object.create 메소드에 대한 개념

object.create 메소드는 지정된 프로토타입 객체 및 속성을 갖는 새 객체를 만듦

Object.create(프로토타입객체[,새로운객체의프로퍼티1, 새로운객체의프로퍼티2,...]);

첫 번째 인수로는 프로토타입으로 사용할 객체를 전달

두 번째 인수로는 새로운 객체의 추가할 프로퍼티 정보를 전달

// Shape - 상위클래스
function Shape() {
  this.x = 0;
  this.y = 0;
}

// 상위클래스 메서드
Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.info('Shape moved.');
};

// Rectangle - 하위클래스
function Rectangle() {
  Shape.call(this); // super 생성자 호출.
}

// 하위클래스는 상위클래스를 확장
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

console.log('Is rect an instance of Rectangle?', rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?', rect instanceof Shape); // true
rect.move(1, 1); // Outputs, 'Shape moved.'

MDN 공식문서 Code

ES6 class, super 키워드 이용 방법

class super 키워드 이용

class Dog {
  constructor(name) {
    this.name = name;
  }
  info() {
    console.log(this.name + "입니다.");
  }
}
class Animal extends Dog {
  info() {
    super.info();
    console.log(this.name + "이름은 puppy 입니다.");
  }
}

const animal = new Animal("dog");
animal.info();

Reference