R-SQUARE.net

研究開発部

JavaScript でクラスを作ってみる

JavaScript のクラスの作り方はJavaとかとは勝手が違う。

サンプルソース

JavaScript クラス定義
/* classsample.js */

/* constoructor */
var CLASS_NAME = function () {
  /* fields */
  var _f1 = "";
  var _f2 = "";
  
  /* getter/setter */
  this.getF1 = function () {return _f1;};
  this.setF1 = function (arg) {_f1=arg;};
  this.getF2 = function () {return _f2;};
  this.setF2 = function (arg) {_f2=arg;};
};

/* method */
CLASS_NAME.prototype.m1 =function () {return this.getF1();};
CLASS_NAME.prototype.m2 =function () {return this.getF2();};
CLASS_NAME.prototype.m3 =function () {return (this.getF1() + ", " + this.getF2());};
      


JavaScript クラス実行用html
<div id="main">
<p id="sample_result">ここに実行結果出力</p>
<button id="sample_btn">実行</button>
<script src="./js/jsclass.js"></script>
</div>      


JavaScript クラス実行
/* jsclass.js */
$('#sample_btn').click(function(){
  $.getScript('./js/classsample.js',function(data, textStatus, jqXHR){
    var cn = new CLASS_NAME();          /* コンストラクタでインスタンス作成 */
    cn.setF1('hoge');                   /* フィールドに値をセット */
    cn.setF2('moga');                   /* フィールドに値をセット */
    $('#sample_result').html(cn.m3());  /* メソッド実行 & 結果をhtml出力 */
  });
});
      


動作例



まとめ

  • とりあえずこういうもんだと覚えておこう


参考文献

「JavaScript 第6版」 David Flanagan (著), 村上 列 (翻訳) オライリージャパン (2012/08/15 初版 第1刷) 
「JavaScriptリファレンス 第6版」 David Flanagan (著), 木下 哲也 (翻訳) オライリージャパン (2012/08/15 初版 第1刷) 
「JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで」山田 祥寛 技術評論社 (2011/04/01 初版 第2刷)
last modified : 2017-07-11T22:22:26+09:00