社内の精鋭エンジニアを中心に定期的に勉強会をすることになった。んで、 JavaScript の講義は僕がやることになった。

資料を社内だけでとどめておくのはもったいないので、ここに公開していきます。社内の人も社外の人も読んでください。

講義の内容は基本的にソース嫁。ソースレビュー形式。

※ターゲットは JavaScript は書いたことない、オブジェクト指向言語プログラマ。





Section 00 Prototype.js の前に JavaScript のオブジェクトの概要・・・

オブジェクトを作ってみる。

var object = {};

オブジェクトにメソッドとかプロパティを追加してみる。

var object = { field: 'IT戦士', method: function() { alert('hello ' + this.field); } }; object.method();

後で関数を付けたりできる。関数内の this は実行時に決まる。

var object = { field: 'IT戦士' }; function func() { alert('hello ' + this.field); } object.method = func; object.method();

呼び出すときに直接 this を与えることも出来る。

function func() { alert('hello ' + this.field); } var object = { field: 'IT戦士' }; func.apply(object); // func.call(object);

同じ形式のオブジェクトを大量生産したい場合がある。以下のようにする。

関数の prototype プロパティに大量生産したいオブジェクトを入れる。new を付けて関数を呼び出してオブジェクトのコピーを大量生産する。

function factory() {} factory.prototype = { field: 'IT戦士', method: function() { alert('hello ' + this.field); } }; var object00 = new factory(); var object01 = new factory(); var object02 = new factory();

new を付けて呼び出すとコピーされたオブジェクトが this となって関数が呼ばれる。すなわち、初期化を行うことが出来る。

function factory() { this.field = 'IT戦士'; } factory.prototype = { method: function() { alert('hello ' + this.field); } }; var object00 = new factory(); var object01 = new factory(); var object02 = new factory();

ちなみに下の二つの関数宣言はほとんど同じ意味。(ちょっと違うけど)

function factory() {}

var factory = function() {};

これを踏まえて、さっそく Secsion 01 でクラスを作ります。



