JavaScriptのプロトタイプ継承について

Published: 2016年3月12日 by tomsato

概要

JavaScriptのプロトタイプ継承についてのまとめ
自分なりのメモなのであしからず

JavaScript勉強シリーズ

プロトタイプ継承について

JavaScriptにはクラスを作る機能は用意されていない
(ECMAScript 6でclass構文が追加されたみたいだがブラウザの対応状況がまだまだみたい)

しかしJavaScriptにはオブジェクトの継承に関する概念がある
感覚としては親オブジェクトのプロパティを子オブジェクトのプロパティが継承するってことで
子オブジェクトではそのプロパティについて書いてないが親オブジェクトで書いてあるのでそれを継承して使えちゃうという話
プロトタイプ継承の例

// JavaScriptにはクラスというものがないが
// クラス相当のものは作成できるので便宜上クラスと呼ぶ

// クラス定義相当
function TestClass(x) {
  this.x = x;
}
MyClass.prototype.show = function() {
  print(this.x);
}

// 上記のインスタンス生成 (コンストラクタ呼び出し)
var obj = new TestClass(5);
// メソッド呼び出し
obj.show();  // 5

showは直接のプロパティでないがメソッド呼び出しができる
-> 他のオブジェクト(prototypeオブジェクト)のプロパティを継承している

全ての関数オブジェクトはprototypeというプロパティを保持している

// 関数オブジェクトがprototypeプロパティを持っていることを調べる

var a = {}
typeof a;            // object
typeof a.prototype;  // undefined
Object.getOwnPropertyNames(a); // 出力なし

var a = function(){return 0;}
typeof a;           // function
typeof a.prototype; // object
Object.getOwnPropertyNames(a); // arguments,caller,length,name,prototype

Object.getOwnPropertyNames :オブジェクト自身が持っているプロパティの名前一覧

関数オブジェクトを定義した直後ではprototypeプロパティには
何もプロパティを持たないオブジェクトを参照している
開発者は別のオブジェクトを代入したり新しいプロパティを設定することが可能
そして関数オブジェクトをコンストラクタとして生成したオブジェクトは、コンストラクタのprototypeプロパティに代入されているオブジェクトに対して暗黙の参照を持っている

参考

コメントを書く

※ Emailは公開されません

※ コメントは承認されると下記に表示されます

コメント一覧

最近の投稿

社内ツールなどの超小規模なAPIをGolangで実装する際にフレームワークを使うべきかを、実際にnet/httpを使った実装とフレームワークを使った実装を比較することでどれだけ優位性があるかを見ていきたいと思います。今回はフレームワークにはシンプルで使いやすそうなEchoを使うことにします。

vue-pdfを使ってNuxt.jsで作成しているアプリケーションに pdfスライドを表示させるサンプルを作成しました README.md通りに実装してもうまくいかないところがあったのでそのあたり含めてまとめます

Vue.js / Nuxt.jsにおけるログインの実装方法をまとめる Auth0やNuxt.jsのAuth Moduleとmiddlewareについて調べつつサンプルを作成することで理解を深める

コンポーネント設計について考える Atomic DesignやPresentational Component, Container Componentについてまとめつつ 自分だったらVue.js / Nuxt.jsでどういうコンポーネント設計にするかについてまとめます

Netlify Formsを使ってブログサイトにコメント機能を追加する方法を調べたので紹介 Netlify FormsはNetlifyに標準機能として用意されているフォーム機能 サーバレスなので別途コメント用にサーバを用意する必要がなくHTMLを埋め込むだけで準備できる

カテゴリ一覧

タグ一覧