とあるJavaScriptの情報図書【JavaScript】[ECMAScript] メソッド

トップページ
特集PC技術
とあるJavaScriptの情報図書
【JavaScript】[ECMAScript] メソッド

とあるJavaScriptの情報図書

【JavaScript】[ECMAScript] メソッド

今回はJavaScriptのオブジェクト指向のうちメソッドについて解説をします。
Javaなんかを知っている方には紛らわしい機能がありますので注意してください。

[1] メソッド

最初に解説しておきたいことがあります。
JavaScriptにおいてメソッドという機能は存在していません。
JavaScriptのメソッドはプロパティに関数を設定されたものをメソッドと呼んでいるわけです。
JavaScriptは柔軟な言語のためメソッドを定義する方法が様々ありややこしいです。
特に注意すべきなのは、メソッドからプロパティを参照するときです。
状況によってはあらぬ位置のデータを参照することもあります。書き方に注意します

[2] メソッドを使ってみよう

メソッドの一般的な使用方法は、以下のように定義したメソッドです。

// 人間クラスを定義
function Human(name){
	// 名前プロパティ
	this.name = name;
}

// プロトタイプメソッドを設定
Human.prototype = {
	introduce : function(){
		document.writeln("私の名前は" + this.name + "です。");
	},
	good_morning : function(){
		document.writeln("おはようございます");
	},
}

// インスタンスを生成
var hopsii = new Human("ほぷしぃ");
var pcsp = new Human("PC特集技術");

hopsii.introduce();
hopsii.good_morning();
pcsp.introduce();
pcsp.good_morning();

メソッドはオブジェクトリテラルで定義する

クラス名.prototype = {}の中に記述します。
prototype経由でメソッドを定義すると全てのインスタンスに反映されます。
prototypeに関しては複雑な機能なので別の機会で改めて説明をします。
共通のメソッドとして定義するためメモリの消費も抑えることができます。

メソッドを複数設定するときはカンマを使う

複数メソッドを定義するときはカンマ(,)で区切って指定します。
オブジェクトリテラルの設定なのでカンマを使います。

プロパティにアクセスするときはthisを必ず使う

メソッドからプロパティにアクセスするときはthisキーワードを使用してアクセスします。
thisキーワードを使用することで、インスタンス自身を示しています。
試しに上記の例でthisを消してみると、正しく値が表示されないことがわかります。

[2] プロトタイプメソッドで定義する

メソッドにも様々な方法があるので解説をしておきます。
設定方法により動作が異なるのでそこが面倒です。

// 人間クラスを定義
function Human(name){
	// 名前プロパティ
	this.name = name;
}

// ここでインスタンスを生成してもメソッドを使用できる
var hopsii = new Human("ほぷしぃ");

// プロトタイプメソッドを設定
Human.prototype.introduce = function(){
	document.writeln("私の名前は" + this.name + "です。");
};

// プロトタイプメソッドを設定
Human.prototype.good_morning = function(){
	document.writeln("おはようございます");
};

var pcsp = new Human("PC特集技術");

hopsii.introduce();
hopsii.good_morning();
pcsp.introduce();
pcsp.good_morning();

クラス名.prototype.メソッド名で定義をします。
この方法で定義した場合は、インスタンスを生成した後でも有効になるということです。
一般的な定義方法で、インスタンス生成している位置を変えてみるとわかります。
この方法も一般的な定義法と同じで、全てのインスタンスに反映されています。
ただ、同じような記述を何度もしないといけませんし、自由なタイミングで記述できるため管理が大変です。

[3] コンストラクタにメソッドで定義する

次に紹介する方法は、Javaの記述に似た方法になります。
プロパティに関数を定義すればメソッドになるので、コンストラクタ内に記述しても問題はないです。

// 人間クラスを定義
function Human(name){
	// 名前プロパティ
	this.name = name;
	// 自己紹介メソッド
	this.introduce = function(){
		document.writeln("私の名前は" + this.name + "です。");
	};
	// 挨拶メソッド
	this.good_morning = function(){
		document.writeln("おはようございます");
	};
}

var hopsii = new Human("ほぷしぃ");
var pcsp = new Human("PC特集技術");

hopsii.introduce();
hopsii.good_morning();
pcsp.introduce();
pcsp.good_morning();

このメソッド定義方法がJavaのクラスベースに近い記述方法ではないかと思います。
ただ、この方法だと１つだけ問題があります。
それはインスタンスを生成するたびに、メソッドのためにメモリの消費が多くなるという欠点です。
それに、メソッドは基本的に手続きなのでどのインスタンスでも同じはずです。
このようなところでメモリを無駄に使う必要はありません。

[4] インスタンス生成後にメソッドを定義する

メソッドはインスタンス生成後に追加することもできます。

// 人間クラスを定義
function Human(name){
	// 名前プロパティ
	this.name = name;
}

var hopsii = new Human("ほぷしぃ");
var pcsp = new Human("PC特集技術");

hopsii.introduce = function(){
	document.writeln("私の名前は" + this.name + "です。");
};

hopsii.good_morning = function(){
	document.writeln("おはようございます");
};

// このインスタンスでは実行できる
hopsii.introduce();
hopsii.good_morning();

// このインスタンスはエラーになる
pcsp.introduce();
pcsp.good_morning();

インスタンス生成後に追加した場合は、インスタンスごとに追加をしなくてはいけません。
pcspインスタンスのメソッドを実行したときはエラーになります。
こちらもインスタンスごとにメソッドを持つためメモリの消費が多くなります。

[5] クラスメソッド(静的メソッド)

クラスメソッドはクラス自身が持つメソッドのことです。

// 人間クラスを定義
function Human(name){
	// 名前プロパティ
	this.name = name;
}

Human.good_morning = function(){
	document.writeln("おはようございます");
}

var hopsii = new Human("ほぷしぃ");
hopsii.good_morning();

共通で使えるならクラスメソッドを使えば問題がなさそうですが
クラスメソッドから直接インスタンスプロパティを参照できません。
また、インスタンス自身が実行できませんので注意しましょう。