はじめに
今回は、Javascriptの"超基本"
静的プロパティと静的メソッド について記録します。
過去に2点ブジェクトについて、記事を投稿しました。
・(Javascript) オブジェクト指向 と オブジェクト&配列 の違い
・(Javascript) インスタンス化 と コンストラクター
オブジェクトを使うには
オブジェクトは、元々から "自分自身の中でデータを保持できる" ことから、バッティング(エラー) を防ぐために new演算子 を用いて インスタンス化 させる必要がありました。
しかし、例外的にインスタンス化 をせず利用できるものがあります。
インスタント化の例外 静的プロパティ・メソッド
例外的にインスタンス化しなくても良いメソッド・プロパティを 静的メソッド・プロパティ または クラスメソッド・プロパティ と言います。
静的メソッド・プロパティの呼び出し方
インスタンス化の構文とは異なり 変数名 がありません
オブジェクト名.プロパティ名 [=設定値]
オブジェクト名.メソッド名([引数[,‥]])
インスタンス化の構文
変数名.オブジェクト名.プロパティ名 [=設定値]
変数名.オブジェクト名.メソッド名([引数[,‥]])
静的メソッド・プロパティ は、インスタンス変数から呼び出そうとするとエラーになります。
また、静的メソッド・プロパティ を経由して呼び出す プロパティ・メソッド を インスタンスメソッド。プロパティ と言います。
静的プロパティ・メソッドのソースコード
//(1)コンストラクター
let Area = function() {};
//(2)静的プロパティの定義
Area.version = '1.0';
//(3)静的メソッド四角形の定義
Area.rectangle = function(length, width) {
return length * width;
};
//(5)静的メソッドで三角形を定義
Area.triangle = function(base, height) {
return base * height / 2;
};
// (4)静的メソッド四角形のconsole.log
console.log('Areaクラスのバージョン:' + Area.version);
console.log('四角形の面積:' + Area.rectangle(5,3))
// (6)静的メソッド三角形のconsole.log
let a = new Area();
console.log('三角形の面積:'+ a.triangle(5,7));
ソースコードの説明
(1)コンストラクター
→関数にコンストラクター(オブジェクト)を直接呼び出す
functionコンストラクター
(2)静的プロパティの定義
→(1)で呼び出されたオブジェクトにプロパティ(version)をセットして値(1.0)を代入
(3)静的メソッド四角形の定義
→オブジェクト・プロパティに静的メソッド(triangle)の式を定義
(4)静的メソッド四角形のconsole.log
→console.log を用いて、オブジェクトとプロパティ(Area.version)の値を受け取る
→console.log を用いて、三角形の面積(Area.triangle(5,3))の値を受け取る
(5)静的メソッドで三角形を定義
→オブジェクト・プロパティに静的メソッド(rectangle)の式を定義
(6)静的メソッド三角形のconsole.log
→インスタンス経由で静的メソッド(triangle)を呼び出す
実行結果
(6)インスタンス経由で呼び出した console.log はエラーが起きてます。
triangleは静的コンストラクターで、あくまでも Area関数オブジェクトに動的に追加されているだけです。
なのでAreaが生成するインスタンスに追加されません。
Areaクラスのバージョン:1.0
四角形の面積:15
Uncaught TypeError: a.triangle is not a function ←エラー
静的プロパティ・メソッドを定義する時の注意
(1)プロトタイプオブジェクトには登録できない
(2)静的メソッドは読み取り専門
(3)静的メソッドの中では、thisキーワードを使えない
静的(クラス)プロパティ・メソッドを使う理由
静的(クラス)プロパティ・メソッド は グローバル関数・関数 と変わりません。
しかし、この2つは 複数個作成すると、名前がバッティングしてしまう危険性があります。(予約語)
これを防ぐために名前を意識しないといけません。
この状態は、好ましいことでないので
ここで、静的(クラス)プロパティ・メソッド を使用します。
あとがき
以上が、静的プロパティと静的メソッド でした。
いかがでしたか？
役に立っていれば嬉しいです。
では!
Myリンク
また、Twitter・Portfolio のリンクがありますので、気になった方は
ぜひ繋がってください。プログラミング学習を共有できるフレンドが出来るととても嬉しいです。