• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• rikuba2013/12/27 23:55:48

  満足150pt

  今のところはECMAScript5で標準化されたObject.create, Object.defineProperty, Object.definePropertiesを使ってください。
  なお、IE8以下ではこれらのメソッドは定義されておらず、getter, setterを定義する方法はありません（IE8はDOMオブジェクトに限り__defineGetter__, __defineSetter__によってgetter, setterを定義することができます）。

  function abc(arg1, arg2) {
      this.a = arg1;
      this.b = arg2;
  }
  
  Object.defineProperties(abc.prototype, {
      a: {
          get: function () {
              return this._a;
          },
          set: function (value) {
              this._a = value;
              this.c = calcab(value, this.b);
          },
          configurable: true,
          enumerable: true
      },
      b: {
          get: function () {
              return this._b;
          },
          set: function (value) {
              this._b = value;
              this.c = calcab(this.a, value);
          },
          configurable: true,
          enumerable: true
      }
  });
  
  function calcab(arg1, arg2) {
      return arg1 * arg2;
  }
  
  var fun = new abc(2, 3);
  alert([fun.a, fun.b, fun.c]); // "2,3,6"
  
  fun.a = 4;
  alert([fun.a, fun.b, fun.c]); // "4,3,12"
  

  cをgetterにしてみる。

  function Abc(a, b) {
      this.a = a;
      this.b = b;
  }
  
  Object.defineProperty(Abc.prototype, 'c', {
      get: function () {
          return this.a * this.b;
      },
      configurable: true,
      enumerable: true
  });
  
  var fun = new Abc(2, 3);
  alert([fun.a, fun.b, fun.c]);
  
  fun.a = 4;
  alert([fun.a, fun.b, fun.c]);
  

  スター

  • 

    3件のコメントを見る

  • kameoyaji_2 2013/12/28 11:13:36

    ほぼ、希望する動きは出来たのですが、追加で何点かご指導いただけないでしょうか？
    
    言語の特性で無理なのかもしれないのですが、
    
    下記の様に書き直した時
    
    var fun = new abc(2, 3);
    alert([fun.a, fun.b, fun.c]); // "2,3," cがundefindの為 ①
    
    fun.a = 4;
    alert([fun.a, fun.b, fun.c]); // "4,3," cがundefindの為 ①
    
    function abc(arg1, arg2) {
    this.a = arg1;
    this.b = arg2;
    }
    
    Object.defineProperties(abc.prototype, { // ②
    ＜途中省略＞
    });
    
    function calcab(arg1, arg2) {
    return arg1 * arg2;
    }
    
    var fun = new abc(2, 3);
    alert([fun.a, fun.b, fun.c]); // "2,3,6"
    
    fun.a = 4;
    alert([fun.a, fun.b, fun.c]); // "4,3,12"
    
    
    ①の場所にalertを追加した時に希望する動作をしないのです。
    ②のObject.definePropertiesを実行する前なので当たり前と言えば当たり前なのですが、
    function abc(…)の中で定義することは可能でしょうか？（注記１参照）
    (jvascriptの読み込む順番等が変わっても、期待する動作にさせたいもので)
    
    function calcab(arg1, arg2) をグローバル関数になっているのですが、これを
    クラス内の関数に定義することは可能でしょうか？
    
    abc.prototype = {
    
    calcab: function (arg1, arg2){
    var Result = 0;
    try {
    Result = parseInt(arg1) * parseInt(arg1);
    } catch (ex){
    throw "calcab invalid data";
    }
    return Result;
    }
    }
    （上記みたいな感じになるのかな・・などと考えています。）
    
    まだまだ、javascript初心者の為、javasciptの考え方が理解しておりません、
    ご指導いただければ有りがたいです。
    （javascript言語を勉強中の者です）
    
    注記１
    function abc(arg1, arg2) {
    Object.defineProperties(this.prototype, {
    ＜途中省略＞
    });
    this.a = arg1;
    this.b = arg2;
    }
    に改造してみたり（Uncaught TypeError. Object.defineProperties called on on-object で実行できませんでしたが）
    abc.prototype = {
    a: {
    get: function () {
    return this._a;
    },
    set: function (value) {
    this._a = value;
    this._c = this.calcab(value, this.b);
    },
    configurable: true,
    enumerable: true
    },
    ＜省略＞
    }
    としてみたりしては、いるのですが、思い通り作ることが出来ておりません。
    
    ブラウザ等は最新版以外は動作を考えていません。
    検証＆デバックはChrome DevTools を使用しております。

    スター

  • rikuba 2013/12/28 13:17:19

    「クラス定義とメインコードを明確に分離し、クラス定義→メインコードの順で実行されるようにする」とした方がいいと思います。

    <script src="abc.js"></script>
    <script>
    (function () { // 即時関数
        var fun = new abc(2, 3);
        // 省略
    })();
    </script>
    

    そうはいかない理由があるのであれば、コンストラクタ関数内ですべてのプロパティを定義してしまえば手っ取り早いです。グローバル変数として定義したくないcalcabも関数内に突っ込んでしまえばしまいです。
    ただし、abc関数が呼び出される度にdefinePropertyの処理であったりcalcab関数の実体化であったりが行われるため、何百・何千とインスタンスが作られるようなクラスでは避けた方が良いでしょう。
    また、コンストラクタ関数内がしっちゃかめっちゃかになってしまうのもいまいちだと思います。

    var fun = new abc(2, 3);
    alert([fun.a, fun.b, fun.c]); // "2,3,6"
    
    fun.a = 4;
    alert([fun.a, fun.b, fun.c]); // "4,3,12"
    
    function abc(arg1, arg2) {
        Object.defineProperties(this, {
            a: {
                get: function () {
                    return this._a;
                },
                set: function (value) {
                    this._a = value;
                    this.c = calcab(value, this.b);
                },
                configurable: true,
                enumerable: true
            },
            b: {
                get: function () {
                    return this._b;
                },
                set: function (value) {
                    this._b = value;
                    this.c = calcab(this.a, value);
                },
                configurable: true,
                enumerable: true
            }
        });
        
        function calcab(arg1, arg2) {
            return arg1 * arg2;
        }
        
        // コンストラクタとしての処理はここで
        this.a = arg1;
        this.b = arg2;
    }
    

    私は使った経験がないため解説できませんが、Require.jsなどの依存関係を解決するためのライブラリについて調べてみると解決できるかもしれません。

    スター

  • kameoyaji_2 2013/12/29 18:25:57

    ありがとうございます。
    思い通りの処理が実現できました。

    スター

