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

javascriptで、プロトタイプチェーンを使用した簡単なサンプルコードを記述してます。
環境
- OS windows10 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 84.0.4147.105
プロトタイプチェーン使い方
まずは、適当なオブジェクトを生成してコンソールに出力してみます。
1 2 3 |
const hoge = {}; console.log(hoge); |
コンソール画面

ここに表示されている、__proto__プロパティが、Objectのプロパティであるprototypeと同じになります。
1 |
console.log(hoge.__proto__ === Object.prototype); // ture |
そして、この__proto__プロパティは、全てのオブジェクトが持っており、
prototypeを参照してます。
プロトタイプチェーンとは、オブジェクトに必要なプロパティが見つからない場合に、__proto__のプロパティが、参照するprototypeオブジェクトの存在を確認し、nullになるまで実行されることを指します。
実際に、プロトタイプチェーンを使用してみます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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のプロトタイプが作成されていることが確認できます。
また、プロトタイプチェーンを使用することで関数を共通化することもできます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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 |
-
前の記事
rails6 別ファイルを作成してseedを実行する 2021.01.07
-
次の記事
python 大文字・小文字を判定する 2021.01.07
コメントを書く