Kanasan.JS JavaScript第5版読書会#4についてまとめ

タイトル

タイトルはホッテントリメーカーに考えてもらったんだけど、ものすごい普通のタイトルが出来上がってびっくりした。まあ普通でいい。

そしてホッテントリにはならないし、ならなくていい。

読書会

今回身に付いたのは9章、クラスの部分。

その前に、まずは prototype チェーンについて guccyon さんのブログでおさらい。
__proto__とprototypeについて - guccyonikki

僕にわかる範囲でまとめると、オブジェクトのプロパティが参照されると、

1. まず自分のプロパティを探す
2. 次に自分の prototype から探す
3. 次からは __proto__ を辿って、継承している prototype から探す

オッケー。ここで僕は考えた。
それなら、最初に読まれる自分のプロパティで完結する場合が一番早いんじゃないか。

ここでの事の本質は早さじゃないとは思うけど、それでもそう考えた。あまりにも短絡的すぎるけど、考えたったら考えた。

でも実際にはむしろ自分のプロパティを参照する方がパフォーマンスが悪くなる場合もあるようだ。

なんでかなー。

function Rectangle(w, h) {
   this.w = w;
   this.h = h;
   this.area = function(){return this.w * this.h;}
}

• (上記のような記述だと、)生成されたすべてのオブジェクトが3つのプロパティを持ってしまう(p.153)
• プロトタイプオブジェクトを使用すると、たくさんのオブジェクトがプロパティを継承し共有できる(p.154)
• あるクラスに10個のオブジェクトがあるとすれば、それぞれのオブジェクトごとにインスタンスプロパティが1個ずつ存在し、全部で10個(p.159)

ってことだからだだね。

試しに以下のクラスを準備して、ベンチマーク取ってみた。

Test1: 自分のプロパティ(インスタンスプロパティ)にメソッドを入れたもの。

function Test1 (){
    this.hoge = 1;
    this.fuga = 2;
    this.count10000	= function(){var i=0;while(i<	10000	){i++;}return i;}
}

Test2: 自分のプロパティにメソッド101個を入れたもの。

function Test1 (){
    this.hoge = 1;
    this.fuga = 2;
    this.count10000	= function(){var i=0;while(i<	10000	){i++;}return i;}
    …
    this.count10100	= function(){var i=0;while(i<	10100	){i++;}return i;}
}

Test3: prototypeプロパティにメソッドを入れたもの。(インスタンスメソッド)

function Test3 (){
    this.hoge = 1;
    this.fuga = 2;
}

Test3.prototype.count10000	= function(){var i=0;while(i<	10000	){i++;}return i;}

Test4: prototypeプロパティにメソッド101個を入れたもの。

function Test4 (){
    this.hoge = 1;
    this.fuga = 2;
}

Test4.prototype.count10000	= function(){var i=0;while(i<	10000	){i++;}return i;}
…
Test4.prototype.count10100	= function(){var i=0;while(i<	10100	){i++;}return i;}

Test5: クラスメソッドを101個持つもの（おまけ）。

function Test5 (){
    this.hoge = 1;
    this.fuga = 2;
}

Test5.count10000	= function(){var i=0;while(i<	10000	){i++;}return i;}
…
Test5.count10100	= function(){var i=0;while(i<	10100	){i++;}return i;}

それぞれのクラスを100個ずつインスタンス化し、count10000メソッドを実行させた。
（ただし、Test5 はインスタンス化しただけ）
実行結果

preparing ...
let's go!
.
*** Test1 ***
result : 538.986725[ms]
.
*** Test2 ***
result : 822.986725[ms]
.
*** Test3 ***
result : 536.986725[ms]
.
*** Test4 ***
result : 535.986725[ms]
.
*** Test5 ***
result : 537.986725[ms]
.
finish!

Test2 以外はそれほど変わらない。
Test2 はインスタンス化の時に101個メソッドを持つインスタンスプロパティがコピーされるので、遅い。 だからまあ、プロパティの参照時の早さどうこうじゃないけど。作法として間違ってる。

僕は java を知らない子供たちなので、インスタンスメソッドとかクラスメソッドとか言われてもよくわかんなかったけど、this とか必要ないメソッドはクラスメソッドにしたらいいんだと思う。

ようやく javascript のクラスがわかってきたかなー。

JSON Editor を紹介

今回、幸いにも LT の時間をいただけたので、拙作(一人で作ったわけじゃないけど)の JSON Editorを紹介して来た。

LT はぐずぐずだったけど、JSON Editor自体は結構好評でよかった。

ujihisa さんが発表10分後にブログで紹介してくれたり
rubyneko - ブラウザ上で動作するJSON Editorがすばらしい、
kanasan さんが30分以内にいきなり拡張スクリプトを書いてくれたり、正直ちょっとチビりそうだった。

懇親会

初めて懇親会に参加したので、渾身の力を振り絞って懇親会に来た全員に「こんにちは」って言って来た。

懇親会に来た全員の顔と名前も覚えた。覚えてどうすんだっていう話だけど、「あの人がんばってんなー、チクショウ！」なんて思いながら僕もがんばろうと思う。

がんばるっていうか、まあ日々楽しくやっていきたい。

というわけで、主催の kanasan さん, ujihisa さん、運営に携わってるみなさん、ありがとうございました。
みなさんお疲れさまでした。