その他の回答

• lang_and_engine2013/12/27 21:00:34

  満足50pt

  プロパティ定義は、new時にthisに対して行うのではなく、newよりも前の時点でprototype属性に対して行います。
  その時点でget/setキーワードを利用します。
  （これらのキーワードはブラウザ依存だし、javascriptらしいやり方ではなくC#のコードみたいに見えますし、それに使わなくてもクラスは作れるので、余りおすすめはしません。）
  new時には、（定義ではなく）実際の値の代入処理をしましょう。
  
  下記のサンプルコードが役立つと思いますが。
  http://hondou.homedns.org/pukiwiki/pukiwiki.php?Javascript%20get%2Fset%20%B1%E9%BB%BB%BB%D2

  スター

  • 

    1件のコメントを見る

  • lang_and_engine 2013/12/27 21:06:18

    こちらの最初のFooのサンプルみたいに、
    prototype内でクロージャの性質を使ってgetter/setterを作るほうが、JSらしいやり方です。
    これなら、firefox以外のどのブラウザでも動作が保証されます。
    
    http://d.hatena.ne.jp/kazu-yamamoto/20071101/1193884132

    スター

この質問へのコメント

質問の情報

登録日時

2013-12-27 18:46:33

終了日時

2013-12-29 18:27:09

回答条件

1人5回まで

この質問のカテゴリ

• ウェブ制作

この質問に含まれるキーワード

人気の質問

• 不満なことを周りに当たり散らして会社で浮いた存在になるのと、辛抱して鬱病になるのは、どちらがマシで…coccinellab211日前
• 【今年の漢字】(2023年)を予想してみてください。 ※遠慮なく気軽にどうぞ。(^_^; ※参考URL http://www.ka…rsc229時間前
• ビジネスで部下を指導されてる方や学校の先生、塾の先生などにご意見いただければ幸いです。 私はIT系の仕…匿名質問者1111日前
• エアコンの専用ブレーカがたまに落ちます エアコン本体の過電流による原因ではない気がします。 エアコン…coccinellab11日前
• iMacの作業中なぜか デスクトップにあるファイル（開いた外部ハードディスクのファイルも）が突然すべてが…iquestion111日前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