javascript プロトタイプチェーンを使用してみる

2021.01.07
javascript
javascript

javascriptで、プロトタイプチェーンを使用した簡単なサンプルコードを記述してます。

1. 環境
2. プロトタイプチェーン使い方

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 84.0.4147.105

windows10にApacheのインストール

プロトタイプチェーン使い方

まずは、適当なオブジェクトを生成してコンソールに出力してみます。

const hoge = {};

console.log(hoge);

const hoge = {};

console.log(hoge);

コンソール画面

ここに表示されている、__proto__プロパティが、Objectのプロパティであるprototypeと同じになります。

console.log(hoge.__proto__ === Object.prototype); // ture

1	console.log(hoge.__proto__ === Object.prototype); // ture

そして、この__proto__プロパティは、全てのオブジェクトが持っており、
prototypeを参照してます。

プロトタイプチェーンとは、オブジェクトに必要なプロパティが見つからない場合に、__proto__のプロパティが、参照するprototypeオブジェクトの存在を確認し、nullになるまで実行されることを指します。

実際に、プロトタイプチェーンを使用してみます。

function Hoge(str) {
    this.name = str;
}

// Hogeのプロトタイプを作成
Hoge.prototype.foo = function() {
  console.log(this.name);
}

const hoge = new Hoge("mebee");

// prototypeを参照
console.log(hoge.__proto__ === Hoge.prototype); // true

// コンストラクタ prototypeプロパティを保持
console.log(hoge.constructor.toString()); // function Hoge(str) {this.name = str;}

hoge.foo();  // mebee

function Hoge(str) {

this.name = str;

}

// Hogeのプロトタイプを作成

Hoge.prototype.foo = function() {

console.log(this.name);

}

const hoge = new Hoge("mebee");

// prototypeを参照

console.log(hoge.__proto__ === Hoge.prototype); // true

// コンストラクタ prototypeプロパティを保持

console.log(hoge.constructor.toString()); // function Hoge(str) {this.name = str;}

hoge.foo(); // mebee

Hogeのプロトタイプが作成されていることが確認できます。

また、プロトタイプチェーンを使用することで関数を共通化することもできます。

function Hoge(str) {
    
  this.name = str;

  this.getname = () => console.log(this.name);
}

Hoge.prototype.foo = function() {
  console.log(this.name);
}


const hoge = new Hoge("mebee");
const bar = new Hoge("site");

console.log(hoge === bar); // false
console.log(hoge.getname === bar.getname); // true
console.log(hoge.foo === bar.foo); // true