JavaScriptのObject.create()でプロトタイプ継承する方法

2021年3月10日2021年3月26日JavaScript

JavaScriptのObject.create()でプロトタイプ継承する方法についてまとめました。

JavaScriptのObject.create()でプロトタイプ継承する方法

Object.create()はプロトタイプ継承ができますが、Constructor関数やES6クラスキーワードと異なり、自動的にprototypeとリンクさせるものではありません。
そして、constructor関数もnew演算子も使いません。
その代わり、object.create()は()で指定したオブジェクトのプロトタイプへ手動でリンクさせることができます。

const PersonOC = {
  calc2050() {
    console.log(2050 - this.birthYear);
  },

  createNameBirthYear(firstName, lastName, birthYear) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.birthYear = birthYear;
    console.log(`${this.firstName} ${this.lastName}は${this.birthYear}年生まれです。`);
  }
};

// PersonOCを継承する
const takahashi = Object.create(PersonOC);

// 継承されているか確認する
console.log(takahashi);//{} 空のオブジェクトの中の__proto__にすでにPersonOCが作られる
console.log(takahashi.__proto__);//{calc2050: ƒ}PersonOCのメソッドが継承されている
console.log(takahashi.__proto__ === PersonOC);//true
console.log(takahashi.__proto__ === PersonOC.prototype);//false

//生まれ年を追加してcalc2050が使えるか確認
takahashi.birthYear = 2010;
takahashi.calc2050();//40　calc2050が使えている

//別の人を作成、PersonOCを継承する
const higashi = Object.create(PersonOC);

// 継承されているか確認する
higashi.createNameBirthYear('Satoru', 'Higashi', 2030);//Satoru Higashiは2030年生まれです。
higashi.calc2050();//20

「const PersonOC」というように、プロトタイプ継承される側の名前は大文字で始めます。
そこにメソッドやプロパティを追加します。
あとは、「const takahashi = Object.create(PersonOC)」ですでに空のオブジェクトが生成されて、その中の__proto__にPersonOCが作られています。
このように手動でプロトタイプ継承をすることができるのが、Object.create()のメリットです。

Object.create()で親クラス>子クラス>オブジェクトをつなげる方法

Object.create()は他のどの方法よりも最もシンプルにプロトタイプチェーンをつくることができます。

//親クラス
const PersonProto = {
  calc2050() {
    console.log(2050 - this.birthYear);
  },

  init(firstName, lastName, birthYear) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.birthYear = birthYear;
  },
};

const yamada = Object.create(PersonProto);

//親クラスと子クラスのプロトタイプをつなげる
const StudentProto = Object.create(PersonProto);

//子クラス
StudentProto.init = function(firstName, lastName, birthYear, course) {
  PersonProto.init.call(this, firstName, lastName, birthYear);
  this.course = course;
};

//オブジェクト
//子クラスとオブジェクトのプロトタイプをつなげる
const sasaki = Object.create(StudentProto);

sasaki.init('太郎', '佐々木', 2030, '理科')
console.log(sasaki);//{firstName: "太郎", lastName: "佐々木", birthYear: 2030, course: "理科"}
sasaki.calc2050();//20

Object.create()で親クラス>子クラス>オブジェクトをつなげる方法はシンプルです。

const StudentProto = Object.create(PersonProto)で親クラスと子クラスのプロトタイプをつなげます。
const sasaki = Object.create(StudentProto)で子クラスとオブジェクトのプロトタイプをつなげます。