🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

398閲覧

「Object.definePropertyメソッドによるアクセサーメソッドの実装」の処理順序と過程について

wikwik129

総合スコア19

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/11/22 23:32

###処理の過程が分かりません

以下2つのコードはアクセサーメソッドを使った例と1つ目の例にObject.definePropertyを使用してシンプルにしたものです。
1つ目のコードのアクセサーメソッドの場合、セッターメソッドに値を渡して_baseをゲッターメソッドで呼び出すというとても分かりやすいものでした。(上から下へ処理をするという意味で)

しかし2つ目のコードでt.baseに値を渡すまではいいのですが、ゲッターが先でセッターが後のように記載しており、1つ目のコードの後なので値はセッターメソッドからゲッターメソッドに渡されるという仕組みは理解できますがどのような処理がどの順序で行こなわれているのか分かりません。

######私の考えとしては2つ
・アクセサーメソッドはそもそもセッター→ゲッターという順序の決まり?がある?
・ゲッターで空の_baseが用意され、セッターの_base = baseによってゲッター内の_baseにも値が反映されてる?

  の2点でございます。ご回答の程よろしくお願い致します。

1つ目のコード

javascript

1'use strict'; 2{ 3 function Triangle() { 4 //プライベートプロパティ 5 var _base; 6 var _height; 7 //プライベートメソッド 8 var _checkArgs = function(val) { 9 return (typeof val === 'number' && val > 0); 10 } 11 12 //プライベートメンバーにアクセスするためのメソッド 13 this.setBase = function(base) { 14 if(_checkArgs(base)) { _base = base; } 15 } 16 this.getBase = function() { return _base; } 17 18 this.setHeight = function(height) { 19 if(_checkArgs(height)) { _height = height; } 20 } 21 this.getHeight = function() { return _height; } 22 } 23 //三角形の面積を求めるメソッド 24 Triangle.prototype.getArea = function() { 25 return this.getBase() * this.getHeight() / 2; 26 } 27 var t = new Triangle(); 28 29 t.setBase(10); 30 t.setHeight(2); 31 console.log(t.getBase()); // 10 32 console.log(t.getHeight()); // 2 33 console.log(t.getArea()); // 10 * 2 / 2 = 出力 10 34}

2つ目のコード 以下Object.definePropertyを使用してシンプルにしたものです。

JavaScript

1'use strict'; 2{ 3 function Triangle() { 4 var _base; 5 var _hight; 6 7 Object.defineProperty( 8 this, 9 'base', 10 { 11 get: function() { 12 return _base; 13 }, 14 set: function(base) { 15 if(typeof base === 'number' && base > 0) { 16 _base = base; 17 } 18 } 19 } 20 ); 21 Object.defineProperty( 22 this, 23 'height', 24 { 25 get: function() { 26 return _height 27 }, 28 set: function(height) { 29 if(typeof height === 'number' && height > 0) { 30 _height = height; 31 } 32 } 33 } 34 ); 35 }; 36  //三角形の面積を求めるメソッド 37 Triangle.prototype.getArea = function() { 38 return this.base * this.height / 2; 39 } 40 41 var t = new Triangle(); 42 43 t.base = 10; 44 t.height = 2; 45 46 console.log(t.base); // 10 47 console.log(t.height); // 2 48 console.log(t.getArea()); // 10 * 2 / 2 = 出力 10 49}

参照: JavaScript本格入門(改定新版) 5.4.2

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

しかし2つ目のコードでt.baseに値を渡すまではいいのですが、ゲッターが先でセッターが後のように記載しており

特に順番は関係ありません。プロパティへの代入ではsetが、プロパティへの参照ではgetが呼び出されます。

投稿2019/11/22 23:55

maisumakun

総合スコア145975

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

wikwik129

2019/11/23 00:07

ご回答ありがとうございます。 この例で言うと``t.base = 10;``でセッター、ゲッター二つが呼び出されて10を代入するのでセッター→ゲッター(処理の順番的に)という「私の考え」の一つ目の理解で大丈夫でしょうか?
maisumakun

2019/11/23 00:11

> アクセサーメソッドはそもそもセッター→ゲッターという順序の決まり?がある? 特にありません。いきなりゲッターを呼ぶことも実装によっては可能です。
wikwik129

2019/11/23 00:19 編集

なるほど! 今回の場合ではセッター→ゲッターの順番で処理しているが、場合によってセッターだけゲッターだけの実装また、ゲッターだけ・セッターだけ呼ぶということもできるということですね!
maisumakun

2019/11/23 00:20

「そもそもゲッターだけを実装して読み取り専用にする」ようなことも可能です。
wikwik129

2019/11/23 00:24

そう言う事だったんですね!参考書の他の気になる点も理解できました。もう一回参考書を読み返して理解を深めたいと思います! お時間頂きありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問