連想配列に関数リテラルを格納してオブジェクトを生成

Tweet

関数、メソッド、イベント、トリガーの違い

関数は用途や場所によって呼称が変わりますが、連想配列の中に変数の値が格納されるのと同じように、関数も無名関数として連想配列に格納され、同じようにキー（リテラル）で管理される場合はメソッドと呼ばれ、その配列自身を実体化（オブジェクト化）します。

配列リテラル

PHPの場合

PHPは変数に値を格納した時点で利用できるようになります。

arrayは関数のように使用しますが、実際には関数ではなくPHPの言語構造の1つであり、配列を初期化する機能を持ちます。

1.配列に直接値（リテラル）を入れていくと自動的にインデックス（番号キー）が振られる。
$name[]='あ';
$name[]='い';

print $name[0];  　//「あ」を表示
print $name[1];  　//「い」を表示

2.キーを数字（インデックス）にして値を入れる。
$name[0]='あ';
$name[1]='い';

print $name[0];  　//「あ」を表示
print $name[1];  　//「い」を表示

3.キーを文字列にして値を入れる。
$name['a']='あ';
$name['i']='い';

print $name['a'];  　//「あ」を表示
print $name['i'];  　//「い」を表示

4.PHPの言語構造（関数みたいなもの）であるarrayの引数として値を入れると自動的にインデックスが振られる。
$name=array('あ', 'い');

print $name[0];  　//「あ」を表示
print $name[1];  　//「い」を表示

5.arrayの引数に「キー＝＞値」のカンマ区切り形式で、キー指定で値を入れる。
$name=array('a'=>'あ', 'i'=>'い');

print $name['a'];  　//「あ」を表示
print $name['i'];  　//「い」を表示

JavaScriptの場合

JavaScriptでは変数は、varを使って明示的に定義する必要があります。

1.配列として定義した変数に直接値を入れていくと自動的にインデックスが振られる。
var name = [];
name[]='あ';
name[]='い';

document.write(name[0]); 　//「あ」を表示
document.write(name[1]); 　//「い」を表示

2.キーを数字（インデックス）にして値を入れる。
var name = [];
name[0]='あ';
name[1]='い';

document.write(name[0]); 　//「あ」を表示
document.write(name[1]); 　//「い」を表示

3.キーを文字列にして値を入れる。
var name = [];
name['a']='あ';
name['i']='い';

document.write(name['a']); 　//「あ」を表示
document.write(name['i']); 　//「い」を表示

4.arrayを使って値を入れると自動的にインデックスが振られる。
var name=array['あ', 'い'];

document.write(name[0]); 　//「あ」を表示
document.write(name[1]); 　//「い」を表示

5.arrayを使ってキー指定で値を入れる。
var name=array{'a':'あ', 'i':'い'};

document.write(name['a']); 　//「あ」を表示
document.write(name['i']); 　//「い」を表示

JavaScriptの場合、new演算子で空の配列オブジェクトを作成してから値を代入する方法もあります。

var name = new array();
name[0]='あ';
name[1]='い';

document.write(name[0]); 　//「あ」を表示
document.write(name[1]); 　//「い」を表示

関数リテラル

PHPとJavaScriptの関数の作り方はほぼ同じ書式です。

PHPの場合

<form action="" method="post">
    <input name="num" type="text" />
    <input name="send" type="submit" />
</form>

<?php 
if(isset($_POST['send'])){
    print sumNum($_POST["num"]);    //関数呼び出し

} 

function sumNum(n){ 
    $sum=0;
    for($i=0; $i<=$num; $i++){
        $sum += $i;
        return $sum;
    } 
} 
?>

JavaScriptの場合

<script>
var angka=prompt("Input number");
alert(sumNum(angka));    //関数呼び出し

function sumNum(n){
    var sum=0;
    for(var i=0; i<=n; i++){
        sum += i;
        return sum;
    }
}
</script>

このJavaScriptの関数は、関数リテラルを使って無名関数を値として変数に代入し、変数を呼び出すことで関数を実行できます。

<script>
var angka=prompt("Input number");
var result=sumNum(angka);    //関数リテラル呼び出し
alert(result);

//関数リテラル
var sumNum=function(n){
    var sum=0;
    for(var i=0; i<=n; i++){
        sum += i;
        return sum;
    }
}
</script>

連想配列に関数リテラルを格納しオブジェクト生成

以上までがウォーミングアップでここからが本題ですが、JavaScriptの連想配列には関数リテラル（無名関数）を格納することもできます。

まあ関数リテラルは値なので、当たり前と言われればそれまでなんですけど、大事なのは「連想配列を作る＝オブジェクトを作る」ということです。

<script>
//配列変数の定義
var name=new Array();

