こんにちは。
\n最近、オライリー・ジャパンの
\n「JavaScript パターン――優れたアプリケーションのための作法」という本を読んでいます。
この本は、JavaScript でのコーディングパターンや、 Javascript に限らず広義の意味での「パターン」を取り扱っている書籍です。
\nこの本の中に、クラシカルな継承パターンというものがあります。
\nクラシカルな継承パターンとは、ざっくり言うと
\n\nJavaScript にクラスの概念は無いけれど、
\n
\n長年クラスベースの言語を触ってきた人たちが js を触るときに馴染みやすいように、
\nクラスや継承のような機能を提供するパターン
だと僕は解釈しました。
\nこのクラシカルな継承パターンを読んで、
\nCoffeeScript や TypeScript での class 記法や継承パターンは、js に変換するとどう表現されるのか
\nが気になったため、調査してみました。
当記事の目標は、
\nJavaScript における「クラス」の概念と継承のパターンが分かるようになる
\nことです。
当記事では、CoffeeScript や TypeScript については、あまり深く触れませんのであらかじめご了承下さい。
\n当記事を読んでいる方ならご存知かと思いますが、
\nJavaScript はプロトタイプベースのオブジェクト指向言語であり、
\nクラスや継承という概念はありません。
ここが js の癖となる点の１つだと思います。
\nしかし、クラスや継承といった技法が実現不可能なわけではなく、
\nプロトタイプを上手く用いることでクラスのようなオブジェクトを作るも、それらの継承も可能です。
ただし、繰り返しになりますが
\n言語の概念として、クラスや継承が存在していないので、
\nあくまでそれらに似た振る舞いを再現できる、というだけです。
JavaScript パターンから引用すると、
\n「クラシカルな継承のパターン」の模範解答は、以下のようになります。
// 継承を行う関数\nvar inherit = (function() {\n var F = function() {}\n return function(C, P) {\n F.prototype = P.prototype\n C.prototype = new F()\n C.uber = P.prototype\n C.prototype.constructor = C\n }\n})()\n// Personクラス(のようなオブジェクト(以下省略))\nfunction Parent() {}\nParent.prototype.say = function() {\n return this.name\n}\n// Childクラス\nfunction Child(name) {\n this.name = name\n // 親のコンストラクタを拝借する\n Parent.apply(this)\n}\n// 継承\ninherit(Child, Parent)\n// インスタンスを作成\nvar kid = new Child('Bob')\nconsole.log(kid.say()) // 'Bob'上記のように、
\nChild クラスは、say メソッドを持っていませんが、
\nChild クラスのインスタンスであるkidは、say メソッドを Parent クラスのプロトタイプから利用できます。
明示的にクラスです！ と宣言する文法がないため、文法は他の言語と大きく異なりますが、
\nこれでおおよそクラスと継承の機構が再現出来ていると思います。
クロージャを利用すれば、プライベートメンバー・メソッドが定義可能です。
\nそれはさておき、ここで重要なのが、継承のための関数inherit()です。
var inherit = (function() {\n var F = function() {}\n // CとPのプロキシとなる関数F\n return function(C, P) {\n F.prototype = P.prototype\n // Fのプロトタイプオブジェクトを親と共有する\n C.prototype = new F()\n // 子のプロトタイプオブジェクトは、Fのインスタンスを設定\n C.uber = P.prototype\n // スーパークラス(uberという名前にする)には親のプロトタイプを設定\n C.prototype.constructor = C\n // コンストラクタのポインタを再設定する\n }\n})()この inherit()は、
\nために、子と親をつなぐプロキシとなる関数 F()を作成します
\nこの関数 F を利用することで、プロトタイプの共有を切りつつも、親のメンバーを共有することが可能になります。
※当記事は js でのコーディングパターンが主旨なので、
\njs のプロトタイプチェインについて詳しくは触れません。
\nプロトタイプ連鎖については、以下の記事が参考になるかと思います。
お待たせしました。
\n長い前置きを終えて、本題です。
CoffeeScript や Typescript などの言語では、
\nこれらのややこしくて面倒なことを気にせずに、
\nclass~extends という文だけで js でクラス(のようなオブジェクト)を使用出来ます。
CoffeeScript でクラスと継承を用いた例が、以下となります。
\n(CoffeeScript.org のClassesの説明から持ってきて一部改変)
class Parent\n constructor: (@name) ->\n move: (meters) ->\n console.log @name + \" moved #{meters}m.\"\n\nclass Child extends Parent\n move: ->\n console.log \"slithering…\"\n super 5\n\nchild = new Child()\nchild.move()ものすごくシンプルです。
\nだってclassとかextendsって文法が使えるんですもん。
たったこれだけで、クラスの定義と継承ができます。
\n次は、TypeScript での例を見てみます。
\n比較しやすいように、CoffeeScript の例と同じものを TypeScript で書き直しました。
\n※TypeScript はまだ初心者なので、書き違いがあったらすみません。
TypeScript でのクラスの定義と継承の例は以下となります。
\nclass Parent {\n name: string\n constructor(name: string) {\n this.name = name\n }\n move(meters: number): void {\n console.log(this.name + ' moved ' + meters + 'm.')\n }\n}\nclass Child extends Parent {\n move(): void {\n console.log('slithering… ')\n super.move(5)\n }\n}\nvar child: Child = new Child()\nchild.move()ややコード量が増えていますが、とても見やすいです。
\nTypeScript でも、classとextendsを使用できます。
CoffeeScript や TypeScirpt では、prototype だの継承だのといったややこしい処理は、
\njs にコンパイルする際に、特定の表現と、継承するための汎用関数を吐き出して、それを利用しています。
次に、この特定の表現と汎用関数がどう実装されているのかを見ていきます。
まずは CoffeeScript バージョンを見ていきます。
\nvar __hasProp = {}.hasOwnProperty,\n __extends = function(child, parent) {\n for (var key in parent) {\n if (__hasProp.call(parent, key)) child[key] = parent[key]\n }\n\n function ctor() {\n this.constructor = child\n }\n ctor.prototype = parent.prototype\n child.prototype = new ctor()\n child.__super__ = parent.prototype\n return child\n }__hasPropは、安全で確実にObject.hasOwnProperty()を呼ぶためのショートカットです。
\n肝心の継承する関数が、__extends(child, parent)です。
JavaScript パターンの聖杯バージョンに出てきた
\ninherit(Child, Parent)と、順序は違うけれど似ていますね。
inherit()と異なる点は、for 文を用いて親のメンバーを子にコピーしている箇所です。
\n実はこのパターンも、JavaScript パターンで出てきます。
\n「プロパティのコピーによる継承」と題されており、
\nプロパティのコピーする関数extend()を実装しています。
書籍のコード少し改造した例が以下となります。
\nfunction extend(parent, child) {\n var hasProp = {}.hasOwnProperty,\n p\n child = child || {}\n for (p in parent) {\n if (hasProp.call(parent, p)) {\n child[i] = parent[i]\n }\n }\n return child\n}もうお分かりかと思いますが、Coffee 版に出てくる for 文と同じです。
\nこのextend()と、inherit()を合体させた関数が、
\nCoffeeScript における継承用の関数__extendsとなっています。
では、次に TypeScript バージョンを見てみます。
\nvar __extends =\n this.__extends ||\n function(d, b) {\n function __() {\n this.constructor = d\n }\n __.prototype = b.prototype\n d.prototype = new __()\n }TypeScript の方はややシンプルです。
\nですが、やっていることはほぼ変わりません。
そしてさりげなく、__extends という関数が未定義の時のみ独自定義するといった気配りが入っています。
\nTypeScript で継承する関数__extends()では、
\nJavaScript パターンでのinherit()を少し簡略化したものとなっています。
また、クラスの定義や、super(親クラスへの参照)の表現も調査してみました。
\nCoffeeScript も TypeScript もほぼ同様の表現になっています。
下記は CoffeeScript の先程の例のクラス部分を js にコンパイルしたコードです。
\nvar Parent = (function() {\n function Parent(name) {\n this.name = name\n }\n Parent.prototype.move = function(meters) {\n console.log(this.name + ' moved ' + meters + 'm.')\n }\n return Parent\n})()\nvar Child = (function(_super) {\n __extends(Child, _super)\n\n function Child() {\n _super.apply(this, arguments)\n }\n Child.prototype.move = function() {\n console.log('slithering… ')\n _super.prototype.move.call(this, 5)\n }\n return Child\n})(Parent)まず、var クラス名 = (function() {})();とクラスの定義を即時関数に包み、
\nその中でfunction クラス名()と関数を再定義しています。
\nこれにより、今後コンストラクタ関数(クラス名)を呼び出す際には、内側の関数が呼び出されます。
継承する子クラスでは、即時関数の引数に_superを取っています。
\nこの_super は、親クラスのコンストラクタ関数を指しています。
\nこの親コンストラクタ関数を、継承する関数extends を通じて、 子クラスのsuper__オブジェクトに設定しています。
そして、superオブジェクトを経由して、
\n子クラスから親クラスのプロトタイプ上に存在するプロパティを利用します。
この書き方は TypeScript でもほぼ同様の表現になっており、
\n程度の違いがありますが、同様のパターンとみなすことができます。
\njs で、継承するためには、
\nctor()、TypeScript では__())を定義の３ステップが最低限必要となります。 ここに、上乗せとして
\nなどが乗っかって来るようです。
\nまた、クラスの表現方法は、
\nCoffeeScript、TypeScript 共にほぼ同じなので、 上記のような書き方をしておくのがベターだと思います。
なお、今回は
\nクラスのようなオブジェクトと継承の表現について書きましたが、
JavaScript には prototype を用いた柔軟な継承の表現が他にもあります。
\n今回の例はあくまでjs で”クラス”っぽいことがやりたい人向けの内容であることをご留意下さい。