関数の宣言：JavaScript - モーリーのメモ

　JavaScriptのコードを見ていると、関数の定義の仕方がいくつかあって、区切り文字も『;（セミコロン）』だったり『,（カンマ）』だったりとします。
　JavasScriptを使い始めたばかりでその作法に慣れておらず、混乱したので調べました。

目次
関数の定義
オブジェクトリテラル
クラスの定義
- オブジェクトリテラルを使用した定義
- コンストラクタを使った定義
  - new演算子とプロトタイプチェーンを使用
  - コンストラクタの内部でメソッドを定義
あとがき
おすすめの記事

＊コード内のにある『cc.log();』は『Cocos2d-x』のデバッグ用の出力関数です。

関数の定義

関数式による定義

// 定義
var func = function(value1, value2){
    return value1 + value2;
}

//呼び出し
cc.log("%d", func(100, 23));

関数宣言による定義

// 定義
function func(value1, value2){
    return value1 + value2;
}

//呼び出し
cc.log("%d", func(100, 23));

ホスティング（関数の巻き上げ）

　関数宣言による定義では、定義の前に呼び出すことが可能です。
　関数式による定義では出来ません。

//呼び出し
cc.log("%d", func(100, 23));

// 定義
function func(value1, value2){
    return value1 + value2;
}

オブジェクトリテラル

　プロパティ名と値のペアを列挙したものです。
　プロパティ名をキー（key）と読んでいる場合もありました。

// 定義
var obj = {
    prop1:"value1",
    prop2:123,
    "prop3":"value3"
}

//呼び出し
    cc.log("%s", obj.prop1);
    cc.log("%d", obj.prop2);
    cc.log("%s", obj["prop3"]);  // キーが文字列の場合[ ]

クラスの定義

　JavaScriptにはクラスは存在しないので、実際にはクラス的なふるまいが出来るオブジェクトです。

オブジェクトリテラルを使用した定義

var class1 = {
    value1:100,
    value2:"value2",
    func1:function() {
        // メンバー変数の呼び出しと代入
       this.value1 += 23;
    },
    func2:function() {
        cc.log("%d, %s",this.value1, this.value2); 
    }
};

// 呼び出し
class1.func1();
class1.func2();

コンストラクタを使った定義

new演算子とプロトタイプチェーンを使用

// コンストラクタ
function class1() {
    this.value1 = 100;
    this.value2 = "value2";
};
// メソッド
class1.prototype.func1 = function() {
        	this.value1 += 23;
};
class1.prototype.func2 = function() {
    cc.log("%d, %s",this.value1, this.value2); 
};

// 呼び出し
var objClass1 = new class1();
objClass1.func1();
objClass1.func2();

コンストラクタの内部でメソッドを定義

　インスタンスが生成されるたびにメソッドが作られるので、効率が悪いそうです。
プロトタイプチェーンを使った定義の場合は、インスタンスが複数作られても、メソッドの実体は１つとのこと。

// コンストラクタ
function class1() {
    this.value1 = 100;
    this.value2 = "value2";
    // メソッド
    this.func1 = function() {
        this.value1 += 23;
    };
    class1.func2 = function() {
        cc.log("%d, %s",this.value1, this.value2); 
    };
};

// 呼び出し
var objClass1 = new class1();
objClass1.func1();
objClass1.func2();

　
以上です。

あとがき

　new演算子を使ったほうが、パフォーマンスがよくなるそうですが、インスタンスの扱いや継承といった使い方の理解が高くないと、挙動に困ることもあるようです。いろんなコードを参考にして、作法を覚えていこうと思います。

目次