📖Review (21.04.13)

JavaScriptはプロトタイプベースの言語です.ここで、プロトタイプ(prototype)とは、プロトタイプオブジェクトを指す.
JavaScriptのすべてのオブジェクトにはprototypeというオブジェクトがあります.
すべてのオブジェクトは、そのプロトタイプから属性とメソッドを継承します.

prototype chain

Object.プロトタイプオブジェクトは、これらのプロトタイプチェーンの最上位に存在するプロトタイプです.
したがって、JavaScriptのすべてのオブジェクトはObjectです.プロトタイプオブジェクトをプロトタイプとして継承します.
Humanという名前のクラスとインスタンス、prototype chain

配列クラスとインスタンス、prototype chain

プロトタイプの作成

function Dog(color, name, age) { // 개에 관한 생성자 함수를 작성함.

    this.color = color;          // 색에 관한 프로퍼티

    this.name = name;            // 이름에 관한 프로퍼티

    this.age = age;              // 나이에 관한 프로퍼티

}

var myDog = new Dog("흰색", "복이", 1); // 이 객체는 Dog라는 프로토타입을 가짐.

console.log("우리 집 강아지는 " + myDog.name + "라는 이름의 " + myDog.color + " 털이 매력적인 강아지입니다.");

継承(継承)

継承とは、新classにおいて、既存classのすべての属性と方法を使用できることをいう.

JavaScriptは現在存在するオブジェクトをプロトタイプとして使用し、そのオブジェクトを複製・再利用することを継承と呼ぶ.

擬似クラスモード継承

擬似クラスモードは、サブコンストラクタのプロトタイプ属性を親コンストラクタのインスタンスに置き換えることで継承を実現する方法です.親も子供も構造関数を定義しなければならない.

// 부모 생성자 함수
var Parent = (function () {
  // Constructor
  function Parent(name) {
    this.name = name;
  }

  // method
  Parent.prototype.sayHi = function () {
    console.log('Hi! ' + this.name);
  };

  // return constructor
  return Parent;
}());

// 자식 생성자 함수
var Child = (function () {
  // Constructor
  function Child(name) {
    this.name = name;
  }

  // 자식 생성자 함수의 프로토타입 객체를 부모 생성자 함수의 인스턴스로 교체.
  Child.prototype = new Parent(); // ②

  // 메소드 오버라이드
  Child.prototype.sayHi = function () {
    console.log('안녕하세요! ' + this.name);
  };

  // sayBye 메소드는 Parent 생성자함수의 인스턴스에 위치된다
  Child.prototype.sayBye = function () {
    console.log('안녕히가세요! ' + this.name);
  };

  // return constructor
  return Child;
}());
var child = new Child('child'); // ①
console.log(child);  // Parent { name: 'child' }

console.log(Child.prototype); // Parent { name: undefined, sayHi: [Function], sayBye: [Function] }

child.sayHi();  // 안녕하세요! child
child.sayBye(); // 안녕히가세요! child

console.log(child instanceof Parent); // true
console.log(child instanceof Child);  // true

Childコンストラクタ生成のインスタンスchild(①)のプロトタイプオブジェクトはParentコンストラクタ生成のインスタンス(②)である.Parentコンストラクション関数によって作成されたインスタンスのプロトタイプオブジェクトはParentです.原型です.
コンストラクション関数を作成し、new演算子を使用してオブジェクトを作成することで、同じプロトタイプを持つオブジェクトを作成できます.

プロトタイプモード継承

プロトタイプパターン継承はobject.create関数を用いてオブジェクトから他のオブジェクトへの直接継承を実現する方式である.プロトタイプパターン継承は,医師系パターン継承よりも概念的に簡単である.また,擬似クラスモードの欠点であるnew演算子は不要であり,ジェネレータリンクを破壊することもなく,オブジェクト文字にも利用できる.
ex 1)

// 부모 생성자 함수
var Parent = (function () {
  // Constructor
  function Parent(name) {
    this.name = name;
  }

  // method
  Parent.prototype.sayHi = function () {
    console.log('Hi! ' + this.name);
  };

  // return constructor
  return Parent;
}());

// create 함수의 인수는 프로토타입이다.
var child = Object.create(Parent.prototype);
child.name = 'child';

child.sayHi();  // Hi! child

console.log(child instanceof Parent); // true

ex 2)

var Bee = require('./Bee');

var HoneyMakerBee = function () {
    Bee.call(this);
    this.age = 10;
    this.job = "make honey";
    this.honeyPot = 0;
};
HoneyMakerBee.prototype = Object.create(Bee.prototype);
HoneyMakerBee.prototype.constructor = HoneyMakerBee;

新とobject.create()との違い
2つの方法で新しいオブジェクトを作成するのは同じですが、作成方法は異なります.

・newを使用すると、関数はジェネレータとして動作

・Object.create()同じオブジェクトのみを生成し、作成者を実行しない

オブジェクトへの属性とメソッドの追加

function Dog(color, name, age) {

    this.color = color;

    this.name = name;

    this.age = age;

}

var myDog = new Dog("흰색", "복이", 1);

myDog.family = "말티푸"; // 품종에 관한 프로퍼티를 추가함.

myDog.breed = function() {        // 털색을 포함한 품종을 반환해 주는 메소드를 추가함.

    return this.color + " " + this.family;

}

console.log("우리 집 강아지는 " + myDog.breed() + "입니다.");

上記の例では、新しく追加したweight propertyおよびbreed()メソッドはmydogインスタンスにのみ追加されます.
他の作成済みまたは作成後のDogオブジェクトには追加されません.

プロパティとメソッドをプロトタイプに追加

プロトタイプの場合は、後で作成する他のすべてのオブジェクトに適用するには、コンストラクション関数に直接追加する必要があります.

function Dog(color, name, age) {

    this.color = color;

    this.name = name;

    this.age = age;

    this.family = "말티푸"; // 프로토타입에 프로퍼티를 추가할 때에는 기본값을 가지게 할 수 있음.

    this.breed = function() {

        return this.color + " " + this.family;

    };

}

var myDog = new Dog("흰색", "복이", 1);

var hisDog = new Dog("검정색", "꼬미", 3);

console.log("우리 집 강아지는 " + myDog.family + "이고, 친구네 집 강아지도 " + hisDog.family + "입니다.");