オブジェクト指向プログラムの代名詞はclassとインスタンスにつきますが、javascriptでもclassはないのですが、インスタンスを作成して、便利に扱えることを理解しましょう。
無名関数とインスタンスの関係
そもそも、PHPでもver5.3から正式に採用された無名関数（クロージャー）は、そもそもJavaScriptの特権のような書き方だったのですが、ここ最近の言語の傾向としては、無名関数からのオブジェクト指向などは、無理やり言語内などに取り込んでいるように思えます。
まあ、javascriptとPHPの両方を使って、サイトやAPIなどを作っている側としては、同じような機能を設けてくれることは非常にありがたいので、是非使いたいと思う。
ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<title>javascript [dataset]</title>
<script type="text/javascript" src="common.js"></script>
</head>
<body>
<h1>JavaScript - Instans</h1>
<script>
function func(num){
this.in1 = num+10;
this.in2 = num+20;
this.in3 = function(num){
this.in1 += num
return this.in1;
};
}
var func_instans1 = new func(1);
var func_instans2 = new func(2);
console.log(func_instans1.in1+"/"+func_instans1.in2);
console.log(func_instans2.in1+"/"+func_instans2.in2);
console.log(func_instans1.in3(3)+"/"+func_instans1.in3(3));
console.log(func_instans2.in3(3)+"/"+func_instans2.in3(3));
</script>
</body>
</html>
解説
何かのhtmlファイルに記述して、consoleを見ながら結果を確認するのが簡単なので、その方法で説明します。
はじめに
冒頭のfunctionはclassは多言語で言うところのだと思ってください。
インスタンスは関数の中で使用している変数をnewするとリセットすると考えると分かりやすいです。
無名関数でなく、名前のある関数は、中で使用している変数は、メモりバッファに残り続けます。
JavaScriptでは、引数に無名関数を書いてクロージャーとしてインスタンス化する方法もありますが、すでに書かれている関数をnewする方が簡単な場合があるので、どちらがいいかというよりは、どちらでも対応できるようにしておくと、非常に柔軟な開発ができます。
function部分
今回の関数は、in1とin2という変数に固定値を入れていますが、in3を内部関数でin1を上書きする仕様にしてます。
num引数に値を渡すと、in1とin2の変数が変動するようにしています。
new宣言
num引数に渡す値を変えた２つのインスタンスを作成してます。
console部分（結果）
1番目と2番目は単純にインスタンスが個別に引数を引き継いでいることがわかると思います。
3番目と4番目は、さらに各々のin1を上書きして、各々のバッファを理解できると思います。
だからどうした？
今まで、クロージャーというのが、あまり理解できなかったんですが、ここ数年無名関数を書いていて感じたことや、PHPの無名関数で発生した障害を経験して、さらにjavascriptでのprototypeをより理解してみたところ、クロージャーが非常によく理解できるようになりました。
この記事を見てもクロージャーが理解できない人は、正直言って、あまり今回のような事は想定しない方が懸命です。
なぜなら、こういった書き方をする場合に、他の人が分かりにくいプログラムになりがちだからです。
確かにどういった時に使うのかと言うと、僕のよく使う場面としては、ajaxのような非同期の時に、いちいちreturn判定を行って、それぞれグローバル変数に格納していくよりは、クロージャーで個別にメモり管理をさせた方がはるかに効率的なので、主に非同期が多いです。
Node.jsを使う場合は、この手の処理のオンパレードになるでしょうね。
まずは、こういった構文を実践でもいいので、いくつか書いてみることをオススメします。
0 件のコメント:
コメントを投稿