//リテラルを格納
name['a']='あ';
name['i']='い';
name['sumNum']=function(){
    var sum=0;
    for(var i=0; i&lt;=n; i++){
        sum += i;
        var result=sum+name['a']+name['i'];
        alert(result);
    } 
} 

//関数の呼び出し
name['sumNum']();
</script>

で、連想配列は以下のようにオブジェクトのプロパティまたはオブジェクトのメソッドっぽく書くこともでき、この場合は配列変数もオブジェクト変数に変えます。

<script>
//オブジェクト変数の定義
var name=new Object();

//プロパティに値を格納
name.a='あ';
name.i='い';
name.sumNum=function(){
    var sum=0;
    for(var i=0; i&lt;=n; i++){
        sum += i;
        var result=sum+name.a+name.i;
        alert(result);
    }
}

//関数の呼び出し
name.sumNum();
</script>

オブジェクト指向を意識しなくとも、JavaScriptは関数ベースで十分使えるわけですが、連想配列に関数リテラルを入れることこそJavaScriptのオブジェクト指向の真骨頂であり、配列とオブジェクトの関係は以下のように対応します。

関数リテラルは無名関数（関数名なし）であり、無名関数を変数に代入すると、変数名で関数を呼び出すことができます。

オブジェクトリテラル

配列がキーまたはインデックスで管理され、同じ型の値のみ格納するのに対し、オブジェクトは複数の異なる型の値をまとめてプロパティで管理するものであり、オブジェクトリテラルは「プロパティ名:値」の形式で並べて記述します。

//オブジェクトリテラルを定義
var p = {
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 20px;
}

//CSSはセレクタのオブジェクトリテラル
p {
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 20px;
}

JSON形式はオブジェクトリテラルと同じように、キーと値をコロン区切りで記述しますが、複数要素の終わりはセミコロン区切りではなくカンマ区切りになります。

//jQueryのJSON形式
$('.target').droppable({
	accept:'.box',
	hoverClass:'hover',
	tolerance: 'fit',
	drop:function(event,ui){
		//dropしたときにui.draggableが設定され、.boxをクローンとして自分の子要素としてくっつける
		ui.draggable.clone().appendTo(this);
		console.log('dropped');
	}
})

DOM構築後に実行するjQuery関数の中に、要素オブジェクトのメソッドを定義し、メソッドの動き方をキーにイベントを代入する、という動きをJSON形式で定義します。

//1. jQuery関数を定義
//$(document).ready(function($){
//$(document).ready(function(){
//jQuery(function($){
//jQuery(function(){
//$(function($){
$(function(){
	//2.1 #box要素（オブジェクト）をにメソッドを定義（ドラッグ可能にする）。
	$('#box').draggable();

	//2.2 メソッドにJSON形式でプロパティ（キー）と値（リテラル）を渡す
	$('#box').draggable ({
		 opacity:0.5
	});

	//3. メソッドにJSON形式でプロパティ（キー）と値（関数リテラル）を渡す
        //   イベントにはオブジェクトを引数で渡す（ドラッグ中に座標を表示する）
	$('#box').draggable ({
		 opacity:0.5,
		 drag: function(event, ui){
			  console.log(ui.position.left);
		 }
	});
});

PHPとJavaScriptのオブジェクト生成方法

PHPでメソッド（メンバ関数）を実行するには、クラスをnew演算子で実体化（オブジェクト作成）する必要がありますが、その際の引数をクラス内のメンバ変数にセット（初期化）するためにコンストラクタを使います。

class Person{
  //メンバ変数の定義
  private $name;

  //コンストラクタ関数でメンバ変数$nameを初期化（クラス外の引数をクラス内のメンバ変数にセット）
  function __construct($parm){
    $this->name = $parm;
  }
  //クラスの実行メソッド
  public function konnichiwa(){
    print('こんにちは'.$this->name);
  }
}



//クラスのオブジェクトの生成
$hito = new Person('yama');

//クラスのメソッドの実行
$hito->konnichiwa();

PHPではnew演算子でクラスを実体化しますが、JavaScriptにはクラスという概念はありませんので、コンストラクタ関数に引数を渡して、new演算子を使うことにより、プロパティやメソッドを装備したオブジェクトを生成することができます。

//コンストラクタ関数
Function Person(name){

    //変数に引数をセット
    this.name = name;

    //変数にメンバ関数をセット
    this.konnichiwa = function(){
        alert('こんにちは' + this.name);
    }
}

//コンストラクタ関数を元にnew演算子でオブジェクトを生成
var hito = new Person('yama');

//オブジェクトのメンバ関数の実行
hito.konnichiwa();

JavaScriptにはクラスという概念がないので、関数オブジェクトはメソッドではなくメンバ関数と呼ぶほうが適切かもしれません。