TIL(20/06/17) Prototype Chain 프로토타입 체인 in JavaScript

Prototype Chain 프로토타입 체인 in JavaScript

 

모든 함수에는 prototype이라는 속성이 있고, 할당을 할 수 있다.

constructor는 생성자다. 특정 객체가 생성될 때 실행되는 코드라고 한다.

 

prototype - 클래스를 만들 때 원형객체

인스턴스를 생성하는 것을 Instantiation이라고 한다.

 

아래와 같은 클래스와 steve라는 인스턴스가 있다. 

이때 steve 와 prototype은 어떤 관계일까.

var Human = function(){
  this.name = name;
};

Human.prototype.sleep = function(){};

var steve = new Human('steve');

__proto__ : 프로토타입 체인

 

steve.__proto__ === Human.prototype

스티브 인스턴스의 프로토타입 체인은 Human의 프로토타입이다.

steve.__proto__ === Human.prototype

그런데 .toString();이라는 메소드는 왜 항상 사용될 수 있는 것일까?
사실 어디에선가 프로토타입에 선언해진 것이다.

그래서 .__proto__ 의 .__proto__ 에서 선언되어져 있을 것이다.

 

정말 놀랍다. 

막연히 사용하고 있던 다양한 메소드들은 

실은 어떤 객체의 프로토타입에서 선언된 메소드였던 것이다.

 

그리고 가장 상위의 객체는 Object 라는 상위 객체가 있다.

상속의 가장 상위 단계.

모든 객체는 Object를 상속받는다.

 

 

HTML Element의 상속관계를 보자.

Object - EventTarget - Node - Element - HTMLElement - HTMLLIElement

 

 

프로토타입은 할당이 가능하다.

 

상속을 어떻게 받을까?

 

prototype of

 

Object.create(proto) 
: 첫번째 인자로 들어가는 프로토타입 객체를 기반으로 프로토타입을 만든다.

 

부모의 프로토타입을 카피할 것이다.

부모의 프로토타입을 참조하는 새로운 객체를 만드는 메소드 === Object.create(부모프로토타입)

 

근데 이렇게 하면, constructor가 연결이 끊어진다. 

부모 constructor를 가져가버린다.

그래서 다시 constructor을 명확하게 선언해줘야한다.

Student.prototype = Object.create(Human.prototype);
Student.prototype.constructor = Student;
Student.prototype.learn = function(){}

그리고 또 해줘야하는 것.

 

new 키워드를 사용하면 this가 인스턴스가 되는데,
이때 student의 실행컨택스트가 만들어질 뿐,

Human까지 안올라가서, 이를 올려줘야한다.

 

Human.call(this, name);

 

 

그리고 등장한 Class keyword

 

this를 전달하는 역할을 super라고 할 수 있고,

extends 라는 키워드로 prototype을 가져올 수 있다.

 

class Human {
  constructor(name){
	this.name = name;
  }
  sleep(){
  }
}

var steve = new Human('steve');

class Student extends Human {
  constructor(name) {
    super(name);
  }
  learn(){
  }
}
var john = new Student('john');
john.learn();
john.sleep(); 

constructor가 같으면 자식의 것을 생략할 수도 있다.

 

 

그럼 다형성이란 무엇일까? 

 

원본 함수를 같이 사용하되, 자식에 따라 다른 모양으로 표현하는 것.

 

부모프로토타입에서 어떤 것을 추가하고 싶을 때 어떻게 해야할까?

Human.prototype.sleep.apply(this);

apply로 다시 넘겨주는 것.

 

 

class로 하게되면,

 

class Human {
  constructor(name){
    this.name = name;
  }
  sleep(){
    console.log('zzz')
  }
}



class Student extends Human{
  sleep(){
  	super.sleep;
  }
}

 

 

 

 

Prototype Chain 프로토타입 체인 in JavaScript