자바스크립트의 프로토타입 - 자바스크립트 핵심 가이드

프로젝트가 얼추 마무리 되고 <자바스크립트 핵심 가이드>라는 책을 펼쳐 읽다가 문득 프로토타입에 대한 이해 부족한 듯 해서 하기 코드를 이해하려고 노력 중이다. (아직 이해가 안 되고 있음)

 

 

if(typeof Object.create !== 'function') { 
  Object.create = function (o) { 
    var F = function () {}; 
    F.prototype=o; 
    return new F(); 
  }; 
}

var another_stooge = Object.create(stooge);

 

<인텔리제이의 AI Assistant에게 물어본 답변>

 

먼저 'Object.create'가 존재하는지 확인합니다. 'Object.create'는 일반적으로 객체를 새로 만드는 JavaScript 내장 함수입니다. 그러나 이 코드는 이 기능이 존재하지 않았을 경우를 대비해 만들어졌습니다.
if(typeof Object.create !== 'function') { ... } 
'Object.create' 기능이 없다면 사용자 정의 버전을 생성합니다.
Object.create = function (o) { ... }; 
이 함수는 새로운 객체를 생성하고, 이 새로운 객체의 원형(prototype)을 파라미터로 받은 객체로 설정합니다. 'prototype'이라는 말은 여기서 '기본 형식'을 의미합니다. 이렇게 함으로써 새 객체는 원본 객체의 모든 속성과 메소드에 접근할 수 있게 됩니다.
var F = function () {}; F.prototype = o; return new F(); 
마지막으로, 'stooge'라는 객체로부터 'another_stooge'라는 새로운 객체를 생성합니다. 이 새로운 객체는 'stooge'의 모든 속성과 메소드를 가지게 됩니다.
var another_stooge = Object.create(stooge); 
비유적으로 설명해보자면, 이 코드는 마치 클레이로 동일한 포멧의 모형을 만드는 것과 같습니다. 'F'는 모형을 만들 카피 머신이고, 'stooge'는 원본 모형이며, 다른 'another_stooge'는 사본 모형입니다.

 

 

 

흠... 아직 이해가 안 된다.

---

 

MDN 참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create

Object.create() - JavaScript | MDN

// 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.'