Prototype in Javascript

기본적으로 모든 함수는 EMPTY(기본값)인 프로토타입으로 속성 이름을 가지고 있다. 거기에 특성과 방법을 추가할 수 있다.

Note: 모든 함수는 생성자 함수이다.

함수 x가 있고 x1이 x의 prototype을 이어받으므로 x의 개체를 만든다고 하자.

var x = function(j) {
  this.i = 0;
  this.j = j;
  
  this.GetJ =  function() {
  	return this.j;
  }
}

var x1 = new x(2);

console.log(x1); 
  // > x {i: 0, j: 2, GetJ: ƒ}
 
console.log(x1.GetJ());
  // > 2

Note: 생성자 함수에 관한 this는 생성자 함수가 포함된 함수를 지칭하는 것이 아니라 생성자 함수에 의해 생성될 객체를 가리킨다.

이제 원하는 객체로 만들 수 있으며 x에서 생성된 모든 객체에는 GetJ() 메서드가 부착되어 있으며, GetJ() 메서드는 불량 상태이다. 이에 대한 해결책은 프로토타입이다. GetJ() 방법을 x의 프로토타입으로 가져간다.

var x = function(j) {
  this.i = 0;
  this.j = j;
}

x.prototype.GetJ =  function() {
  	return this.j;
 }

var x1 = new x(2);

console.log(x1); 
  // > x {i: 0, j: 2}
 
console.log(x1.GetJ());
  // > 2

하지만 x1에는 GetJ()이 없다는 것이 유일한 차이점 이전과 같은 방식으로 작동하므로 여전히 정확한 출력을 얻을 수 있다. 따라서 프로토타입 체인을 찾아보고(부모 부모까지 올라가서!) GetJ()을 찾는다.

Note: Prototype Chain Javascript의 모든 기능은 마스터 객체에서 생성된다.

여기서 주목할 점은 x -> function -> object 따라서 x에서 어떤 방법을 호출하면, 그 perticular함수에 x가 있지 않으면, 나중에 찾을 때까지 위아래로 표시된다. 함수에 prototype chain이 존재하지 않는 경우, undefined 상태로 표시됩니다.

예를 들면,

var x = function() {
}

console.dir(x);

그래서 프로토타입 체인 전체를 만들 수 있다. 여기서 호출을 하게 되면

console.log(x.toString());
// > function() {
// >
// >  }

여기서 x는 toString()을 사용할 필요가 없지만 위로 올라가보면 prototype chain에 있다.

Prototypes in Depth

Javascipt는 Java와 같은 Class defination을 가지고 있지 않는다. 여기서 Base class에서 서브 클래스를 만드는 방법을 소개한다.

//Baseclass
var Bookshop = function() {
  this.cost = 100;
}

Bookshop.prototype.bill = function() {
  console.log('Your Bill is: $'+ this.cost);
}

Bookshop은 Base Class로 bill이 prototype으로 속해있다.

//Subclass
 var BuyBook = function(title,cost) {
  Bookshop.call(this); // Statement 1
  
  this.title = title;
  if(cost) 
    this.cost = cost ;
 }

BuyBook.prototype = Object.create(Bookshop.prototype); // Statement 2
BuyBook.prototype.constructor = BuyBook; // Statement 3

Bookshop은 Base Class로 BuyBook은 그의 Sub Class로 속해있다.

Explaination

1. Bookshop.call(this)

이 라인은 생성자를 call할 때 vlaue값으로 this를 넘겨주었다. 그래서 `BuyBook : this = { this.cost = 100; }가 된다.

2. BuyBook.prototype = Object.create(Bookshop.prototype);

이 라인은 Bookshop.prototype의 초기값을 셋팅해준다.

3. BuyBook.prototype.constructor = BuyBook;

이 라인은 BuyBook 생성자 함수를 셋팅해준다. (BuyBook은 메소드이다)

 var person_1 = new BuyBook('GOT', 200);
 var person_2 = new BuyBook('Harry Potter');

 person_1.bill();
 //> Your Bill is: $200
 person_2.bill();
 //> Your Bill is: $100

이렇게 하면 상속을 수행할 수 있다. BuyBook.protype에서 새 메서드를 정의하여 bill() 메서드를 덮어쓸 수도 있다. 예를들면 BuyBook.prototype.bill = function() { } 이렇게!

😄