読者です 読者をやめる 読者になる 読者になる

モーリーのメモ

プログラミングやCG作成等、アプリ開発を中心に情報を収集中!

関数の宣言:JavaScript

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

関数の定義

関数式による定義

// 定義
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();
コンストラクタの内部でメソッドを定義

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

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

広告を非表示にする