2013
01
31
01
31
JavaScript: prototypeを理解する、ライブラリを作る
ここ最近で再利用しそうなスクリプトを2つ書いた。それをライブラリ化するときにprototypeというJavaScriptの特徴を使ったり使わなかったりしつつ書いたのでメモ。
MinifyJpeg.js
まず一つ目のMinifyJpegは、JPEG画像をExifをたもったまま縮小するための関数をメソッドとして揃えている。使い方としてはインスタンスを作成せず、メソッドを関数としてそのまま使って、返り値を得るようになっている。
var minified = MinifyJpeg.minify(image, length);
var encoded = MinifyJpeg.encode64(minified);
インスタンスを作る必要がないので、オブジェクトを作ってそこに必要な関数をそれぞれ入れていくカタチでライブラリにした。
PostPacker.js
二つ目は使用時にインスタンスを作る必要があって、最終的にprototypeを使って書くようにした。
var pack = new PostPacker(3.0, "/upload");
なぜprototypeを使うのか。prototypeを使わずに、関数をそのままメソッドとして置いてしまうのもありなはずだ。prototypeを使ったのはパフォーマンスをよりよくするため。
オブジェクトのインスタンスが作成されると、そのインスタンス内で、指定されたプロパティが見つからない場合にprototypeが参照されるようになる。prototypeを参照するということは、そのインスタンス自身の内にプロパティとしてそれを持っていないから、継承元にあるものをそのまま使うということになる。新たに作る必要がないからメモリの節約や処理の高速化につながる。
prototypeについてもう少し。あるコンストラクタ(関数)のprototypeになにかメソッドやプロパティを追加したとして、それをそのままメソッドやプロパティのように使用することはできない。そのコンストラクタのインスタンスでなければ、直接メソッドやプロパティのように使うことができない。どういうことか。
メソッドやプロパティを呼び出すコンストラクタが、オブジェクトのインスタンスでなければ、prototypeは参照されない。
参考: http://codezine.jp/article/detail/221
MinifyJpeg.js
まず一つ目のMinifyJpegは、JPEG画像をExifをたもったまま縮小するための関数をメソッドとして揃えている。使い方としてはインスタンスを作成せず、メソッドを関数としてそのまま使って、返り値を得るようになっている。
var minified = MinifyJpeg.minify(image, length);
var encoded = MinifyJpeg.encode64(minified);
インスタンスを作る必要がないので、オブジェクトを作ってそこに必要な関数をそれぞれ入れていくカタチでライブラリにした。
var funcs = {};
funcs.func1 = function(){return 1;}
funcs.func2 = function(str){return str;}
funcs.func3 = function(a1, a2){return a1 + a2;}
alert(funcs.func1());
alert(funcs.func2("mozi"));
alert(funcs.func3("mozi", " mozi"));
PostPacker.js
二つ目は使用時にインスタンスを作る必要があって、最終的にprototypeを使って書くようにした。
var pack = new PostPacker(3.0, "/upload");
なぜprototypeを使うのか。prototypeを使わずに、関数をそのままメソッドとして置いてしまうのもありなはずだ。prototypeを使ったのはパフォーマンスをよりよくするため。
オブジェクトのインスタンスが作成されると、そのインスタンス内で、指定されたプロパティが見つからない場合にprototypeが参照されるようになる。prototypeを参照するということは、そのインスタンス自身の内にプロパティとしてそれを持っていないから、継承元にあるものをそのまま使うということになる。新たに作る必要がないからメモリの節約や処理の高速化につながる。
var obj = (function(){
function C(str){this.str = str;}
C.prototype.func1 = function(){return this.str + "1";};
C.prototype.func2 = function(str){return this.str + str;};
C.prototype.func3 = function(a1, a2){return this.str + a1 + a2;};
return C;
})();
var inst = new obj("Oh,");
alert(inst.func1());
alert(inst.func2(" my God!"));
alert(inst.func3(" my God!", " Jesus!"));
prototypeについてもう少し。あるコンストラクタ(関数)のprototypeになにかメソッドやプロパティを追加したとして、それをそのままメソッドやプロパティのように使用することはできない。そのコンストラクタのインスタンスでなければ、直接メソッドやプロパティのように使うことができない。どういうことか。
function obj(){}
obj.prototype.num = 6;
alert(obj.num); // undefined
var newLib = new obj();
alert(newLib.num); // 6
alert(obj.prototype.num); // 6
メソッドやプロパティを呼び出すコンストラクタが、オブジェクトのインスタンスでなければ、prototypeは参照されない。
参考: http://codezine.jp/article/detail/221
スポンサーサイト